style: color modified

src/components/custom/button/IconButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="flex justify-center items-center outline-none border-none p-0 bg-white text-neutral-950 dark-theme:bg-neutral-700 dark-theme:text-white w-8 h-8 rounded-lg cursor-pointer"
+    class="flex justify-center items-center outline-none border-none p-0 bg-white text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white w-8 h-8 rounded-lg cursor-pointer"
     role="button"
     @click="onClick"
   >

src/components/custom/widget/layout/BaseWidgetLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="base-widget-layout rounded-2xl overflow-hidden relative bg-zinc-100 dark-theme:bg-neutral-900"
+    class="base-widget-layout rounded-2xl overflow-hidden relative bg-zinc-100 dark-theme:bg-zinc-800"
   >
     <IconButton
       v-show="!isRightPanelOpen && hasRightPanel"
@@ -33,19 +33,19 @@
       </Transition>
 
       <div class="flex-1 flex bg-zinc-100 dark-theme:bg-neutral-900">
-        <div class="flex-1 flex flex-col">
+        <div class="w-full h-full flex flex-col">
           <header
             v-if="$slots.header"
             class="w-full h-16 px-6 py-4 flex justify-between gap-2"
           >
-            <div>
+            <div class="flex-1 flex gap-2 flex-shrink-0">
               <IconButton v-if="!notMobile" @click="toggleLeftPanel">
                 <i-lucide:panel-left v-if="!showLeftPanel" class="text-sm" />
                 <i-lucide:panel-left-close v-else class="text-sm" />
               </IconButton>
               <slot name="header"></slot>
             </div>
-            <div class="flex gap-2">
+            <div class="flex justify-end gap-2 min-w-20">
               <slot name="header-right-area"></slot>
               <IconButton
                 v-if="isRightPanelOpen && hasRightPanel"
@@ -99,14 +99,16 @@ const mobileMenuOpen = ref<boolean>(false)
 const hasRightPanel = computed(() => !!slots.rightPanel)
 
 watch(notMobile, (isDesktop) => {
-  if (!isDesktop) mobileMenuOpen.value = false
+  if (!isDesktop) {
+    mobileMenuOpen.value = false
+  }
 })
 
 const showLeftPanel = computed(() => {
-  if (notMobile.value) {
-    return isLeftPanelOpen.value
-  }
-  return mobileMenuOpen.value
+  const shouldShow = notMobile.value
+    ? isLeftPanelOpen.value
+    : mobileMenuOpen.value
+  return shouldShow
 })
 
 const toggleLeftPanel = () => {

src/components/custom/widget/nav/NavItem.vue

@@ -3,8 +3,8 @@
     class="flex items-center gap-2 px-4 py-2 text-xs rounded-md transition-colors cursor-pointer"
     :class="
       active
-        ? 'bg-neutral-100 dark-theme:bg-neutral-600 text-neutral'
-        : 'text-neutral hover:bg-zinc-100 hover:dark-theme:bg-neutral-700'
+        ? 'bg-neutral-100 dark-theme:bg-zinc-700 text-neutral'
+        : 'text-neutral hover:bg-zinc-100 hover:dark-theme:bg-zinc-700/50'
     "
     role="button"
     @click="onClick"

src/components/custom/widget/panel/LeftSidePanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-full w-full bg-white dark-theme:bg-neutral-800">
+  <div class="flex flex-col h-full w-full bg-white dark-theme:bg-zinc-800">
     <PanelHeader>
       <template #icon>
         <slot name="header-icon"></slot>

src/components/custom/widget/panel/RightSidePanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full pl-4 pr-6 pb-8 bg-white dark-theme:bg-neutral-800">
+  <div class="w-full h-full pl-4 pr-6 pb-8 bg-white dark-theme:bg-zinc-800">
     <slot></slot>
   </div>
 </template>

tailwind.config.js

@@ -85,8 +85,8 @@ export default {
           400: '#a1a1aa',
           500: '#71717a',
           600: '#52525b',
-          700: '#3f3f46',
-          800: '#27272a',
+          700: '#38393b',
+          800: '#262729',
           900: '#18181b',
           950: '#09090b'
         },