Fix Dropdown Item Style Implementation

src/app/components/dropdown/dropdown.scss

@@ -2,9 +2,10 @@
 @use "sass:color";
 @use "styles/library" as library;
 
-$default_bg: oklch(1 0 0); // #FFFFFF
 $border_color: oklch(0 0 0 / 20%);
+$border_dark_color: oklch(1 0 0 / 20%);
 $hover_bg: oklch(0.9702 0 0); // #F5F5F5
+$hover_dark_bg: oklch(0.25 0 0);
 
 $height: 40px;
 $border_radius: 8px;
@@ -19,9 +20,9 @@ $default_animation_duration: 0.2s;
   --animation-duration: calc(#{$default_animation_duration} * var(--motion-duration-multiplier));
   padding: 0; margin: 0;
 
-  background-color: $default_bg;
+  background-color: light-dark(oklch(1 0 0), oklch(0 0 0));
   border-radius: $border_radius;
-  box-shadow: 0 0 0 1px $border_color inset;
+  box-shadow: 0 0 0 1px light-dark($border_color, $border_dark_color) inset;
   cursor: pointer;
 
   max-width: 100%;
@@ -73,7 +74,7 @@ $default_animation_duration: 0.2s;
   padding: 0;
   margin: 0;
   list-style: none;
-  background-color: $default_bg;
+  background-color: light-dark(oklch(1 0 0), oklch(0 0 0));
   border-radius: $border_radius;
   z-index: 1000;
   max-height: 240px;
@@ -86,7 +87,7 @@ $default_animation_duration: 0.2s;
     position: absolute;
     top: 0; left: 0; right: 0; bottom: 0;
     border-radius: $border_radius;
-    box-shadow: 0 0 0 1px $border_color inset;
+    box-shadow: 0 0 0 1px light-dark($border_color, $border_dark_color) inset;
     pointer-events: none;
     z-index: 1001;
   }
@@ -116,11 +117,11 @@ $default_animation_duration: 0.2s;
   font-size: 16px;
 
   &:hover, &.focused {
-    background-color: $hover_bg;
+    background-color: light-dark($hover_bg, $hover_dark_bg);
   }
 
   &.selected {
-    background-color: list.nth(library.$brand_palette, 1);
+    background-color: light-dark(list.nth(library.$brand_palette, 1), list.nth(library.$brand_palette, 11));
     color: list.nth(library.$brand_palette, 5);
     font-weight: 600;
   }

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);
   }
 
@@ -67,7 +67,7 @@ $default_animation_duration: 0.2s;
   align-items: center;
   padding: 0 12px;
   height: 40px;
-  box-shadow: 0 1px 0 oklch(0 0 0 / 20%);
+  box-shadow: 0 1px 0 light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%));
 
   .header-left {
     display: flex;

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;
-
-  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

@@ -1,22 +1,22 @@
 import { Component, inject } from '@angular/core';
 import { RouterLink } from '@angular/router';
-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',
-  imports: [RouterLink, NgOptimizedImage],
+  imports: [RouterLink],
   templateUrl: './header-menu.html',
   styleUrl: './header-menu.scss',
 })
 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,7 +13,13 @@
   --motion-duration-multiplier: 0 !important;
 }
 
-html.dark-theme {
+html {
+  color-scheme: light;
+  --if-dark: initial;
+
+  &.dark-theme {
+    --if-dark: ;
+    color-scheme: dark;
     color: white;
 
     & > body {
@@ -22,6 +28,8 @@ html.dark-theme {
 
     section.feature-block {
       background-color: oklch(0 0 0 / 60%);
+      outline: 2px solid oklch(1 0 0 / 20%);
+    }
   }
 }
 
@@ -60,7 +68,7 @@ h1 {
 
 h2 {
   font-size: 24px;
-  color: oklch(0.5103 0 0); // #666
+  color: oklch(0.6830 0 0); // #999999
 }
 
 h3 {