by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: support custom background colors for sidebar and header (#4151)

Browse Source 
* feat: support custom background colors for sidebar and header

* fix: type error
This commit is contained in:
Vben
2024-08-14 21:47:37 +08:00
committed by GitHub
parent 83fcdec37c
commit 8f40d5107c
19 changed files with 148 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/src/guide/essentials/settings.md
View File

@@ -260,6 +260,7 @@ const defaultPreferences: Preferences = {
colorWarning: 'hsl(42 84% 61%)',
mode: 'dark',
radius: '0.5',
semiDarkHeader: false,
semiDarkMenu: true,
},
transition: {
@@ -452,6 +453,8 @@ interface ThemePreferences {
mode: ThemeModeType;
/** 圆角 */
radius: string;
/** 是否开启半深色header（只在theme='light'时生效） */
semiDarkHeader: boolean;
/** 是否开启半深色菜单（只在theme='light'时生效） */
semiDarkMenu: boolean;
}

110
docs/src/guide/in-depth/theme.md
View File

@@ -107,9 +107,6 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
/* 基本文字大小 */
--font-size-base: 16px;
/* 主体内容背景色 */
--content: 240 11% 96%;
/* =============component & UI============= */
/* menu */
@@ -117,6 +114,9 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
--sidebar-deep: 210 11.11% 96.47%;
--menu: var(--sidebar);
/* header */
--header: 0 0% 100%;
accent-color: var(--primary);
color-scheme: light;
}
@@ -206,14 +206,12 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
/* 基本文字大小 */
--font-size-base: 16px;
/* 主体内容背景色 */
--content: 240 11% 96%;
/* =============component & UI============= */
--sidebar: 222.34deg 10.43% 12.27%;
--sidebar-deep: 220deg 13.06% 9%;
--menu: var(--sidebar);
--header: 222.34deg 10.43% 12.27%;
color-scheme: dark;
}
@@ -228,7 +226,6 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
### 默认主题下：
```css
/* */
:root {
/* Background color for <Card /> */
--card: 0 0% 30%;
@@ -238,7 +235,6 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
### 黑暗模式下
```css
/* */
.dark,
.dark[data-theme='custom'],
.dark[data-theme='default'] {
@@ -335,7 +331,7 @@ type BuiltinThemeType =
/* 主体区域背景色 */
--background-deep: 210 11.11% 96.47%;
--foreground: 210 6% 21%;
--foreground: 222 84% 5%;
/* Background color for <Card /> */
--card: 0 0% 100%;
@@ -346,8 +342,12 @@ type BuiltinThemeType =
--popover-foreground: 222.2 84% 4.9%;
/* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
/* --muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%; */
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
/* 主题颜色 */
@@ -405,16 +405,16 @@ type BuiltinThemeType =
/* 基本文字大小 */
--font-size-base: 16px;
/* 主体内容背景色 */
--content: 240 11% 96%;
/* =============component & UI============= */
/* menu */
--sidebar: 0 0% 100%;
--sidebar-deep: 210 11.11% 96.47%;
--sidebar-deep: 0 0% 100%;
--menu: var(--sidebar);
/* header */
--header: 0 0% 100%;
accent-color: var(--primary);
color-scheme: light;
}
@@ -719,8 +719,13 @@ type BuiltinThemeType =
--popover-foreground: 210 40% 98%;
/* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
--muted: 220deg 6.82% 17.25%;
--muted-foreground: 215 20.2% 65.1%;
/* --muted: 220deg 6.82% 17.25%; */
/* --muted-foreground: 215 20.2% 65.1%; */
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
/* 主题颜色 */
@@ -747,16 +752,16 @@ type BuiltinThemeType =
--secondary-foreground: 0 0% 98%;
/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
--accent: 0deg 0% 100% / 8%;
--accent-hover: 0deg 0% 100% / 12%;
--accent: 216 5% 19%;
--accent-hover: 216 5% 24%;
--accent-foreground: 0 0% 98%;
/* Darker color */
--heavy: 0deg 0% 100% / 12%;
--heavy: 216 5% 24%;
--heavy-foreground: var(--accent-foreground);
/* Default border color */
--border: 240 3.7% 15.9%;
--border: 240 3.7% 22%;
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 0deg 0% 100% / 10%;
@@ -777,15 +782,15 @@ type BuiltinThemeType =
/* 基本文字大小 */
--font-size-base: 16px;
/* 主体内容背景色 */
--content: 240 11% 96%;
/* =============component & UI============= */
--sidebar: 222.34deg 10.43% 12.27%;
--sidebar-deep: 220deg 13.06% 9%;
--menu: var(--sidebar);
/* header */
--header: 222.34deg 10.43% 12.27%;
color-scheme: dark;
}
@@ -812,6 +817,7 @@ type BuiltinThemeType =
--ring: 263.4 70% 50.4%;
--sidebar: 224 71.4% 4.1%;
--sidebar-deep: 224 71.4% 4.1%;
--header: 224 71.4% 4.1%;
}
.dark[data-theme='pink'],
@@ -837,6 +843,7 @@ type BuiltinThemeType =
--ring: 346.8 77.2% 49.8%;
--sidebar: 20 14.3% 4.1%;
--sidebar-deep: 20 14.3% 4.1%;
--header: 20 14.3% 4.1%;
}
.dark[data-theme='rose'],
@@ -862,6 +869,7 @@ type BuiltinThemeType =
--ring: 0 72.2% 50.6%;
--sidebar: 0 0% 3.9%;
--sidebar-deep: 0 0% 3.9%;
--header: 0 0% 3.9%;
}
.dark[data-theme='sky-blue'],
@@ -887,6 +895,7 @@ type BuiltinThemeType =
--ring: 224.3 76.3% 48%;
--sidebar: 222.2 84% 4.9%;
--sidebar-deep: 222.2 84% 4.9%;
--header: 222.2 84% 4.9%;
}
.dark[data-theme='deep-blue'],
@@ -912,6 +921,7 @@ type BuiltinThemeType =
--ring: 224.3 76.3% 48%;
--sidebar: 222.2 84% 4.9%;
--sidebar-deep: 222.2 84% 4.9%;
--header: 222.2 84% 4.9%;
}
.dark[data-theme='green'],
@@ -937,6 +947,7 @@ type BuiltinThemeType =
--ring: 142.4 71.8% 29.2%;
--sidebar: 20 14.3% 4.1%;
--sidebar-deep: 20 14.3% 4.1%;
--header: 20 14.3% 4.1%;
}
.dark[data-theme='deep-green'],
@@ -962,6 +973,7 @@ type BuiltinThemeType =
--ring: 142.4 71.8% 29.2%;
--sidebar: 20 14.3% 4.1%;
--sidebar-deep: 20 14.3% 4.1%;
--header: 20 14.3% 4.1%;
}
.dark[data-theme='orange'],
@@ -987,6 +999,7 @@ type BuiltinThemeType =
--ring: 20.5 90.2% 48.2%;
--sidebar: 20 14.3% 4.1%;
--sidebar-deep: 20 14.3% 4.1%;
--header: 20 14.3% 4.1%;
}
.dark[data-theme='yellow'],
@@ -1012,6 +1025,7 @@ type BuiltinThemeType =
--ring: 35.5 91.7% 32.9%;
--sidebar: 20 14.3% 4.1%;
--sidebar-deep: 20 14.3% 4.1%;
--header: 20 14.3% 4.1%;
}
.dark[data-theme='zinc'],
@@ -1037,6 +1051,7 @@ type BuiltinThemeType =
--ring: 240 4.9% 83.9%;
--sidebar: 240 10% 3.9%;
--sidebar-deep: 240 10% 3.9%;
--header: 240 4.9% 83.9%;
}
.dark[data-theme='neutral'],
@@ -1062,6 +1077,7 @@ type BuiltinThemeType =
--ring: 0 0% 83.1%;
--sidebar: 0 0% 3.9%;
--sidebar-deep: 0 0% 3.9%;
--header: 0 0% 3.9%;
}
.dark[data-theme='slate'],
@@ -1087,6 +1103,7 @@ type BuiltinThemeType =
--ring: 212.7 26.8% 83.9;
--sidebar: 222.2 84% 4.9%;
--sidebar-deep: 222.2 84% 4.9%;
--header: 222.2 84% 4.9%;
}
.dark[data-theme='gray'],
@@ -1112,6 +1129,7 @@ type BuiltinThemeType =
--ring: 216 12.2% 83.9%;
--sidebar: 224 71.4% 4.1%;
--sidebar-deep: 224 71.4% 4.1%;
--header: 224 71.4% 4.1%;
}
```
@@ -1200,6 +1218,50 @@ export const overridesPreferences = defineOverridesPreferences({
});
```
## 自定义侧边栏颜色
侧边栏颜色通过`--sidebar`变量来配置
### 默认主题下：
```css
:root {
--sidebar: 0 0% 100%;
}
```
### 黑暗模式下
```css
.dark,
.dark[data-theme='custom'],
.dark[data-theme='default'] {
--sidebar: 222.34deg 10.43% 12.27%;
}
```
## 自定义顶栏颜色
侧边栏颜色通过`--header`变量来配置
### 默认主题下：
```css
:root {
--header: 0 0% 100%;
}
```
### 黑暗模式下
```css
.dark,
.dark[data-theme='custom'],
.dark[data-theme='default'] {
--header: 222.34deg 10.43% 12.27%;
}
```
## 色弱模式
一般用于特殊场景，将设置为色弱模式，你可以在`preferences.ts`中进行配置：