From 44b7d6097e70ebc774d2565ab390a2eab45b287b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=BB=A8=ED=8A=B8=EB=A1=A4DELTA?= Date: Tue, 7 Apr 2026 11:58:12 +0900 Subject: [PATCH] Fix Dark Theme Application Architecture --- src/app/components/popup/popup.scss | 4 ++-- src/app/components/switch/switch.scss | 22 ++++++------------- src/app/features/header-menu/header-menu.html | 2 +- src/app/features/header-menu/header-menu.scss | 4 ++-- src/app/features/header-menu/header-menu.ts | 3 ++- src/styles.scss | 22 +++++++++++++------ 6 files changed, 29 insertions(+), 28 deletions(-) diff --git a/src/app/components/popup/popup.scss b/src/app/components/popup/popup.scss index 11ca8f9..0b25635 100644 --- a/src/app/components/popup/popup.scss +++ b/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); } diff --git a/src/app/components/switch/switch.scss b/src/app/components/switch/switch.scss index f47b102..2b06488 100644 --- a/src/app/components/switch/switch.scss +++ b/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; - box-shadow: 0 0 0 1px $border_color inset; + background-color: light-dark($off_bg, $off_dark_bg); + 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; - } + 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); - - html.dark-theme & { - background-color: list.nth(library.$brand_palette, 9); - box-shadow: 0 0 0 1px list.nth(library.$brand_palette, 10) inset; - } + 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); .switch-knob { transform: translate( diff --git a/src/app/features/header-menu/header-menu.html b/src/app/features/header-menu/header-menu.html index 2304f6d..bdf1a23 100644 --- a/src/app/features/header-menu/header-menu.html +++ b/src/app/features/header-menu/header-menu.html @@ -1,6 +1,6 @@
- logo + logo ADOFAI Editor Forum diff --git a/src/app/features/header-menu/header-menu.scss b/src/app/features/header-menu/header-menu.scss index 4780840..d2aaf88 100644 --- a/src/app/features/header-menu/header-menu.scss +++ b/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%); - background-color: oklch(1 0 0 / 60%); + box-shadow: 0 2px 0 light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%)); + background-color: light-dark(oklch(1 0 0 / 60%), oklch(0 0 0 / 60%)); backdrop-filter: blur(20px); diff --git a/src/app/features/header-menu/header-menu.ts b/src/app/features/header-menu/header-menu.ts index d8e88e4..74dca1a 100644 --- a/src/app/features/header-menu/header-menu.ts +++ b/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' } }); } } diff --git a/src/styles.scss b/src/styles.scss index ffd27e5..e2ce281 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -13,15 +13,23 @@ --motion-duration-multiplier: 0 !important; } -html.dark-theme { - color: white; +html { + color-scheme: light; + --if-dark: initial; - & > body { - background-color: oklch(0.1776 0 0); - } + &.dark-theme { + --if-dark: ; + color-scheme: dark; + color: white; - section.feature-block { - background-color: oklch(0 0 0 / 60%); + & > body { + 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%); + } } }