From 63d14ddefd432a8c62018c0355829508bc710cd6 Mon Sep 17 00:00:00 2001
From: "johannes.vos" <johannes.d.vos@web.de>
Date: Tue, 19 May 2026 18:49:00 +0200
Subject: [PATCH 01/15] Change Black Varbiable to gray

---
 src/styles/variables/colors.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css
index ab7ed28..eac3638 100644
--- a/src/styles/variables/colors.css
+++ b/src/styles/variables/colors.css
@@ -89,7 +89,7 @@ limitations under the License.
         --dark-l-1:             var(--white-d-1);
         --dark:                 var(--white);
         
-        --light:                var(--black);
+        --light-bg: oklch(0.14 0 0);
         --light-d-1:            var(--black-l-1);
         --light-d-2:            var(--black-l-2);
         --light-d-3:            var(--black-l-3);
@@ -100,7 +100,7 @@ limitations under the License.
         --light-d-8:            var(--black-l-8);
         
         --dark-bg:              var(--white);
-        --light-bg:             var(--black);
+        --light-bg: oklch(0.14 0 0);
     }
 }
 
@@ -115,7 +115,7 @@ limitations under the License.
     --dark-l-1:             var(--white-d-1);
     --dark:                 var(--white);
     
-    --light:                var(--black);
+    --light-bg: oklch(0.14 0 0);
     --light-d-1:            var(--black-l-1);
     --light-d-2:            var(--black-l-2);
     --light-d-3:            var(--black-l-3);
@@ -126,5 +126,5 @@ limitations under the License.
     --light-d-8:            var(--black-l-8);
     
     --dark-bg:              var(--white);
-    --light-bg:             var(--black);
+    --light-bg: oklch(0.14 0 0);
 }
\ No newline at end of file
-- 
2.39.5


From 46a2caf845d589008142f9658b190f59611bc39d Mon Sep 17 00:00:00 2001
From: "johannes.vos" <johannes.d.vos@web.de>
Date: Tue, 19 May 2026 18:55:01 +0200
Subject: [PATCH 02/15] Make Border of Button visible / lighter in DarkMode

---
 src/features/colorScheme/components/ColorSchemeButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/colorScheme/components/ColorSchemeButton.vue b/src/features/colorScheme/components/ColorSchemeButton.vue
index ccda3c5..a039c0c 100644
--- a/src/features/colorScheme/components/ColorSchemeButton.vue
+++ b/src/features/colorScheme/components/ColorSchemeButton.vue
@@ -51,7 +51,7 @@ const colorSchemeIconMapper = {
 <style scoped>
 .color-scheme-button {
     background: none;
-    border: 1.5px solid var(--light-d-3);
+    border: 1.5px solid var(--dark-l-8);
     border-radius: 50%;
     width: 36px;
     height: 36px;
-- 
2.39.5


From b172e3cf2b2cfc6aa995588fe1be83d83ab576f9 Mon Sep 17 00:00:00 2001
From: "johannes.vos" <johannes.d.vos@web.de>
Date: Tue, 19 May 2026 18:57:18 +0200
Subject: [PATCH 03/15] Change Backgorund Color

---
 src/features/footer/components/Footer.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/features/footer/components/Footer.vue b/src/features/footer/components/Footer.vue
index 31fc5e2..bae4ada 100644
--- a/src/features/footer/components/Footer.vue
+++ b/src/features/footer/components/Footer.vue
@@ -42,5 +42,6 @@ const copyrightPeriod =
     padding: var(--padding-y);
     background-color: var(--light-d-1);
     margin-top: var(--padding-y);
+    background-color: oklch(0.17 0 0);
 }
 </style>
\ No newline at end of file
-- 
2.39.5


From 5b8c13c8cf42e51482f34363ab9e176cc5dbdc97 Mon Sep 17 00:00:00 2001
From: "johannes.vos" <johannes.d.vos@web.de>
Date: Tue, 19 May 2026 18:59:39 +0200
Subject: [PATCH 04/15] Remove Background

---
 src/features/footer/components/Footer.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/features/footer/components/Footer.vue b/src/features/footer/components/Footer.vue
index bae4ada..5ca9a04 100644
--- a/src/features/footer/components/Footer.vue
+++ b/src/features/footer/components/Footer.vue
@@ -40,8 +40,7 @@ const copyrightPeriod =
     display: flex;
     justify-content: center;
     padding: var(--padding-y);
-    background-color: var(--light-d-1);
     margin-top: var(--padding-y);
-    background-color: oklch(0.17 0 0);
+    background-color: var(--light-bg);
 }
 </style>
