You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

61 lines
1.9 KiB

html,
body {
height: 100%;
}
/* 全局主题变量(使用 _theme-helpers.scss 中的 mixin/map)
- 在 :root 中生成默认亮色主题变量
- 支持手动切换(data-theme="dark" / .theme-dark)
- 保留 prefers-color-scheme 媒体查询用于自动切换
*/
// 亮色主题变量 map(键不带 -- 前缀)
$theme-light: (
"color-fg-default": #24292f,
"color-fg-muted": #57606a,
"color-fg-subtle": #6e7781,
"color-canvas-default": #ffffff,
"color-canvas-subtle": #f6f8fa,
"color-border-default": #d0d7de,
"color-border-muted": hsla(210, 18%, 87%, 1),
"color-neutral-muted": rgba(175, 184, 193, 0.2),
"color-accent-fg": #0969da,
"color-accent-emphasis": #0969da,
"color-attention-subtle": #fff8c5,
"color-danger-fg": #cf222e,
"color-mark-default": rgb(255, 255, 0),
"color-mark-fg": rgb(255, 187, 0),
);
// 暗色主题变量 map(对应亮色变量的语义)
$theme-dark: (
"color-fg-default": #c9d1d9,
"color-fg-muted": #8b949e,
"color-fg-subtle": #6e7681,
"color-canvas-default": #0d1117,
"color-canvas-subtle": #010409,
"color-border-default": #30363d,
"color-border-muted": hsla(210, 18%, 20%, 1),
"color-neutral-muted": rgba(175, 184, 193, 0.12),
"color-accent-fg": #58a6ff,
"color-accent-emphasis": #2389ff,
"color-attention-subtle": rgba(255, 214, 10, 0.07),
"color-danger-fg": #ff7b72,
"color-mark-default": rgb(255, 214, 10),
"color-mark-fg": rgb(255, 165, 0),
);
// 在 :root 中生成默认(亮色)变量,便于组件直接使用 css var
@include generate-theme(":root", $theme-light);
// 手动主题切换支持:data-theme 或 class
@include generate-theme(':root[data-theme="dark"]', $theme-dark);
@include generate-theme(".theme-light", $theme-light);
@include generate-theme(".theme-dark", $theme-dark);
#app {
height: 100%;
background-color: css-var(color-canvas-default);
color: css-var(color-fg-default);
line-height: 1.2;
}