Flowbite Qwik - Dark Mode

Learn how to configure and build a dark mode switcher for Flowbite using Tailwind CSS and start developing with the components from the library

Flowbite Qwik comes with dark mode support out of the box, it supports integration with all full-stack frameworks such as Next.js, Remix, Astro, Gatsby that are using server-side rendering (SSR).

Toggle dark mode

Surround the contents of your app with the FlowbiteProviderHeader component, and add the DarkThemeToggle component inside it. The DarkModeToggle component will automatically detect the current theme and display the correct icon, and allow the user to switch between themes as they like.

Test it :

import { DarkModeToggle, FlowbiteProviderHeader } from "flowbite-qwik"

export default component$(() => {
  return (
    <FlowbiteProviderHeader>
      // ...
      <DarkModeToggle />
    </FlowbiteProviderHeader>
  )
})

useDarkMode

useDarkMode is the hook reponsible for changing, detecting and persisting the dark mode.

Theme mode persistence is by default located in the browsers LocalStorage.

The DarkModeToggle component uses useDarkMode hook under the hood.

type darkModeTheme = 'light' | 'dark' | undefined

export function useDarkMode() {
  isDark: QRL<() => boolean>
  setDarkModeValue: QRL<(mode: darkModeTheme) => void>
}