I have a dashboard where my Javascript UI library components work fine with dark/light mode, but the Navbar will ignore the dark: selector and just use the default theme set in the OS.
I thought this line darkMode: 'class' in tailwind.config.js make elements use their dark: selector when the dark class is added to , instead of using the system's default theme from prefers-color-scheme
here is my navbar, as you can see the Disclosure has bg-white and dark:bg-slate-900
But in the video clip above the navbar only uses bg-slate-900 because the OS system is in dark mode. (changed to bg-white when I changed to windows light mode).
import { Fragment } from 'react'
import { Disclosure, Menu, Transition } from '@headlessui/react'
import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
import { UserProfile } from "@/components/dashboard/user-profile"
export function DashboardNavbar() {
return (
<Disclosure as="nav" className="shadow-lg bg-white dark:bg-slate-900">
{({ open }) => (
<>
<div className="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8 ">
<div className="flex h-16 justify-between">
<div className="flex px-2 lg:px-0">
<div className="flex flex-shrink-0 items-center">
<a href="#">
<img
className="h-13 w-auto"
src="https://notiongadgets.com/notionpaws.svg"
alt="Your Company"
/>
</a>
</div>
<div className="hidden lg:ml-6 lg:flex lg:space-x-8">
{/* Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
<a
href="#"
className="inline-flex items-center border-b-2 border-yellow-500 px-1 pt-1 text-sm font-medium text-gray-900"
>
Your Sites
</a>
<a
href="#"
className="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 dark:hover:theme-color hover:text-gray-700"
>
Help Docs
</a>
<a
href="#"
className="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
>
Pricing
</a>
<a
href="#"
className="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"
>
Calendar
</a>
</div>
</div>
<div className="flex items-center lg:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="absolute -inset-0.5" />
<span className="sr-only">Open main menu</span>
{open ? (
<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
) : (
<Bars3Icon className="block h-6 w-6" aria-hidden="true" />
)}
</Disclosure.Button>
</div>
<div className="hidden lg:ml-4 lg:flex lg:items-center">
<button type="button" className="mr-5 relative flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<span className="absolute -inset-1.5" />
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>
<UserProfile></UserProfile>
</div>
</div>
</div>
<Disclosure.Panel className="lg:hidden">
<div className="space-y-1 pb-3 pt-2">
{/* Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800" */}
<Disclosure.Button
as="a"
href="#"
className="block border-l-4 border-yellow-500 bg-indigo-50 py-2 pl-3 pr-4 text-base font-medium text-indigo-700"
>
Dashboard
</Disclosure.Button>
<Disclosure.Button
as="a"
href="#"
className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800"
>
Team
</Disclosure.Button>
<Disclosure.Button
as="a"
href="#"
className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800"
>
Projects
</Disclosure.Button>
<Disclosure.Button
as="a"
href="#"
className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800"
>
Calendar
</Disclosure.Button>
</div>
<div className="border-t border-gray-200 pb-3 pt-4">
<div className="flex items-center px-4">
<div className="flex-shrink-0">
<img
className="h-10 w-10 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</div>
<div className="ml-3">
<div className="text-base font-medium text-gray-800">Tom Cook</div>
<div className="text-sm font-medium text-gray-500">[email protected]</div>
</div>
<button
type="button"
className="relative ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<span className="absolute -inset-1.5" />
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="mt-3 space-y-1">
<Disclosure.Button
as="a"
href="#"
className="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
>
Your Profile
</Disclosure.Button>
<Disclosure.Button
as="a"
href="#"
className="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
>
Settings
</Disclosure.Button>
<Disclosure.Button
as="a"
href="#"
className="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
>
Sign out
</Disclosure.Button>
</div>
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
)
}
and my tailwind.config.js file
/** @type {import('tailwindcss').Config} */
const { fontFamily } = require("tailwindcss/defaultTheme")
import { library, config } from '@fortawesome/fontawesome-svg-core'
config.autoAddCss = false
module.exports = {
darkMode: 'class',
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
fontFamily: {
sans: ["var(--font-sans)", ...fontFamily.sans]
},
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
}
So could someone point me in the right direction and make sense of this mess?