plugin.js hard-codes .dark class selectors instead of respecting Tailwind's darkMode config #1131

Description

Flowbite's plugin.js contains 22 hard-coded .dark class selectors that don't respect Tailwind's darkMode configuration. This means if a project uses a custom dark mode selector — which Tailwind v3 and v4 both explicitly support — Flowbite's dark styles for form controls, tooltips, and charts silently break.

For example, Tailwind v4 lets you customize the dark variant:

@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

And Tailwind v3 supports:

darkMode: ['selector', '[data-theme="dark"]']

But Flowbite's plugin ignores this and emits hard-coded .dark selectors that won't match.

Affected selectors in plugin.js (v4.0.1)

.dark [role="tooltip"] > [data-popper-arrow]:before
.dark [role="tooltip"] > [data-popper-arrow]:after
.dark [type='checkbox']:checked
.dark [type='radio']:checked
.dark [type='radio']:checked:before
.dark [type='radio']:checked:after
.dark input[type=file]::file-selector-button
.dark input[type="range"]:disabled::-webkit-slider-thumb
.dark input[type="range"]:disabled::-moz-range-thumb
.dark .selectedCell
.dark .apexcharts-canvas .apexcharts-tooltip
.dark .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title
.dark .apexcharts-canvas .apexcharts-xaxistooltip
.dark .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-label
... (and more)

Expected behavior

These selectors should respect the project's configured dark mode selector rather than hard-coding .dark. The plugin could read the dark mode config from Tailwind's context and generate selectors accordingly, or use Tailwind's dark: variant properly.

Context

Flowbite v3.0 moved many dark styles to CSS variables (reducing hard-coded .dark selectors from ~39 in v2.x to ~22 in v4.x), but form controls, tooltips, and chart integrations were not migrated. Projects using Tailwind's native custom dark mode selector support currently need a workaround of applying both their custom selector and class="dark" on <html> to keep Flowbite working.

Versions

• Flowbite: 4.0.1
• Also affects: 2.x and 3.x