Enhance CSS for improved theme support: add color-scheme properties for light and dark modes, and explicitly define styles for native select elements to ensure proper color rendering in both themes.
This commit is contained in:
+16
-2
@@ -14,6 +14,7 @@
|
||||
--primary-foreground: #f2ecd8;
|
||||
--accent: #b45309;
|
||||
--scanline-opacity: 0.05;
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -26,6 +27,7 @@
|
||||
--primary-foreground: #05080a;
|
||||
--accent: #22d3ee;
|
||||
--scanline-opacity: 0.09;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -48,8 +50,20 @@
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
color-scheme: light dark;
|
||||
/* Нативные select/option: попап рисует браузер, поэтому цвета задаём явно —
|
||||
иначе в тёмной теме получается зелёный текст на белом фоне. */
|
||||
select {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
select option {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
select option:checked {
|
||||
background-color: var(--muted);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
Reference in New Issue
Block a user