style:Adaptation issues in dark mode

vbenjs · Oct 17, 2024 · 218dee0 · 218dee0
1 parent a0fbe0b
commit 218dee0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 21 deletions.
diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu.vue b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -371,7 +371,7 @@ $namespace: vben;
   height: var(--menu-item-height);
   padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
   margin: 0 var(--menu-item-margin-x) var(--menu-item-margin-y)
-    var(--menu-item-margin-x);
+  var(--menu-item-margin-x);
   font-size: var(--menu-font-size);
   color: var(--menu-item-color);
   text-decoration: none;
@@ -445,13 +445,13 @@ $namespace: vben;
     // --menu-submenu-opened-background-color: hsl(var(--menu-opened-dark));
     --menu-item-background-color: var(--menu-background-color);
     --menu-item-color: hsl(var(--foreground) / 80%);
-    --menu-item-hover-color: hsl(var(--accent-foreground));
+    --menu-item-hover-color: hsl(var(--primary));
     --menu-item-hover-background-color: hsl(var(--accent));
-    --menu-item-active-color: hsl(var(--accent-foreground));
-    --menu-item-active-background-color: hsl(var(--accent));
-    --menu-submenu-hover-color: hsl(var(--foreground));
+    --menu-item-active-color: hsl(var(--primary));
+    --menu-item-active-background-color: hsl(var(--primary) / 15%);
+    --menu-submenu-hover-color: hsl(var(--primary));
     --menu-submenu-hover-background-color: hsl(var(--accent));
-    --menu-submenu-active-color: hsl(var(--foreground));
+    --menu-submenu-active-color: hsl(var(--primary));
     --menu-submenu-active-background-color: transparent;
     --menu-submenu-background-color: var(--menu-background-color);
   }
@@ -461,7 +461,7 @@ $namespace: vben;
     // --menu-submenu-opened-background-color: hsl(var(--menu-opened));
     --menu-item-background-color: var(--menu-background-color);
     --menu-item-color: hsl(var(--foreground));
-    --menu-item-hover-color: var(--menu-item-color);
+    --menu-item-hover-color: hsl(var(--primary));
     --menu-item-hover-background-color: hsl(var(--accent));
     --menu-item-active-color: hsl(var(--primary));
     --menu-item-active-background-color: hsl(var(--primary) / 15%);
@@ -498,13 +498,13 @@ $namespace: vben;
     --menu-background-color: transparent;
 
     &.is-dark {
-      --menu-item-hover-color: hsl(var(--accent-foreground));
+      --menu-item-hover-color: hsl(var(--primary));
       --menu-item-hover-background-color: hsl(var(--accent));
-      --menu-item-active-color: hsl(var(--accent-foreground));
-      --menu-item-active-background-color: hsl(var(--accent));
-      --menu-submenu-active-color: hsl(var(--foreground));
-      --menu-submenu-active-background-color: hsl(var(--accent));
-      --menu-submenu-hover-color: hsl(var(--accent-foreground));
+      --menu-item-active-color: hsl(var(--primary));
+      --menu-item-active-background-color: hsl(var(--primary) / 15%);
+      --menu-submenu-active-color: hsl(var(--primary));
+      --menu-submenu-active-background-color: hsl(var(--primary) / 15%);
+      --menu-submenu-hover-color: hsl(var(--primary));
       --menu-submenu-hover-background-color: hsl(var(--accent));
     }
 
@@ -546,7 +546,7 @@ $namespace: vben;
           & > .#{$namespace}-menu-item {
             padding-left: calc(
               0px + var(--menu-item-indent) + var(--menu-level) *
-                var(--menu-item-indent)
+              var(--menu-item-indent)
             );
           }
         }
@@ -643,9 +643,9 @@ $namespace: vben;
       align-items: center;
       justify-content: center;
       padding: var(--menu-item-collapse-padding-y)
-        var(--menu-item-collapse-padding-x);
+      var(--menu-item-collapse-padding-x);
       margin: var(--menu-item-collapse-margin-y)
-        var(--menu-item-collapse-margin-x);
+      var(--menu-item-collapse-margin-x);
       transition: all 0.3s;
 
       &.is-active {

diff --git a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
@@ -80,13 +80,13 @@ $namespace: vben;
       // color: hsl(var(--foreground) / 80%);
 
       &:not(.is-active):hover {
-        @apply text-foreground;
+        @apply text-primary;
       }
 
       &.is-active {
         .#{$namespace}-normal-menu__name,
         .#{$namespace}-normal-menu__icon {
-          @apply text-foreground;
+          @apply text-primary;
         }
       }
     }

diff --git a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue b/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@@ -93,10 +93,10 @@ const tabsView = computed((): TabConfig[] => {
               class="tabs-chrome__background absolute z-[-1] size-full px-[calc(var(--gap)-1px)] py-0 transition-opacity duration-150"
             >
               <div
-                class="tabs-chrome__background-content group-[.is-active]:bg-primary/15 dark:group-[.is-active]:bg-accent h-full rounded-tl-[var(--gap)] rounded-tr-[var(--gap)] duration-150"
+                class="tabs-chrome__background-content group-[.is-active]:bg-primary/15 dark:group-[.is-active]:bg-primary/15 h-full rounded-tl-[var(--gap)] rounded-tr-[var(--gap)] duration-150"
               ></div>
               <svg
-                class="tabs-chrome__background-before group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent absolute bottom-0 left-[-1px] fill-transparent transition-all duration-150"
+                class="tabs-chrome__background-before group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-primary/15 absolute bottom-0 left-[-1px] fill-transparent transition-all duration-150"
                 height="7"
                 width="7"
               >
@@ -130,7 +130,7 @@ const tabsView = computed((): TabConfig[] => {
 
             <!-- tab-item-main -->
             <div
-              class="tabs-chrome__item-main group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground text-accent-foreground z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pl-2 pr-4 duration-150"
+              class="tabs-chrome__item-main group-[.is-active]:text-primary dark:group-[.is-active]:text-primary text-accent-foreground z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pl-2 pr-4 duration-150"
             >
               <VbenIcon
                 v-if="showIcon"