Merge pull request #181 from WJSoftware:JP/FixPages

fix(demo): Correct header colors in homepage for dark mode
WJSoftware · Nov 22, 2024 · 0cbefdc · 0cbefdc
2 parents 302a973 + 922b475
commit 0cbefdc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/demolib/HeaderCell.svelte b/src/demolib/HeaderCell.svelte
@@ -55,7 +55,7 @@
         }
     });
     $effect.pre(() => {
-        col.headerClass = col.pinned ? 'pinned-header' : undefined;
+        col.headerClass = col.pinned ? 'header-background pinned-header' : undefined;
         col.dataClass = col.pinned ? 'pinned-cell' : undefined;
     })
 

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -175,7 +175,7 @@ import &#123; WjDataView &#125; from '@wjfe/dataview';</pre>
                     width: 4,
                     minWidth: 4,
                     hidden: !demoOptions.showControlColumn,
-                    headerClass: 'pinned-header',
+                    headerClass: 'header-background pinned-header',
                     dataClass: 'pinned-cell',
                 }}
             >
@@ -235,12 +235,25 @@ import &#123; WjDataView &#125; from '@wjfe/dataview';</pre>
 
 <style lang="scss">
     :global(.header-background) {
-        box-shadow: 0 9999px 9999px rgba(0, 0, 0, 0.1) inset;
+        --header-bg-color: rgba(0, 0, 0, 0.1);
+        box-shadow: 0 9999px 9999px var(--header-bg-color) inset;
+
+        :global(*[data-bs-theme="dark"]) & {
+            --header-bg-color: rgba(255, 255, 255, 0.15);
+        }
     }
     :global(.pinned-header) {
-        box-shadow: 0 9999px 9999px rgba(5, 128, 102, 0.25) inset;
+        --header-bg-color: rgba(5, 128, 102, 0.15);
+        
+        :global(*[data-bs-theme="dark"]) & {
+            --header-bg-color: rgba(72, 250, 212, 0.332);
+        }
     }
     :global(.pinned-cell) {
-        box-shadow: 0 9999px 9999px rgba(13, 174, 139, 0.05) inset;
+        --pinned-cell-bg-color: rgba(13, 174, 139, 0.05);
+        box-shadow: 0 9999px 9999px var(--pinned-cell-bg-color) inset;
+        :global(*[data-bs-theme="dark"]) & {
+            --pinned-cell-bg-color: rgba(72, 250, 211, 0.086);
+        }
     }
 </style>