Tailwind Themes

Is it possible to have 2 themes in a css file:

@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --color-header: var(--color-gray-50);
    --color-root: var(--color-white);
    --color-border: var(--color-gray-100);
    --color-compat-card: oklch(0.898 0 89.876);
    --color-text: var(--color-black);
}

@theme .dark {
    --color-header: var(--color-gray-950);
    --color-root: oklch(0.19 0.03 269.8 / 1);
    --color-border: var(--color-gray-700);
    --color-compat-card: oklch(0.25 0.02 269.25);
    --color-text: var(--color-white);
}

@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --color-header: var(--color-gray-50);
    --color-root: var(--color-white);
    --color-border: var(--color-gray-100);
    --color-compat-card: oklch(0.898 0 89.876);
    --color-text: var(--color-black);
}

@theme .dark {
    --color-header: var(--color-gray-950);
    --color-root: oklch(0.19 0.03 269.8 / 1);
    --color-border: var(--color-gray-700);
    --color-compat-card: oklch(0.25 0.02 269.25);
    --color-text: var(--color-white);
}

Then when switching themes, it picks the appropriate color. So if I have something like this:

<body class="bg-root">
    <Header />
    <slot />
</body>

<body class="bg-root">
    <Header />
    <slot />
</body>

Will

bg-root

bg-root

be the correct color depending on the them? I have done exactly this, and the color doesnt change. It ONLY works with dark:<....> and <...>. Am I missing something or is this just not possible?

Filament•4mo ago•

1 reply

Matthew

Tailwind Themes

Is it possible to have 2 themes in a css file:

@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --color-header: var(--color-gray-50);
    --color-root: var(--color-white);
    --color-border: var(--color-gray-100);
    --color-compat-card: oklch(0.898 0 89.876);
    --color-text: var(--color-black);
}

@theme .dark {
    --color-header: var(--color-gray-950);
    --color-root: oklch(0.19 0.03 269.8 / 1);
    --color-border: var(--color-gray-700);
    --color-compat-card: oklch(0.25 0.02 269.25);
    --color-text: var(--color-white);
}

@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --color-header: var(--color-gray-50);
    --color-root: var(--color-white);
    --color-border: var(--color-gray-100);
    --color-compat-card: oklch(0.898 0 89.876);
    --color-text: var(--color-black);
}

@theme .dark {
    --color-header: var(--color-gray-950);
    --color-root: oklch(0.19 0.03 269.8 / 1);
    --color-border: var(--color-gray-700);
    --color-compat-card: oklch(0.25 0.02 269.25);
    --color-text: var(--color-white);
}

Then when switching themes, it picks the appropriate color. So if I have something like this:

<body class="bg-root">
    <Header />
    <slot />
</body>

<body class="bg-root">
    <Header />
    <slot />
</body>

Will

bg-root

bg-root

be the correct color depending on the them? I have done exactly this, and the color doesnt change. It ONLY works with dark:<....> and <...>. Am I missing something or is this just not possible?

Tailwind Themes

Similar Threads

Tailwind Themes

Similar Threads

Similar Threads

Similar Threads