refactor: color

src/components/DrawerComponent.vue

@@ -105,7 +105,11 @@ function branchSetting() {}
         @click="$router.push('/')"
         id="btn-drawer-home"
       >
-        <q-img src="/logo.png" style="width: 80%; height: 70%" />
+        <q-img
+          src="/logo.png"
+          style="width: 80%; height: 70%"
+          :style="{ filter: `brightness(${$q.dark.isActive ? '1.3' : '1'})` }"
+        />
       </div>
 
       <div id="drawer-menu" class="q-pr-sm q-pl-md">
@@ -185,7 +189,7 @@ function branchSetting() {}
 }
 
 :deep(.q-drawer) {
-  background-color: var(--surface-3);
+  background-color: var(--surface-0);
   padding: var(--size-4);
   padding-right: 0;
 }

src/components/StatCardComponent.vue

@@ -92,6 +92,6 @@ const props = withDefaults(
 }
 
 .dark .stat-card__orange {
-  --_color: var(--orange-8);
+  --_color: var(--orange-6-hsl);
 }
 </style>

src/css/app.scss

@@ -11,7 +11,7 @@ html {
   --brand-2: #f50000;
   --border-color: var(--gray-3);
   --foreground: black;
-  --background: var(--gray-1);
+  --background: var(--gray-2);
   --surface-0: var(--background);
   --surface-1: white;
   --surface-2: var(--gray-0);
@@ -50,7 +50,7 @@ html {
   --brand-2: #f50000;
   --border-color: var(--gray-7);
   --foreground: white;
-  --background: var(--gray-10);
+  --background: var(--gray-11);
   --surface-0: var(--background);
   --surface-1: var(--gray-10);
   --surface-2: var(--gray-9);