Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Aug 14, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ec19a44
feat: support custom background colors for sidebar and header
anncwb Aug 14, 2024
d7d54bb
fix: type error
anncwb Aug 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/backend-mock/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Description

Vben Admin 数据 mock 服务，没有对接任何的数据库，所有数据都是模拟的，用于前端开发时提供数据支持。由于 sqlite 安装需要在本地进行编译，所以这里接口是直接返回的。线上环境不再提供mock集成，可自行部署服务或者对接真实数据，同步 mock.js等工具有一些限制，比如上传文件不行、无法模拟复杂的逻辑等，所以这里使用了 真是的后端服务来实现。唯一麻烦的是本地需要同时启动后端服务和前端服务，但是这样可以更好的模拟真实环境。
Vben Admin 数据 mock 服务，没有对接任何的数据库，所有数据都是模拟的，用于前端开发时提供数据支持。线上环境不再提供mock集成，可自行部署服务或者对接真实数据，mock.js 等工具有一些限制，比如上传文件不行、无法模拟复杂的逻辑等，所以这里使用了真实的后端服务来实现。唯一麻烦的是本地需要同时启动后端服务和前端服务，但是这样可以更好的模拟真实环境。

## Running the app

Expand Down
3 changes: 3 additions & 0 deletions docs/src/guide/essentials/settings.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,7 @@ const defaultPreferences: Preferences = {
colorWarning: 'hsl(42 84% 61%)',
mode: 'dark',
radius: '0.5',
semiDarkHeader: false,
semiDarkMenu: true,
},
transition: {
Expand Down Expand Up @@ -452,6 +453,8 @@ interface ThemePreferences {
mode: ThemeModeType;
/** 圆角 */
radius: string;
/** 是否开启半深色header（只在theme='light'时生效） */
semiDarkHeader: boolean;
/** 是否开启半深色菜单（只在theme='light'时生效） */
semiDarkMenu: boolean;
}
Expand Down
110 changes: 86 additions & 24 deletions docs/src/guide/in-depth/theme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,16 +107,16 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
/* 基本文字大小 */
--font-size-base: 16px;

/* 主体内容背景色 */
--content: 240 11% 96%;

/* =============component & UI============= */

/* menu */
--sidebar: 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;
}
Expand Down Expand Up @@ -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;
}
Expand All @@ -228,7 +226,6 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
### 默认主题下：

```css
/* */
:root {
/* Background color for <Card /> */
--card: 0 0% 30%;
Expand All @@ -238,7 +235,6 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
### 黑暗模式下

```css
/* */
.dark,
.dark[data-theme='custom'],
.dark[data-theme='default'] {
Expand Down Expand Up @@ -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%;
Expand All @@ -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%;

/* 主题颜色 */

Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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%;

/* 主题颜色 */

Expand All @@ -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%;
Expand All @@ -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;
}

Expand All @@ -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'],
Expand All @@ -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'],
Expand All @@ -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'],
Expand All @@ -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'],
Expand All @@ -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'],
Expand All @@ -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'],
Expand All @@ -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'],
Expand All @@ -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'],
Expand All @@ -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'],
Expand All @@ -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'],
Expand All @@ -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'],
Expand All @@ -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'],
Expand All @@ -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%;
}
```

Expand Down Expand Up @@ -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`中进行配置：
Expand Down
3 changes: 3 additions & 0 deletions internal/tailwind-config/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,9 @@ const customColors = {
...createColorsPalette('green'),
foreground: 'hsl(var(--success-foreground))',
},
header: {
DEFAULT: 'hsl(var(--header))',
},
heavy: {
DEFAULT: 'hsl(var(--heavy))',
foreground: 'hsl(var(--heavy-foreground))',
Expand Down
Loading
Loading