use data attr color mode selector instead of class for better compatibility with chakra

Author: pettinarip

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

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);
 }

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));

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);