Hass/Message-Push-Nest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add dark/light theme

Browse Source
This commit is contained in:
engigu
2025-09-30 22:24:29 +08:00
parent f3f378115d
commit 415bed6093
11 changed files with 175 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/index.css
+46 -15
View File
@@ -79,38 +79,38 @@
}
.dark {
--background: oklch(0.145 0 0);
--background: oklch(0.18 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.145 0 0);
--card: oklch(0.19 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.145 0 0);
--popover: oklch(0.19 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.985 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary: oklch(0.30 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--muted: oklch(0.24 0 0);
--muted-foreground: oklch(0.72 0 0);
--accent: oklch(0.30 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.396 0.141 25.723);
--destructive-foreground: oklch(0.637 0.237 25.331);
--border: oklch(0.269 0 0);
--input: oklch(0.269 0 0);
--ring: oklch(0.439 0 0);
--border: oklch(0.34 0 0);
--input: oklch(0.34 0 0);
--ring: oklch(0.5 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar: oklch(0.20 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary: oklch(0.52 0.24 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent: oklch(0.30 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.269 0 0);
--sidebar-ring: oklch(0.439 0 0);
--sidebar-border: oklch(0.34 0 0);
--sidebar-ring: oklch(0.5 0 0);
}
@layer base {
@@ -120,4 +120,35 @@
body {
@apply bg-background text-foreground;
}
/* 全局文本元素在暗色/亮色下均使用前景色，避免灰度类在暗色不可读 */
h1, h2, h3, h4, h5, h6,
p, label, span, small, strong, em, b, i,
li, dt, dd, th, td {
@apply text-foreground;
}
}
/* 在暗色模式下，覆盖常见的灰度文字类为前景色，提升可读性 */
@layer utilities {
.dark .text-black,
.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-gray-600,
.dark .text-gray-500 {
color: var(--foreground) !important;
}
/* ApexCharts tooltip 容器透明，交由自定义HTML内部控制视觉，避免圆角黑边 */
.apexcharts-tooltip {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
.apexcharts-tooltip-title {
background: transparent !important;
border: none !important;
}
}