\ No newline at end of file
-- 
2.39.5


From d8a4c0023b62b623cda350167c216a7140887254 Mon Sep 17 00:00:00 2001
From: "johannes.vos" <johannes.d.vos@web.de>
Date: Tue, 19 May 2026 19:07:24 +0200
Subject: [PATCH 05/15] Change Colors of Footer

---
 src/features/footer/components/Footer.vue |  2 +-
 src/styles/variables/colors.css           | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/features/footer/components/Footer.vue b/src/features/footer/components/Footer.vue
index 5ca9a04..31fc5e2 100644
--- a/src/features/footer/components/Footer.vue
+++ b/src/features/footer/components/Footer.vue
@@ -40,7 +40,7 @@ const copyrightPeriod =
     display: flex;
     justify-content: center;
     padding: var(--padding-y);
+    background-color: var(--light-d-1);
     margin-top: var(--padding-y);
-    background-color: var(--light-bg);
 }
 </style>
\ No newline at end of file
diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css
index eac3638..a16defc 100644
--- a/src/styles/variables/colors.css
+++ b/src/styles/variables/colors.css
@@ -88,9 +88,9 @@ limitations under the License.
         --dark-l-2:             var(--white-d-2);
         --dark-l-1:             var(--white-d-1);
         --dark:                 var(--white);
-        
-        --light-bg: oklch(0.14 0 0);
-        --light-d-1:            var(--black-l-1);
+
+        --light:                var(--black);
+        --light-d-1:            oklch(0.24 0 0);
         --light-d-2:            var(--black-l-2);
         --light-d-3:            var(--black-l-3);
         --light-d-4:            var(--black-l-4);
@@ -98,9 +98,9 @@ limitations under the License.
         --light-d-6:            var(--black-l-6);
         --light-d-7:            var(--black-l-7);
         --light-d-8:            var(--black-l-8);
-        
+
         --dark-bg:              var(--white);
-        --light-bg: oklch(0.14 0 0);
+        --light-bg:             oklch(0.14 0 0);
     }
 }
 
@@ -114,9 +114,9 @@ limitations under the License.
     --dark-l-2:             var(--white-d-2);
     --dark-l-1:             var(--white-d-1);
     --dark:                 var(--white);
-    
-    --light-bg: oklch(0.14 0 0);
-    --light-d-1:            var(--black-l-1);
+
+    --light:                var(--black);
+    --light-d-1:            oklch(0.24 0 0);
     --light-d-2:            var(--black-l-2);
     --light-d-3:            var(--black-l-3);
     --light-d-4:            var(--black-l-4);
@@ -124,7 +124,7 @@ limitations under the License.
     --light-d-6:            var(--black-l-6);
     --light-d-7:            var(--black-l-7);
     --light-d-8:            var(--black-l-8);
-    
+
     --dark-bg:              var(--white);
-    --light-bg: oklch(0.14 0 0);
+    --light-bg:             oklch(0.14 0 0);
 }
\ No newline at end of file
-- 
2.39.5


From d5c714cbd880fdf225124142fa34257357efcaef Mon Sep 17 00:00:00 2001
From: "johannes.vos" <johannes.d.vos@web.de>
Date: Tue, 19 May 2026 19:09:51 +0200
Subject: [PATCH 06/15] Change Colors of Footer

---
 src/features/footer/components/Footer.vue | 2 +-
 src/styles/variables/colors.css           | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/features/footer/components/Footer.vue b/src/features/footer/components/Footer.vue
index 31fc5e2..5ca9a04 100644
--- a/src/features/footer/components/Footer.vue
+++ b/src/features/footer/components/Footer.vue
@@ -40,7 +40,7 @@ const copyrightPeriod =
     display: flex;
     justify-content: center;
     padding: var(--padding-y);
-    background-color: var(--light-d-1);
     margin-top: var(--padding-y);
+    background-color: var(--light-bg);
 }
 </style>
\ No newline at end of file
diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css
index a16defc..045d801 100644
--- a/src/styles/variables/colors.css
+++ b/src/styles/variables/colors.css
@@ -90,7 +90,7 @@ limitations under the License.
         --dark:                 var(--white);
 
         --light:                var(--black);
-        --light-d-1:            oklch(0.24 0 0);
+        --light-d-1:            oklch(0.10 0 0);
         --light-d-2:            var(--black-l-2);
         --light-d-3:            var(--black-l-3);
         --light-d-4:            var(--black-l-4);
@@ -100,7 +100,7 @@ limitations under the License.
         --light-d-8:            var(--black-l-8);
 
         --dark-bg:              var(--white);
-        --light-bg:             oklch(0.14 0 0);
+        --light-bg:             oklch(0.18 0 0);
     }
 }
 
@@ -116,7 +116,7 @@ limitations under the License.
     --dark:                 var(--white);
 
     --light:                var(--black);
-    --light-d-1:            oklch(0.24 0 0);
+    --light-d-1:            oklch(0.10 0 0);
     --light-d-2:            var(--black-l-2);
     --light-d-3:            var(--black-l-3);
     --light-d-4:            var(--black-l-4);
@@ -126,5 +126,5 @@ limitations under the License.
     --light-d-8:            var(--black-l-8);
 
     --dark-bg:              var(--white);
-    --light-bg:             oklch(0.14 0 0);
+    --light-bg:             oklch(0.18 0 0);
 }
\ No newline at end of file
-- 
2.39.5


From 66483a3a6af88696591d19e8914e372d99e5d83a Mon Sep 17 00:00:00 2001
From: "johannes.vos" <johannes.d.vos@web.de>
Date: Tue, 19 May 2026 19:11:27 +0200
Subject: [PATCH 07/15] Add Border

---
 src/features/footer/components/Footer.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/features/footer/components/Footer.vue b/src/features/footer/components/Footer.vue
index 5ca9a04..5213e09 100644
--- a/src/features/footer/components/Footer.vue
+++ b/src/features/footer/components/Footer.vue
@@ -42,5 +42,6 @@ const copyrightPeriod =
     padding: var(--padding-y);
     margin-top: var(--padding-y);
     background-color: var(--light-bg);
+    border-top: 1px solid var(--light-d-8);
 }
 </style>
\ No newline at end of file
-- 
2.39.5


From 6d95601399fe4ef998fed7d863ebd3fb71f3516e Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Fri, 22 May 2026 17:33:03 +0200
Subject: [PATCH 08/15] Add CSS variable for borders

---
 src/features/colorScheme/components/ColorSchemeButton.vue | 2 +-
 src/features/search/components/Searchbar.vue              | 2 +-
 src/features/search/views/SearchResultsView.vue           | 2 +-
 src/styles/variables/colors.css                           | 6 ++++++
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/features/colorScheme/components/ColorSchemeButton.vue b/src/features/colorScheme/components/ColorSchemeButton.vue
index a039c0c..fc3a47d 100644
--- a/src/features/colorScheme/components/ColorSchemeButton.vue
+++ b/src/features/colorScheme/components/ColorSchemeButton.vue
@@ -51,7 +51,7 @@ const colorSchemeIconMapper = {
 <style scoped>
 .color-scheme-button {
     background: none;
-    border: 1.5px solid var(--dark-l-8);
+    border: 1.5px solid var(--border);
     border-radius: 50%;
     width: 36px;
     height: 36px;
diff --git a/src/features/search/components/Searchbar.vue b/src/features/search/components/Searchbar.vue
index 8955b17..817945e 100644
--- a/src/features/search/components/Searchbar.vue
+++ b/src/features/search/components/Searchbar.vue
@@ -54,7 +54,7 @@ const submitSearch = function () {
     --padding-left: calc(var(--content-height) + var(--padding));
     display: flex;
     align-items: center;
-    border: 1.5px solid var(--light-d-3);
+    border: 1.5px solid var(--border);
     box-shadow: 0 0px 32px rgba(69, 98, 190, 0.25);
     border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
     padding: var(--padding);
diff --git a/src/features/search/views/SearchResultsView.vue b/src/features/search/views/SearchResultsView.vue
index 40edb9d..3611429 100644
--- a/src/features/search/views/SearchResultsView.vue
+++ b/src/features/search/views/SearchResultsView.vue
@@ -73,7 +73,7 @@ searchQueryModel.value = props.searchQuery;
     display: flex;
     justify-content: center;
     flex-direction: column;
-    outline: 1px solid var(--light-d-2);
+    outline: 1px solid var(--border);
 }
 
 @media (max-width: 48rem) {
diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css
index 045d801..ca49d6b 100644
--- a/src/styles/variables/colors.css
+++ b/src/styles/variables/colors.css
@@ -75,6 +75,8 @@ limitations under the License.
 
     --dark-bg:              var(--black-l-2);
     --light-bg:             var(--white);
+
+    --border:               var(--white-d-3);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -101,6 +103,8 @@ limitations under the License.
 
         --dark-bg:              var(--white);
         --light-bg:             oklch(0.18 0 0);
+
+        --border:               var(--black-l-6);
     }
 }
 
@@ -127,4 +131,6 @@ limitations under the License.
 
     --dark-bg:              var(--white);
     --light-bg:             oklch(0.18 0 0);
+
+    --border:               var(--black-l-6);
 }
\ No newline at end of file
-- 
2.39.5


From 3c82baca67cb7b2a21971196047bd74bed9e5a02 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Fri, 22 May 2026 17:35:22 +0200
Subject: [PATCH 09/15] Use variable for the search results view error message
 background

---
 src/features/search/views/SearchResultsView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/search/views/SearchResultsView.vue b/src/features/search/views/SearchResultsView.vue
index 3611429..42a8a3c 100644
--- a/src/features/search/views/SearchResultsView.vue
+++ b/src/features/search/views/SearchResultsView.vue
@@ -67,7 +67,7 @@ searchQueryModel.value = props.searchQuery;
     box-shadow: 0px 0px 42px #cdcdcdb3;
     border-radius: 28px;
     text-align: center;
-    background-color: #f7f7f7;
+    background-color: var(--light-bg);
     animation: fade-in 0.8s ease-out;
     height: var(--error-message-height);
     display: flex;
-- 
2.39.5


From 1f67e95735109a7a96e73da6edc45f1b0ed58e5b Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Fri, 22 May 2026 17:44:06 +0200
Subject: [PATCH 10/15] Add CSS variable for gray box shadow

---
 src/features/search/views/SearchResultsView.vue | 2 +-
 src/styles/variables/colors.css                 | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/features/search/views/SearchResultsView.vue b/src/features/search/views/SearchResultsView.vue
