Component backgrounds not changing | setDarkModeValue("light" | "dark") #245
Description
System info: Qwik City, Chrome, Flowbite, MacOS
setDarkModeValue from docs to toggle light and dark mode.
🔨 To get everything dark | light mode I have to click the button that sets state to light | dark then I have to go into the appearance for the browser and change it there too.
Goal: when I use setDarkModeValue("light" | "dark") all items should change accordingly.
Future I would love a third option "system"
Recreating the issue
- I created a fresh qwik-city app then used
npx flowbite-qwik-cli@latest initselected dark mode. - Copy / pasted with slight modifications a navbar, jumbotron, and a card
- Modified my
root.tsxfile to match docs
root.tsx
return (
<QwikCityProvider>
<head>
<meta charset="utf-8" />
{!isDev && (
<link
rel="manifest"
href={`${import.meta.env.BASE_URL}manifest.json`}
/>
)}
<RouterHead />
<FlowbiteProviderHeader />
</head>
<body lang="en">
<FlowbiteProvider theme="purple" toastPosition="top-right">
<RouterOutlet />
</FlowbiteProvider>
{!isDev && <ServiceWorkerRegister />}
</body>
</QwikCityProvider>
);everything is in layout.jsx:
<>
<Navbar>
<Navbar.Brand>
<span class="self-center text-xl font-semibold whitespace-nowrap">
Flowbite Qwik
</span>
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse class="z-10">
<Navbar.Link href="/" active>
Home
</Navbar.Link>
<Navbar.Link href="/demo/flower">About</Navbar.Link>
<Navbar.Link href="/demo/todolist">Services</Navbar.Link>
<Navbar.Link href="/navbars">Pricing</Navbar.Link>
<Navbar.Link href="/navbars">Contact</Navbar.Link>
</Navbar.Collapse>
</Navbar>
<Jumbotron class="rounded-lg sm:mb-10 md:my-10">
<Jumbotron.Heading tag="h2">
We invest in the world’s potential
</Jumbotron.Heading>
<Jumbotron.SubText>
Here at Flowbite we focus on markets where technology, innovation, and
capital can unlock long-term value and drive economic growth.
</Jumbotron.SubText>
<div class="flex justify-center gap-2">
<Button onClick$={clicked}>Get started</Button>
<Button color="alternative">Learn more</Button>
</div>
</Jumbotron>
<div class="flex flex-wrap justify-center gap-2">
<Card href="#" class="max-w-sm">
<Heading>Oh Dang</Heading>
<p>Thats the business</p>
<Button
suffix={IconArrowRightOutline}
onClick$={() => setDarkModeValue(isDark.value ? "light" : "dark")}
>
Toggle Mode
</Button>
</Card>
<Card href="#" class="max-w-sm">
<Heading>Oh Dang</Heading>
<p>Thats the business</p>
<Button suffix={IconArrowRightOutline}>Read more</Button>
</Card>
<Card href="#" class="max-w-sm">
<Heading>Oh Dang</Heading>
<p>Thats the business</p>
<Button suffix={IconArrowRightOutline}>Read more</Button>
</Card>
</div>
</>