Theme: Updating the color scheme based on user feedback

Author: dbazhenov

assets/scss/_header.scss

@@ -40,35 +40,57 @@
 .logo-img--light { display: none; }
 
 .theme-toggle {
-  background: none;
-  border: 1px solid $dark-border;
-  border-radius: 8px;
-  width: 36px;
-  height: 36px;
+  background: rgba(255, 210, 40, 0.08);
+  border: 1px solid rgba(255, 210, 40, 0.3);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: $muted;
-  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
+  color: #ffd028;
+  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
   flex-shrink: 0;
   padding: 0;
+  position: relative;
+
+  // Glow effect in dark mode — wide, soft
+  box-shadow:
+    0 0 10px rgba(255, 210, 40, 0.2),
+    0 0 40px rgba(255, 210, 40, 0.1),
+    0 0 80px rgba(255, 210, 40, 0.05);
+
+  // Radial light spill behind the button
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -40px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 210, 40, 0.07) 0%, transparent 70%);
+    pointer-events: none;
+    z-index: -1;
+  }
 
   &:hover {
-    border-color: rgba($accent, 0.4);
-    color: $accent;
-    background: $accent-glow;
+    background: rgba(255, 210, 40, 0.12);
+    border-color: rgba(255, 210, 40, 0.5);
+    box-shadow:
+      0 0 14px rgba(255, 210, 40, 0.3),
+      0 0 60px rgba(255, 210, 40, 0.15),
+      0 0 120px rgba(255, 210, 40, 0.06);
   }
-
-  .icon-moon { display: none; }
-  svg { display: flex; }
 }
 
 .header-right {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-left: auto;
+
+  @media (max-width: $break-md) {
+    gap: 1rem;
+  }
 }
 
 .site-nav {

assets/scss/_light-theme.scss

@@ -28,19 +28,21 @@
   .logo-img--dark { display: none; }
   .logo-img--light { display: block; }
 
-  // Theme toggle button
+  // Theme toggle button — unlit bulb in light mode
   .theme-toggle {
+    background: #f1f5f9;
     border-color: #dde3ed;
-    color: #64748b;
+    color: #94a3b8;
+    box-shadow: none;
+
+    &::before { display: none; }
 
     &:hover {
-      border-color: rgba(0, 200, 255, 0.5);
-      color: #0272a5;
-      background: rgba(0, 200, 255, 0.06);
+      background: #e2e8f0;
+      border-color: #cbd5e1;
+      color: #64748b;
+      box-shadow: none;
     }
-
-    .icon-sun  { display: none; }
-    .icon-moon { display: flex; }
   }
 
   // Hero

assets/scss/_variables.scss

@@ -1,9 +1,9 @@
 // Colors
 $black:        #000000;
-$dark-bg:      #0a0a0f;
-$dark-surface: #111118;
-$dark-card:    #16161f;
-$dark-border:  #1e1e2a;
+$dark-bg:      #0d0f1a;
+$dark-surface: #141629;
+$dark-card:    #1a1d30;
+$dark-border:  #252840;
 $white:        #ffffff;
 $off-white:    #e8e8f0;
 $muted:        #6b6b80;

layouts/partials/header.html

@@ -18,11 +18,10 @@
         <span></span>
       </button>
       <button class="theme-toggle" id="theme-toggle" aria-label="Toggle colour theme">
-        <svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
-        </svg>
-        <svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/>
+          <path d="M9 18h6"/>
+          <path d="M10 22h4"/>
         </svg>
       </button>
     </div>