[BUG] - Fix tailwind themes in docs (#2808)

## Description of changes Tailwind dark-mode did not respond to changes properly since `next-themes` uses `data-theme="dark"` to apply dark mode styling to elements in this project. This made it hard to develop dark mode styling for custom components on the docs site. ## Test plan Visually tested with `npm run dev`. Notice that in production the "sun" doesn't change to a "moon" when applying dark mode (this _should_ happen on the tailwind styling). ## Documentation Changes Not needed. Co-authored-by: Itai Smith <[email protected]>
chroma-core · Sep 17, 2024 · efea481 · efea481
1 parent 152954c
commit efea481
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 23 deletions.
diff --git a/docs/docs.trychroma.com/components/layout/TopNav.tsx b/docs/docs.trychroma.com/components/layout/TopNav.tsx
@@ -1,35 +1,36 @@
-import React, { useState, ReactNode } from 'react';
-import Link from 'next/link'; // Assuming you're using Next.js Link, make sure to import it.
+import React, { useState, ReactNode } from "react";
+import Link from "next/link"; // Assuming you're using Next.js Link, make sure to import it.
 
 interface TopNavProps {
   children: ReactNode; // This type accepts anything that can be rendered: numbers, strings, elements or an array containing these types.
 }
 
-import '@docsearch/css';
-import { DocSearch } from '@docsearch/react';
+import "@docsearch/css";
+import { DocSearch } from "@docsearch/react";
 
 export function TopNav({ children }: TopNavProps) {
   return (
-    <div className={` dark:bg-stone-950 px-2 pr-0 border-b`}>
+    <div className={`px-2 pr-0 border-b`}>
       <nav>
         <div className="flex h-16 items-center justify-between px-4 ">
-          <div className='flex'>
-          <Link href="/" className="flex column items-center">
-            <img src='/img/chroma.svg' alt='Chroma Logo' className='h-8 w-auto' />
-            <p className='ml-3 mb-0 text-lg font-semibold'>Chroma</p>
-          </Link>
-          <Search/>
+          <div className="flex">
+            <Link href="/" className="flex column items-center">
+              <img
+                src="/img/chroma.svg"
+                alt="Chroma Logo"
+                className="h-8 w-auto"
+              />
+              <p className="ml-3 mb-0 text-lg font-semibold">Chroma</p>
+            </Link>
+            <Search />
           </div>
-          <section className={'flex gap-x-4 items-center'}>
-            {children}
-          </section>
+          <section className={"flex gap-x-4 items-center"}>{children}</section>
         </div>
       </nav>
     </div>
   );
 }
 
-
 function Search() {
   return (
     <DocSearch

diff --git a/docs/docs.trychroma.com/tailwind.config.js b/docs/docs.trychroma.com/tailwind.config.js
@@ -1,11 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ["class"],
+  darkMode: ["class", '[data-theme="dark"]'],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
   ],
   prefix: "",
   theme: {
@@ -18,8 +18,8 @@ module.exports = {
     },
     extend: {
       fontFamily: {
-        sans: ['var(--font-inter)'],
-        mono: ['var(--font-ibm-plex-mono)'],
+        sans: ["var(--font-inter)"],
+        mono: ["var(--font-ibm-plex-mono)"],
       },
       colors: {
         border: "hsl(var(--border))",
@@ -78,4 +78,4 @@ module.exports = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
+};