refactor(tailwind.config): update dark mode strategy to use the class selector

Author: TylerAPfledderer

src/components/ThemeProvider.tsx

@@ -17,7 +17,7 @@ const ThemeProvider = ({ children }: Pick<ThemeProviderProps, "children">) => {
 
   return (
     <NextThemesProvider
-      attribute="data-theme"
+      attribute="class"
       defaultTheme="light"
       disableTransitionOnChange
       storageKey={COLOR_MODE_STORAGE_KEY}

src/styles/docsearch.css

@@ -39,7 +39,7 @@
   --docsearch-hit-height: fit-content;
 }
 
-[data-theme="dark"] {
+.dark {
   --docsearch-modal-background: theme(backgroundColor.background.DEFAULT);
   --docsearch-highlight-color: theme(colors.primary.hover);
 }

src/styles/global.css

@@ -50,7 +50,7 @@
     );
   }
 
-  [data-theme="dark"] {
+  .dark {
     /* Misc semantics: dark mode */
     --tooltip-shadow: rgba(255, 255, 255, 0.24);
     --switch-background: rgba(255, 255, 255, 0.24);

src/styles/semantic-tokens.css

@@ -129,7 +129,7 @@
   }
 
   /* Dark mode token declarations */
-  [data-theme="dark"] {
+  .dark {
     --body: var(--gray-100);
     --body-medium: var(--gray-400);
     --body-light: var(--gray-600);

tailwind.config.ts

@@ -5,12 +5,8 @@ import { screens } from "./src/lib/utils/screen"
 
 const config = {
   // TODO: Move to "class" strategy after removing Chakra
-  darkMode: ["selector", '[data-theme="dark"]'],
-  content: [
-    "./src/**/*.{ts,tsx}",
-    // TODO: remove after migration
-    "./tailwind/**/*.tsx",
-  ],
+  darkMode: ["selector"],
+  content: ["./src/**/*.{ts,tsx}"],
   prefix: "",
   theme: {
     extend: {