From 2c309693e25dde664e9adfe77f90b755ddafb061 Mon Sep 17 00:00:00 2001
From: Benny Guo <bennyxguo6@gmail.com>
Date: Sun, 17 Sep 2023 00:56:10 +0800
Subject: [PATCH] fix: improve light mode header background color

---
 src/App.vue                     | 18 +++++++++++++-----
 src/styles/theme-variables.scss |  2 ++
 tailwind.config.js              |  3 ++-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f3b5bbd3..176b8d12 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,7 @@
       tabindex="-1"
       :style="cssVariables"
     >
-      <div class="app-banner bg-[#1a1a1a]" />
+      <div class="app-banner bg-ob-screen" />
       <div class="app-banner app-banner-image" :style="headerImage" />
       <div class="app-banner app-banner-screen" :style="headerBaseBackground" />
       <div class="app-banner app-banner-cover" />
@@ -302,9 +302,17 @@ body {
   background: var(--banner-cover);
 }
 
-.theme-light .app-banner-cover {
-  top: 300px;
-  height: 300px;
+.theme-light {
+  .app-banner-cover {
+    top: 300px;
+    height: 300px;
+  }
+
+  .app-banner-screen {
+    @apply blur-0 rounded-none;
+    width: 100%;
+    height: 600px;
+  }
 }
 
 .app-banner-image {
@@ -320,7 +328,7 @@ body {
   @apply blur-[72px] rounded;
   left: 50%;
   transform: translateX(-50%);
-  transition: ease-in-out opacity 500ms;
+  transition: ease-in-out all 500ms;
   z-index: 2;
   opacity: 0.91;
   width: 85%;
diff --git a/src/styles/theme-variables.scss b/src/styles/theme-variables.scss
index 78437651..cbaf5b65 100644
--- a/src/styles/theme-variables.scss
+++ b/src/styles/theme-variables.scss
@@ -116,6 +116,7 @@
         hsla(225, 40%, 96%, 0.951) 84.5%,
         hsla(225, 40%, 96%, 0.987) 91.9%,
         var(--background-primary));
+  --app-screen-bg: #1a1a1a;
   --trans-ease: all 250ms ease;
   --accent-shadow: 0 20px 25px -5px rgba(232, 57, 255, 0.06),
     0 10px 10px -5px rgba(53, 11, 59, 0.1);
@@ -235,6 +236,7 @@
         hsla(0, 0%, 10%, 0.951) 84.5%,
         hsla(00, 0%, 10%, 0.987) 91.9%,
         var(--background-primary));
+  --app-screen-bg: var(--background-primary);
   --trans-ease: all 250ms ease;
   --accent-shadow: 0 20px 25px -5px rgba(11, 42, 59, 0.35),
     0 10px 10px -5px rgba(11, 42, 59, 0.14);
diff --git a/tailwind.config.js b/tailwind.config.js
index e0a72771..ecd7b384 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -21,7 +21,8 @@ export default {
         'ob-deep': {
           800: 'var(--background-secondary)',
           900: 'var(--background-primary)'
-        }
+        },
+        'ob-screen': 'var(--app-screen-bg)'
       },
       boxShadow: {
         ob: 'var(--accent-shadow)'