-
@import 'tailwindcss';
@variant dark (&:where(.dark, .dark *));
@theme {
// regular mode
--color-secondary: rgba(244, 173, 12, 1);
// Then dark mode? --color-secondary: rgba(215, 156, 50, 1);
} |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 2 replies
-
|
You could do: @import 'tailwindcss';
@variant dark (&:where(.dark, .dark *));
@theme {
--color-secondary: rgba(244, 173, 12, 1);
}
@layer theme {
[class~="dark"] {
--color-secondary: rgba(215, 156, 50, 1);
}
}Or @import 'tailwindcss';
@variant dark (&:where(.dark, .dark *));
@theme {
--color-secondary: light-dark(rgba(244, 173, 12, 1), rgba(215, 156, 50, 1));And then use <html class="scheme-light dark:scheme-dark dark"> |
Beta Was this translation helpful? Give feedback.
-
|
@import 'tailwindcss'; @layer theme { |
Beta Was this translation helpful? Give feedback.
-
|
Could you give more details about how it doesn't work please? What happens vs what you expect to happen. |
Beta Was this translation helpful? Give feedback.
-
|
my expectation is dark pageit did work how i implement dark and light custom theme in tailwind v4. how do use dark and light theme ? which steps i fellow? https://github.com/import 'tailwindcss';@variant dark (&:where(.dark, .dark *)); @theme { --color-secondary: rgba(244, 173, 12, 1); } https://github.com/layer theme { |
Beta Was this translation helpful? Give feedback.
-
|
Could you give more details about how it doesn't work please? What happens vs what you expect to happen. You'd want to use -https://github.com/import 'tailwindcss';
+@import 'tailwindcss'; }
-https://github.com/layer theme {
+@layer theme {
[class~="dark"] { |
Beta Was this translation helpful? Give feedback.
You could do:
Or
And then use
color-schemelike: