tsai
/
vue-vben-admin
mirror of https://github.com/vbenjs/vue-vben-admin
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix(project): fix sub sidebar theme in two-column menu (#7708) 

- Reset light tokens for nested sub sidebars.
- Align the extra title logo theme with sidebarThemeSub.
main
MistyMoon 2 days ago
committed by GitHub
parent
2a5b520ec9
commit
3528517fe0
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
2 changed files with 109 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 108
      packages/@core/base/design/src/design-tokens/default.css
  2. 2
      packages/effects/layouts/src/basic/layout.vue

108
packages/@core/base/design/src/design-tokens/default.css
View File

@ -109,6 +109,90 @@
color-scheme: light; color-scheme: light;
} }
.light,
.light[data-theme='custom'],
.light[data-theme='default'] {
/* Default background color of <body />...etc */
--background: 0 0% 100%;
/* 主体区域背景色 */
--background-deep: 216 20.11% 95.47%;
--foreground: 210 6% 21%;
/* Background color for <Card /> */
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
/* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
/* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
/* 主题颜色 */
--primary-foreground: 0 0% 98%;
/* Used for destructive actions such as <Button variant="destructive"> */
--destructive-foreground: 0 0% 98%;
/* Used for success actions such as <message> */
--info-foreground: 220, 4%, 58%;
--success-foreground: 0 0% 98%;
/* Used for warning actions such as <message> */
--warning-foreground: 0 0% 98%;
/* Secondary colors for <Button /> */
--secondary: 240 5% 96%;
--secondary-foreground: 240 6% 10%;
/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
--accent: 240 5% 96%;
--accent-dark: 216 14% 93%;
--accent-darker: 216 11% 91%;
--accent-lighter: 240 0% 98%;
--accent-hover: 200deg 10% 90%;
--accent-foreground: 240 6% 10%;
/* Darker color */
--heavy: 192deg 9.43% 89.61%;
--heavy-foreground: var(--accent-foreground);
/* Default border color */
--border: 240 5.9% 90%;
/* Border color for inputs such as <Input />, <Select />, <Textarea /> */
--input: 240deg 5.88% 90%;
--input-placeholder: 217 10.6% 65%;
--input-background: 0 0% 100%;
/* Used for focus ring */
--ring: 222.2 84% 4.9%;
/* ============= custom ============= */
/* 遮罩颜色 */
--overlay: 0 0% 0% / 45%;
--overlay-content: 0 0% 95% / 45%;
/* =============component & UI============= */
/* menu */
--sidebar: 0 0% 100%;
--sidebar-deep: 0 0% 100%;
--menu: var(--sidebar);
/* header */
--header: 0 0% 100%;
accent-color: var(--primary);
color-scheme: light;
}
.light[data-theme='violet'],
[data-theme='violet'] .light,
[data-theme='violet'] { [data-theme='violet'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 224 71.4% 4.1%; --foreground: 224 71.4% 4.1%;
@ -130,6 +214,8 @@
--ring: 262.1 83.3% 57.8%; --ring: 262.1 83.3% 57.8%;
} }
.light[data-theme='pink'],
[data-theme='pink'] .light,
[data-theme='pink'] { [data-theme='pink'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
@ -151,6 +237,8 @@
--ring: 346.8 77.2% 49.8%; --ring: 346.8 77.2% 49.8%;
} }
.light[data-theme='rose'],
[data-theme='rose'] .light,
[data-theme='rose'] { [data-theme='rose'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
@ -172,6 +260,8 @@
--ring: 346.8 77.2% 49.8%; --ring: 346.8 77.2% 49.8%;
} }
.light[data-theme='sky-blue'],
[data-theme='sky-blue'] .light,
[data-theme='sky-blue'] { [data-theme='sky-blue'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 222.2 84% 4.9%; --foreground: 222.2 84% 4.9%;
@ -193,6 +283,8 @@
--ring: 221.2 83.2% 53.3%; --ring: 221.2 83.2% 53.3%;
} }
.light[data-theme='deep-blue'],
[data-theme='deep-blue'] .light,
[data-theme='deep-blue'] { [data-theme='deep-blue'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 222.2 84% 4.9%; --foreground: 222.2 84% 4.9%;
@ -214,6 +306,8 @@
--ring: 221.2 83.2% 53.3%; --ring: 221.2 83.2% 53.3%;
} }
.light[data-theme='green'],
[data-theme='green'] .light,
[data-theme='green'] { [data-theme='green'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
@ -235,6 +329,8 @@
--ring: 142.1 76.2% 36.3%; --ring: 142.1 76.2% 36.3%;
} }
.light[data-theme='deep-green'],
[data-theme='deep-green'] .light,
[data-theme='deep-green'] { [data-theme='deep-green'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
@ -256,6 +352,8 @@
--ring: 142.1 76.2% 36.3%; --ring: 142.1 76.2% 36.3%;
} }
.light[data-theme='orange'],
[data-theme='orange'] .light,
[data-theme='orange'] { [data-theme='orange'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 20 14.3% 4.1%; --foreground: 20 14.3% 4.1%;
@ -277,6 +375,8 @@
--ring: 24.6 95% 53.1%; --ring: 24.6 95% 53.1%;
} }
.light[data-theme='yellow'],
[data-theme='yellow'] .light,
[data-theme='yellow'] { [data-theme='yellow'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 20 14.3% 4.1%; --foreground: 20 14.3% 4.1%;
@ -298,6 +398,8 @@
--ring: 20 14.3% 4.1%; --ring: 20 14.3% 4.1%;
} }
.light[data-theme='zinc'],
[data-theme='zinc'] .light,
[data-theme='zinc'] { [data-theme='zinc'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
@ -319,6 +421,8 @@
--ring: 240 5.9% 10%; --ring: 240 5.9% 10%;
} }
.light[data-theme='neutral'],
[data-theme='neutral'] .light,
[data-theme='neutral'] { [data-theme='neutral'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 0 0% 3.9%; --foreground: 0 0% 3.9%;
@ -340,6 +444,8 @@
--ring: 0 0% 3.9%; --ring: 0 0% 3.9%;
} }
.light[data-theme='slate'],
[data-theme='slate'] .light,
[data-theme='slate'] { [data-theme='slate'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 222.2 84% 4.9%; --foreground: 222.2 84% 4.9%;
@ -361,6 +467,8 @@
--ring: 222.2 84% 4.9%; --ring: 222.2 84% 4.9%;
} }
.light[data-theme='gray'],
[data-theme='gray'] .light,
[data-theme='gray'] { [data-theme='gray'] {
/* --background: 0 0% 100%; */ /* --background: 0 0% 100%; */
--foreground: 224 71.4% 4.1%; --foreground: 224 71.4% 4.1%;

2
packages/effects/layouts/src/basic/layout.vue
View File

@ -373,7 +373,7 @@ const headerSlots = computed(() => {
v-if="preferences.logo.enable" v-if="preferences.logo.enable"
:fit="preferences.logo.fit" :fit="preferences.logo.fit"
:text="preferences.app.name" :text="preferences.app.name"
:theme="theme" :theme="sidebarThemeSub"
> >
<template v-if="$slots['logo-text']" #text> <template v-if="$slots['logo-text']" #text>
<slot name="logo-text"></slot> <slot name="logo-text"></slot>

Write Preview
Loading…
Cancel
Save