use data attr color mode selector instead of class for better compati…

…bility with chakra
ethereum · Sep 20, 2024 · b8b5c1d · b8b5c1d
1 parent 23f68a8
commit b8b5c1d
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
@@ -27,7 +27,7 @@ const ThemeProvider = ({ children }: Pick<ThemeProviderProps, "children">) => {
   const theme = useMemo(() => merge(customTheme, { direction }), [direction])
   return (
     <NextThemesProvider
-      attribute="class"
+      attribute="data-theme"
       defaultTheme="light"
       enableSystem={false}
       disableTransitionOnChange

diff --git a/src/styles/docsearch.css b/src/styles/docsearch.css
@@ -7,7 +7,7 @@
 }
 
 .DocSearch-Button-Container svg {
-  @apply size-3.5 group-hover:rotate-12 transition-transform duration-500 group-hover:transition-transform group-hover:duration-500;
+  @apply size-3.5 transition-transform duration-500 group-hover:rotate-12 group-hover:transition-transform group-hover:duration-500;
 }
 
 .DocSearch-Search-Icon,
@@ -39,7 +39,7 @@
   --docsearch-hit-height: fit-content;
 }
 
-.dark {
+[data-theme="dark"] {
   --docsearch-modal-background: theme(backgroundColor.background.DEFAULT);
   --docsearch-highlight-color: theme(colors.primary.hover);
 }

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -51,7 +51,7 @@
     --search-background: var(--background);
   }
 
-  .dark {
+  [data-theme="dark"] {
     /* Semantic Colors: Dark mode */
     /* ! Deprecating primary-light */
     --primary-light: hsla(var(--orange-100));

diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css
@@ -122,7 +122,7 @@
   }
 
   /* Dark mode token declarations */
-  .dark {
+  [data-theme="dark"] {
     --body: var(--gray-100);
     --body-medium: var(--gray-400);
     --body-light: var(--gray-600);