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:
Leonid Pershin
2026-07-24 06:56:16 +03:00
parent b67cc960a0
commit 1dd6991174
+16 -2
View File
@@ -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 {