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

perf: improve the dark theme

Browse Source
This commit is contained in:
vince
2024-07-15 23:59:22 +08:00
parent f95d9aa609
commit cf16c7bdde
12 changed files with 124 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/@core/ui-kit/menu-ui/src/components/menu.vue
View File

@@ -322,6 +322,7 @@ function removeMenuItem(item: MenuItemRegistered) {
<ul
ref="menu"
:class="[
theme,
b(),
is(mode, true),
is(theme, true),
@@ -427,7 +428,7 @@ $namespace: vben;
--menu-item-padding-x: 12px;
--menu-item-popup-padding-y: 20px;
--menu-item-popup-padding-x: 12px;
--menu-item-margin-y: 4px;
--menu-item-margin-y: 3px;
--menu-item-margin-x: 0px;
--menu-item-collapse-padding-y: 25px;
--menu-item-collapse-padding-x: 0px;
@@ -443,14 +444,14 @@ $namespace: vben;
--menu-background-color: hsl(var(--menu-dark));
// --menu-submenu-opened-background-color: hsl(var(--menu-opened-dark));
--menu-item-background-color: var(--menu-background-color);
--menu-item-color: hsl(var(--foreground-dark) / 80%);
--menu-item-color: hsl(var(--foreground) / 80%);
--menu-item-hover-color: hsl(var(--primary-foreground));
--menu-item-hover-background-color: hsl(var(--menu-dark-background));
--menu-item-active-color: hsl(var(--foreground-dark));
--menu-item-active-color: hsl(var(--foreground));
--menu-item-active-background-color: hsl(var(--menu-dark-background));
--menu-submenu-hover-color: hsl(var(--foreground-dark));
--menu-submenu-hover-color: hsl(var(--foreground));
--menu-submenu-hover-background-color: hsl(var(--menu-dark-background));
--menu-submenu-active-color: hsl(var(--foreground-dark));
--menu-submenu-active-color: hsl(var(--foreground));
--menu-submenu-active-background-color: transparent;
--menu-submenu-background-color: var(--menu-background-color);
}

3
packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
View File

@@ -38,6 +38,7 @@ function handleMouseenter(menu: MenuRecordRaw) {
<template>
<ul
:class="[
theme,
b(),
is('collapse', collapse),
is(theme, true),
@@ -77,7 +78,7 @@ $namespace: vben;
&.is-dark {
.#{$namespace}-normal-menu__item {
color: hsl(var(--foreground-dark) / 80%);
color: hsl(var(--foreground) / 80%);
&:not(.is-active):hover {
color: hsl(var(--primary-foreground));