F
Filament•2w ago
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 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?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?