index 42a8a3c..a6a3171 100644
--- a/src/features/search/views/SearchResultsView.vue
+++ b/src/features/search/views/SearchResultsView.vue
@@ -64,7 +64,7 @@ searchQueryModel.value = props.searchQuery;
 .search-results-error-message {
     padding: var(--error-message-padding);
     font-size: 18px;
-    box-shadow: 0px 0px 42px #cdcdcdb3;
+    box-shadow: 0px 0px 42px var(--gray-box-shadow);
     border-radius: 28px;
     text-align: center;
     background-color: var(--light-bg);
diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css
index ca49d6b..51b81e5 100644
--- a/src/styles/variables/colors.css
+++ b/src/styles/variables/colors.css
@@ -77,6 +77,8 @@ limitations under the License.
     --light-bg:             var(--white);
 
     --border:               var(--white-d-3);
+
+    --gray-box-shadow:    oklch(0.8 0.0001 271 / 0.7);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -105,6 +107,8 @@ limitations under the License.
         --light-bg:             oklch(0.18 0 0);
 
         --border:               var(--black-l-6);
+
+        --gray-box-shadow:    oklch(0.25 0.0001 271 / 0.7);
     }
 }
 
@@ -133,4 +137,6 @@ limitations under the License.
     --light-bg:             oklch(0.18 0 0);
 
     --border:               var(--black-l-6);
+
+    --gray-box-shadow:    oklch(0.25 0.0001 271 / 0.7);
 }
\ No newline at end of file
-- 
2.39.5


From 0eccd339192ce538f9f7a41f1375cdcbe4bee1c4 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Fri, 22 May 2026 17:45:46 +0200
Subject: [PATCH 11/15] Add CSS variable for blue box shadow

---
 src/features/search/components/Searchbar.vue | 2 +-
 src/styles/variables/colors.css              | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/features/search/components/Searchbar.vue b/src/features/search/components/Searchbar.vue
