Dark mode colors are hard-coded in components

[nikhilk]

Describe the bug

Example usage

<Alert color="primary"> ... </Alert>

The actual color for primary can be defined in tailwind config.

However when this component builds the markup, it uses the following:

https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/utils/Frame.svelte#L61

const bgColors = {
  ...
    blue: 'bg-blue-50 dark:bg-gray-800 ',
    ...
    primary: 'bg-primary-50 dark:bg-gray-800 ',
  ...
}

Right now there doesn't seem to be a way to customize the dark look.

Ideally, the component would not even use dark: modifiers and instead let the app use css variables. Alternatively, this should have used bg-primary-50 dark:bg-dark-primary-50 so that the app could define dark-primary in tailwind config.

Secondly, the component doesn't allow using some other color name that isn't in the map, as it seems to default inject the same hard-coded color in dark mode even if using that other color name in light mode.

Reproduction

n/a

Flowbite version and System Info

n/a

[jjagielka]

Have you tried:

<Alert color="primary" class="dark:bg-pink-300"> ... </Alert>

[jkruke]

I'm with @nikhilk, working with dynamic colors through color-scheme adaptive CSS variables makes integration of flowbite quite difficult.

example tailwind.config.js:

import flowbitePlugin from 'flowbite/plugin'

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './resources/**/*.svelte',
        './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'
    ],
    theme: {
        extend: {
            colors: {
                // dynamic, auto changes for light/dark mode
                gray: {
                    50: "rgba(var(--background-color-50))",
                    100: "rgba(var(--background-color-100))",
                    200: "rgba(var(--background-color-200))",
                    300: "rgba(var(--background-color-300))",
                    400: "rgba(var(--background-color-400))",
                    500: "rgba(var(--background-color-500))",
                    600: "rgba(var(--background-color-600))",
                    700: "rgba(var(--background-color-700))",
                    800: "rgba(var(--background-color-800))",
                    900: "rgba(var(--background-color-900))",
                },
            },
        },
        darkMode: 'media',
        plugins: [
            require('@tailwindcss/typography'),
            flowbitePlugin,
        ],
    }
}

app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --dark-color: 24 24 27;
    --light-color: 250 250 250;

    /* Tailwind zinc colors for light/dark: https://github.com/remixfast/blog-tailwind-light-dark/blob/main/demo.html */
    --background-color-50: var(--light-color);
    --background-color-100: 244 244 245;
    --background-color-200: 228 228 231;
    --background-color-300: 212 212 216;
    --background-color-400: 161 161 170;
    --background-color-500: 113 113 122;
    --background-color-600: 82 82 91;
    --background-color-700: 63 63 70;
    --background-color-800: 39 39 42;
    --background-color-900: var(--dark-color);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color-900: var(--light-color);
        --background-color-800: 244 244 245;
        --background-color-700: 228 228 231;
        --background-color-600: 212 212 216;
        --background-color-500: 161 161 170;
        --background-color-400: 113 113 122;
        --background-color-300: 82 82 91;
        --background-color-200: 63 63 70;
        --background-color-100: 39 39 42;
        --background-color-50: var(--dark-color);
    }
}

This makes it easier to transparently switch to dark colors, because gray-100 is a dark gray in dark-mode and gray-100 is a light gray in light mode. Something like class="bg-gray-100 dark:bg-gray-900" breaks this behavior.

I appreciate the suggestions made by @nikhilk :

Ideally, the component would not even use dark: modifiers and instead let the app use css variables. Alternatively, this should have used bg-primary-50 dark:bg-dark-primary-50 so that the app could define dark-primary in tailwind config.