feat: Theme studio v2

toju-app/src/app/features/settings/settings-modal/settings-modal.component.html

@@ -16,6 +16,7 @@
   <!-- Modal -->
   <div class="fixed inset-0 z-[91] flex items-center justify-center p-4 pointer-events-none">
     <div
+      appThemeNode="settingsModalSurface"
       class="pointer-events-auto relative flex w-full max-w-5xl overflow-hidden rounded-lg border border-border bg-card shadow-lg transition-all duration-200"
       style="height: min(720px, 88vh)"
       [class.scale-100]="animating()"
@@ -30,7 +31,10 @@
       tabindex="-1"
     >
       <!-- Side Navigation -->
-      <nav class="flex w-56 flex-shrink-0 flex-col border-r border-border bg-card">
+      <nav
+        appThemeNode="settingsModalNav"
+        class="flex w-56 flex-shrink-0 flex-col border-r border-border bg-card"
+      >
         <div class="border-b border-border px-3 py-3">
           <h2 class="text-lg font-semibold text-foreground">Settings</h2>
         </div>
@@ -116,7 +120,10 @@
       <!-- Content -->
       <div class="flex-1 flex flex-col min-w-0">
         <!-- Header -->
-        <div class="flex items-center justify-between border-b border-border px-5 py-3 flex-shrink-0">
+        <div
+          appThemeNode="settingsModalHeader"
+          class="flex items-center justify-between border-b border-border px-5 py-3 flex-shrink-0"
+        >
           <h3 class="text-lg font-semibold text-foreground">
             @switch (activePage()) {
               @case ('general') {
@@ -169,7 +176,10 @@
         </div>
 
         <!-- Scrollable Content Area -->
-        <div class="flex-1 overflow-y-auto bg-background px-4 py-4 sm:px-5 sm:py-4">
+        <div
+          appThemeNode="settingsModalContent"
+          class="flex-1 overflow-y-auto bg-background px-4 py-4 sm:px-5 sm:py-4"
+        >
           @switch (activePage()) {
             @case ('general') {
               <app-general-settings />