Fix Dark Theme Application Architecture

src/app/components/popup/popup.scss

@@ -30,11 +30,11 @@ $default_animation_duration: 0.2s;
   overflow: visible;
   animation: popup-enter var(--animation-duration) $animation_timing;
 
-  outline: oklch(0 0 0 / 20%) 2px solid;
+  outline: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%)) 2px solid;
   gap: 16px;
 
   &.variant-glass {
-    background-color: oklch(1 0 0 / 60%);
+    background-color: light-dark(oklch(1 0 0 / 60%), oklch(0 0 0 / 60%));
     backdrop-filter: blur(20px);
   }
 

src/app/components/switch/switch.scss

@@ -8,8 +8,10 @@ $off_dark_bg: oklch(0 0 0);
 $dimension: (57px, 30px);
 $knob_dimension: (24px, 24px);
 $internal_padding: (3px, 3px);
+
 $border_radius: 15px;
 $border_color: oklch(0 0 0 / 20%);
+$border_dark_color: oklch(1 0 0 / 40%);
 
 $animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
 $default_animation_duration: 0.2s;
@@ -19,17 +21,11 @@ $default_animation_duration: 0.2s;
   width: list.nth($dimension, 1); height: list.nth($dimension, 2);
   border-radius: $border_radius;
 
-  background-color: $off_bg;
+  background-color: light-dark($off_bg, $off_dark_bg);
-  box-shadow: 0 0 0 1px $border_color inset;
+  box-shadow: 0 0 0 1px light-dark($border_color, $border_dark_color) inset;
 
   --animation-duration: calc(#{$default_animation_duration} * var(--motion-duration-multiplier));
-  transition: background-color var(--animation-duration) $animation_timing;
+  transition: background-color var(--animation-duration) $animation_timing, box-shadow var(--animation-duration) $animation_timing;
-
-  html.dark-theme & {
-    background-color: $off_dark_bg;
-    box-shadow: 0 0 0 1px oklch(1 0 0 / 40%) inset;
-    transition: background-color var(--animation-duration) $animation_timing, box-shadow var(--animation-duration) $animation_timing;
-  }
 
   cursor: pointer;
   position: relative;
@@ -42,12 +38,8 @@ $default_animation_duration: 0.2s;
   }
 
   &.active {
-    background-color: list.nth(library.$brand_palette, 5);
+    background-color: light-dark(list.nth(library.$brand_palette, 5), list.nth(library.$brand_palette, 9));
-
+    box-shadow: var(--if-dark, 0 0 0 1px list.nth(library.$brand_palette, 10) inset);
-    html.dark-theme & {
-      background-color: list.nth(library.$brand_palette, 9);
-      box-shadow: 0 0 0 1px list.nth(library.$brand_palette, 10) inset;
-    }
 
     .switch-knob {
       transform: translate(

src/app/features/header-menu/header-menu.html

@@ -1,6 +1,6 @@
 <div class="menu-left">
   <a class="brand" [routerLink]="['/']">
-    <img ngSrc="/logo_inverted.svg" alt="logo" height="20" width="59.52" />
+    <img [src]="settings.darkMode() ? '/logo.svg' : '/logo_inverted.svg'" alt="logo" height="20" width="59.52" />
     <span><strong>ADOFAI Editor Forum</strong></span>
   </a>
 

src/app/features/header-menu/header-menu.scss

@@ -11,8 +11,8 @@
   min-width: 100%;
 
   box-sizing: border-box;
-  box-shadow: 0 2px 0 oklch(0 0 0 / 20%);
+  box-shadow: 0 2px 0 light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%));
-  background-color: oklch(1 0 0 / 60%);
+  background-color: light-dark(oklch(1 0 0 / 60%), oklch(0 0 0 / 60%));
 
   backdrop-filter: blur(20px);
 

src/app/features/header-menu/header-menu.ts

@@ -4,6 +4,7 @@ import { NgOptimizedImage } from '@angular/common';
 import { PopupService } from '../../services/popup.service';
 import { SettingsPopup } from '../settings/settings';
 import { TranslationService } from '../../services/translation.service';
+import { SettingsService } from '../../services/settings.service';
 
 @Component({
   selector: 'header-menu',
@@ -14,9 +15,9 @@ import { TranslationService } from '../../services/translation.service';
 export class HeaderMenu {
   private popupService = inject(PopupService);
   protected translation = inject(TranslationService).translation;
+  protected settings = inject(SettingsService);
 
   onSettingsClick() {
-    console.log('HeaderMenu: Settings clicked');
     this.popupService.open(SettingsPopup, { position: { top: '84px', right: '20px' } });
   }
 }

src/styles.scss

@@ -13,15 +13,23 @@
   --motion-duration-multiplier: 0 !important;
 }
 
-html.dark-theme {
+html {
-  color: white;
+  color-scheme: light;
+  --if-dark: initial;
 
-  & > body {
+  &.dark-theme {
-    background-color: oklch(0.1776 0 0);
+    --if-dark: ;
-  }
+    color-scheme: dark;
+    color: white;
 
-  section.feature-block {
+    & > body {
-    background-color: oklch(0 0 0 / 60%);
+      background-color: oklch(0.1776 0 0);
+    }
+
+    section.feature-block {
+      background-color: oklch(0 0 0 / 60%);
+      outline: 2px solid oklch(1 0 0 / 20%);
+    }
   }
 }