index 817945e..0e52512 100644
--- a/src/features/search/components/Searchbar.vue
+++ b/src/features/search/components/Searchbar.vue
@@ -55,7 +55,7 @@ const submitSearch = function () {
     display: flex;
     align-items: center;
     border: 1.5px solid var(--border);
-    box-shadow: 0 0px 32px rgba(69, 98, 190, 0.25);
+    box-shadow: 0 0px 32px var(--blue-box-shadow);
     border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
     padding: var(--padding);
     padding-left: var(--padding-left);
diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css
index 51b81e5..3fcf1cb 100644
--- a/src/styles/variables/colors.css
+++ b/src/styles/variables/colors.css
@@ -79,6 +79,7 @@ limitations under the License.
     --border:               var(--white-d-3);
 
     --gray-box-shadow:    oklch(0.8 0.0001 271 / 0.7);
+    --blue-box-shadow:    oklch(0.52 0.15 268 / 0.25);
 }
 
 @media (prefers-color-scheme: dark) {
-- 
2.39.5


From 1c7a0c0e589c215f6dd837332ee255896175b63c Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Fri, 22 May 2026 17:46:35 +0200
Subject: [PATCH 12/15] Use the CSS variable for dark in the navbar right links

---
 src/features/nav/components/Navbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/nav/components/Navbar.vue b/src/features/nav/components/Navbar.vue
index 4b6843b..6641b95 100644
--- a/src/features/nav/components/Navbar.vue
+++ b/src/features/nav/components/Navbar.vue
@@ -50,7 +50,7 @@ import logo from '@/assets/logo.svg';
 
 .global-nav .right-links a {
     text-decoration: none;
-    color: #000;
+    color: var(--dark);
 }
 
 .global-nav .right-links a:hover{
-- 
2.39.5


From 28fcfa1f928e1f28f2dfeed1530dc44cd4d1602a Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Fri, 22 May 2026 17:50:13 +0200
Subject: [PATCH 13/15] Use --border variable in the footer

---
 src/features/footer/components/Footer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/footer/components/Footer.vue b/src/features/footer/components/Footer.vue
index 5213e09..d9ff4c4 100644
--- a/src/features/footer/components/Footer.vue
+++ b/src/features/footer/components/Footer.vue
@@ -42,6 +42,6 @@ const copyrightPeriod =
     padding: var(--padding-y);
     margin-top: var(--padding-y);
     background-color: var(--light-bg);
-    border-top: 1px solid var(--light-d-8);
+    border-top: 1px solid var(--border);
 }
 </style>
\ No newline at end of file
-- 
2.39.5


From 1300ab46a0d62541ac6063275757e98e0f600bbd Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Fri, 22 May 2026 17:51:56 +0200
Subject: [PATCH 14/15] Use the --border CSS variable in the language switch
 button component

---
 src/features/i18n/components/LanguageSwitchButton.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/i18n/components/LanguageSwitchButton.vue b/src/features/i18n/components/LanguageSwitchButton.vue
index 7e30294..da0047f 100644
--- a/src/features/i18n/components/LanguageSwitchButton.vue
+++ b/src/features/i18n/components/LanguageSwitchButton.vue
@@ -92,7 +92,7 @@ const open = function () {
     align-items: center;
     gap: 6px;
     background: none;
-    border: 1px solid var(--light-d-3);
+    border: 1px solid var(--border);
     border-radius: 6px;
     padding: 4px 10px;
     cursor: pointer;
@@ -118,7 +118,7 @@ const open = function () {
     right: 0;
     top: calc(100% + 6px);
     background-color: var(--light-bg);
-    border: 1px solid var(--light-d-3);
+    border: 1px solid var(--border);
     border-radius: 8px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
     list-style: none;
-- 
2.39.5


From c50fe25d045ecfb9b54910229432f74c121b3ab0 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Fri, 22 May 2026 21:13:05 +0200
Subject: [PATCH 15/15] Add CSS variables for light hover background

---
 src/features/colorScheme/components/ColorSchemeButton.vue | 2 +-
 src/features/i18n/components/LanguageSwitchButton.vue     | 4 ++--
 src/styles/variables/colors.css                           | 6 ++++++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/features/colorScheme/components/ColorSchemeButton.vue b/src/features/colorScheme/components/ColorSchemeButton.vue
index 127d2e7..7f4e47e 100644
--- a/src/features/colorScheme/components/ColorSchemeButton.vue
+++ b/src/features/colorScheme/components/ColorSchemeButton.vue
@@ -65,6 +65,6 @@ const getTooltipTranslation = function (colorScheme) {
 }
 
 .color-scheme-button:hover {
-    background: var(--light-d-2);
+    background: var(--light-hover);
 }
 </style>
\ No newline at end of file
diff --git a/src/features/i18n/components/LanguageSwitchButton.vue b/src/features/i18n/components/LanguageSwitchButton.vue
index da0047f..25386e2 100644
--- a/src/features/i18n/components/LanguageSwitchButton.vue
+++ b/src/features/i18n/components/LanguageSwitchButton.vue
@@ -100,7 +100,7 @@ const open = function () {
 }
 
 .language-button:hover {
-    background-color: var(--light-d-1);
+    background-color: var(--light-hover);
 }
 
 .chevron {
@@ -138,7 +138,7 @@ const open = function () {
 }
 
 .language-dropdown li:hover {
-    background-color: var(--light-d-1);
+    background-color: var(--light-hover);
 }
 
 .language-dropdown li.active {
diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css
index 3fcf1cb..e79a738 100644
--- a/src/styles/variables/colors.css
+++ b/src/styles/variables/colors.css
@@ -80,6 +80,8 @@ limitations under the License.
 
     --gray-box-shadow:    oklch(0.8 0.0001 271 / 0.7);
     --blue-box-shadow:    oklch(0.52 0.15 268 / 0.25);
+
+    --light-hover:          var(--light-d-2);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -110,6 +112,8 @@ limitations under the License.
         --border:               var(--black-l-6);
 
         --gray-box-shadow:    oklch(0.25 0.0001 271 / 0.7);
+
+        --light-hover:          var(--light-d-5);
     }
 }
 
@@ -140,4 +144,6 @@ limitations under the License.
     --border:               var(--black-l-6);
 
     --gray-box-shadow:    oklch(0.25 0.0001 271 / 0.7);
+
+    --light-hover:          var(--light-d-5);
 }
\ No newline at end of file
-- 
2.39.5