Open techniq opened 2 months ago
tailwind.config.ts
export default {
theme: {
extend: {
colors: {
'surface-100': 'rgb(var(--theme-color-surface-100) / <alpha-value>)',
'surface-200': 'rgb(var(--theme-color-surface-200) / <alpha-value>)',
'surface-300': 'rgb(var(--theme-color-surface-300) / <alpha-value>)',
'surface-content': 'rgb(var(--theme-color-surface-content) / <alpha-value>)',
}
},
},
};
app.postcss
(or anywhere to define CSS)
/* `:root` doesn't work as needs to be a descendant of `:root` where Skeleton defined `--color-*` */
body {
--theme-color-surface-100: var(--color-surface-50);
--theme-color-surface-200: var(--color-surface-100);
--theme-color-surface-300: var(--color-surface-200);
--theme-color-surface-content: var(--theme-font-color-base);
html.dark & {
--theme-color-surface-100: var(--color-surface-700);
--theme-color-surface-200: var(--color-surface-800);
--theme-color-surface-300: var(--color-surface-900);
--theme-color-surface-content: var(--theme-font-color-dark);
}
}
Hi I'm using daisyui and I added it in my .css
@media (prefers-color-scheme: dark) {
:root {
--customTextColor: white;
--primaryTextColor: #ff5757;
--softTextColor: rgba(156, 163, 175, 1);
--softLineColor: rgba(156, 163, 175, 0.4);
--screenBgColor: rgba(70, 70, 70, 0.5);
--errorBgColor: darkred;
--bgbase200: #2a2e37;
--scrollBarColor: rgba(86, 93, 105, 1);
--bgbase100: #3d4451;
--bgaccent: #078d7e;
/* layerchart */
--theme-color-surface-100: #2a2e37;
--theme-color-surface-200: #2a2e37;
--theme-color-surface-300: #2a2e37;
--theme-color-surface-content: white;
}
}
But it seems nothing changes (using the bar chart example), when I set to light theme, colors is black and white, but using dark theme all is still black and white (nothing changes)
Is there something I missed ?
Thanks
Hi @x4080 👋, a few thoughts:
You need to have at least the following Tailwind colors defined
surface-100
surface-200
surface-300
surface-content
You can define them without CSS variables (just set to #2a2e37
, etc), but if you decide to use CSS variables, they must be defined as colors channels separated by spaces (ex. R G B
as 42 62 55
or H S L
as 39 19.2 20.4
) and then reference the the colors in the tailwind config with the applicable color function (rgb(...)
, hsl(...)
, etc). Ultimately follow the Tailwind Using CSS Variables guide.
Daisy UI usually sets colors in the OKLCH color space. They also have similar variables as Svelte UX / LayerChart's variables/tokens (they were a big source of inspiration). You should be able to map base-100
, base-200
, base-300
, and base-content
variables to the applicable surface-*
variable.
Something like this should work (but untested, and might need some refinement):
export default {
theme: {
extend: {
colors: {
'surface-100': 'oklch(var(--b1) / <alpha-value>)',
'surface-200': 'oklch(var(--b2) / <alpha-value>)',
'surface-300': 'oklch(var(--b3) / <alpha-value>)',
'surface-content': 'oklch(var(--bc) / <alpha-value>)',
}
},
},
};
Let me know if that helps get you going. If you can setup a repo with Daisy UI and LayerChart, I could investigate it further.
Thanks for quick answer, I'll try it with
surface-100
surface-200
surface-300
surface-content
Provide examples to specifying Tailwind colors (or mapping to existing theme colors with other frameworks).
Would be nice to provide integration examples for:
shadcn-svelte
tailwind.config.ts
Skeleton
tailwind.config.ts
app.postcss
(or anywhere to define CSS)Daisy UI
flowbite
Tailwind only
CSS only