feat: Theme studio v2

toju-app/src/app/features/servers/servers-rail/servers-rail.component.html

@@ -1,6 +1,7 @@
 <nav class="relative flex h-full w-full flex-col items-center gap-2 border-r border-border bg-secondary/35 px-2 py-3">
   <!-- Create button -->
   <button
+    appThemeNode="serversRailCreateButton"
     type="button"
     class="flex h-10 w-10 items-center justify-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary/90"
     title="Create Server"
@@ -17,7 +18,10 @@
   }
 
   <!-- Saved servers icons -->
-  <div class="no-scrollbar mt-2 flex w-full flex-1 flex-col items-center gap-2 overflow-y-auto pt-0.5">
+  <div
+    appThemeNode="serversRailList"
+    class="no-scrollbar mt-2 flex w-full flex-1 flex-col items-center gap-2 overflow-y-auto pt-0.5"
+  >
     @for (room of visibleSavedRooms(); track room.id) {
       <div class="group/server relative flex w-full justify-center">
         <span
@@ -27,6 +31,7 @@
         ></span>
 
         <button
+          appThemeNode="serversRailItem"
           type="button"
           class="relative z-10 flex h-10 w-10 cursor-pointer flex-shrink-0 items-center justify-center border border-transparent transition-[border-radius,box-shadow,background-color] duration-100 hover:rounded-lg hover:bg-card"
           [ngClass]="isSelectedRoom(room) ? 'rounded-lg ring-2 ring-primary/40 bg-primary/10' : 'rounded-xl bg-card'"