Following the exact doc procedure to enable dark mode does not work

[mrosati84]

Describe the bug Hello, I am trying to implement dark mode exactly by following the procedure described in the documentation. This procedure is identical to the one in the youtube video Flowbite crash course in 20 minutes". The thing is that even by following this line by line, at the end what i have is a toggle button that does not toggle the dark mode. The dark mode however works when switching the dark mode in windows.

To Reproduce Steps to reproduce the behavior:

1. follow the exact procedure to enable dark mode
2. flip the dark switch
3. see that nothing happens

Expected behavior The dark mode should show when toggling the switch.

Screenshots

see here, the switch changes, the theme doesn't

• Version 3.1.2

[NielsWille]

I´m facing the exact same issue.

When you look closely to the crash course, he is still using version 1.5.2 of flowbite, which means the video is outdated...

When referencing version 1.5.2 the toggle works, but this should not be the solution.

Will look further.

[NielsWille]

I managed to get it working using Flowbite 3.1.2 and Tailwind 4.1.4

Using this as input.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
@custom-variant dark (&:where(.dark, .dark *));

@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

The first four rows is the change that made it work...

I am using this command to generate to output.css:

npx tailwindcss -i ./input.css -o ./output.css --watch

In the index.html I have added these two lines to the header:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.css" rel="stylesheet" />
<link href="output.css" rel="stylesheet" ></script>

In the index.html I have added this line to the bottom of the body:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"></script>