75 lines
1.7 KiB
CSS
75 lines
1.7 KiB
CSS
@import "tailwindcss";
|
|
|
|
@custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
--app-page: #f5f7f6;
|
|
--app-surface: #ffffff;
|
|
--app-line: #e4e7e6;
|
|
--app-content-1: #18191c;
|
|
--app-content-2: #61666d;
|
|
--app-content-3: #9499a0;
|
|
--app-on-primary: #ffffff;
|
|
}
|
|
|
|
:root,
|
|
[data-theme="emerald"] {
|
|
--app-primary: #059669;
|
|
--app-primary-hover: #10b981;
|
|
--app-accent: #0d9488;
|
|
}
|
|
|
|
[data-theme="indigo"] {
|
|
--app-primary: #4f46e5;
|
|
--app-primary-hover: #6366f1;
|
|
--app-accent: #7c3aed;
|
|
}
|
|
|
|
[data-theme="orange"] {
|
|
--app-primary: #ea580c;
|
|
--app-primary-hover: #f97316;
|
|
--app-accent: #d97706;
|
|
}
|
|
|
|
[data-theme="blue"] {
|
|
--app-primary: #2563eb;
|
|
--app-primary-hover: #3b82f6;
|
|
--app-accent: #0284c7;
|
|
}
|
|
|
|
/* 暗色模式：中性色 + 强制单色白点缀，需位于主题色相块之后以覆盖 */
|
|
[data-mode="dark"] {
|
|
color-scheme: dark;
|
|
--app-page: #0f1112;
|
|
--app-surface: #1a1c1e;
|
|
--app-line: #2c2f31;
|
|
--app-content-1: #e8eaed;
|
|
--app-content-2: #a4a9af;
|
|
--app-content-3: #6f757b;
|
|
--app-primary: #ffffff;
|
|
--app-primary-hover: #d4d4d8;
|
|
--app-accent: #ffffff;
|
|
--app-on-primary: #101112;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-primary: var(--app-primary);
|
|
--color-primary-hover: var(--app-primary-hover);
|
|
--color-accent: var(--app-accent);
|
|
--color-on-primary: var(--app-on-primary);
|
|
--color-page: var(--app-page);
|
|
--color-surface: var(--app-surface);
|
|
--color-line: var(--app-line);
|
|
--color-content-1: var(--app-content-1);
|
|
--color-content-2: var(--app-content-2);
|
|
--color-content-3: var(--app-content-3);
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
background-color: var(--app-page);
|
|
color: var(--app-content-1);
|
|
}
|
|
}
|