48 lines
3.2 KiB
CSS
48 lines
3.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #171717;
|
|
|
|
/* Body 背景变量 - 亮色主题 */
|
|
--body-bg-color: #FFF7ED;
|
|
--body-gradient-color-1: #FFF7ED;
|
|
--body-gradient-color-2: white;
|
|
--body-gradient-color-3: transparent;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
|
|
/* 设置 dark 模式为 class 策略 */
|
|
--dark-mode: class;
|
|
}
|
|
|
|
/* 暗色主题变量覆盖 */
|
|
.dark {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
|
|
/* Body 背景变量 - 暗色主题 */
|
|
--body-bg-color: #1a1a1a;
|
|
--body-gradient-color-1: #2a2a2a;
|
|
--body-gradient-color-2: #3a3a3a;
|
|
--body-gradient-color-3: transparent;
|
|
}
|
|
|
|
|
|
|
|
/* Body 样式 - 使用 CSS 变量支持主题切换 */
|
|
body {
|
|
background-color: var(--body-bg-color);
|
|
background-image:
|
|
radial-gradient(circle at 100% 150%, var(--body-gradient-color-1) 24%, var(--body-gradient-color-2) 24%, var(--body-gradient-color-2) 28%, var(--body-gradient-color-1) 28%, var(--body-gradient-color-1) 36%, var(--body-gradient-color-2) 36%, var(--body-gradient-color-2) 40%, var(--body-gradient-color-3) 40%, var(--body-gradient-color-3)),
|
|
radial-gradient(circle at 0 150%, var(--body-gradient-color-1) 24%, var(--body-gradient-color-2) 24%, var(--body-gradient-color-2) 28%, var(--body-gradient-color-1) 28%, var(--body-gradient-color-1) 36%, var(--body-gradient-color-2) 36%, var(--body-gradient-color-2) 40%, var(--body-gradient-color-3) 40%, var(--body-gradient-color-3)),
|
|
radial-gradient(circle at 50% 100%, var(--body-gradient-color-2) 10%, var(--body-gradient-color-1) 10%, var(--body-gradient-color-1) 23%, var(--body-gradient-color-2) 23%, var(--body-gradient-color-2) 30%, var(--body-gradient-color-1) 30%, var(--body-gradient-color-1) 43%, var(--body-gradient-color-2) 43%, var(--body-gradient-color-2) 50%, var(--body-gradient-color-1) 50%, var(--body-gradient-color-1) 63%, var(--body-gradient-color-2) 63%, var(--body-gradient-color-2) 71%, var(--body-gradient-color-3) 71%, var(--body-gradient-color-3)),
|
|
radial-gradient(circle at 100% 50%, var(--body-gradient-color-2) 5%, var(--body-gradient-color-1) 5%, var(--body-gradient-color-1) 15%, var(--body-gradient-color-2) 15%, var(--body-gradient-color-2) 20%, var(--body-gradient-color-1) 20%, var(--body-gradient-color-1) 29%, var(--body-gradient-color-2) 29%, var(--body-gradient-color-2) 34%, var(--body-gradient-color-1) 34%, var(--body-gradient-color-1) 44%, var(--body-gradient-color-2) 44%, var(--body-gradient-color-2) 49%, var(--body-gradient-color-3) 49%, var(--body-gradient-color-3)),
|
|
radial-gradient(circle at 0 50%, var(--body-gradient-color-2) 5%, var(--body-gradient-color-1) 5%, var(--body-gradient-color-1) 15%, var(--body-gradient-color-2) 15%, var(--body-gradient-color-2) 20%, var(--body-gradient-color-1) 20%, var(--body-gradient-color-1) 29%, var(--body-gradient-color-2) 29%, var(--body-gradient-color-2) 34%, var(--body-gradient-color-1) 34%, var(--body-gradient-color-1) 44%, var(--body-gradient-color-2) 44%, var(--body-gradient-color-2) 49%, var(--body-gradient-color-3) 49%, var(--body-gradient-color-3));
|
|
background-size: 100px 50px;
|
|
} |