ADOFAIEditorForum/ComponentTest
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Dark Theme Application Architecture

Browse Source
This commit is contained in:
copecone committed 2026-04-07 11:58:12 +09:00
1 parent 1f5453f755
commit 44b7d6097e
6 files changed
+29 -28
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/components/popup/popup.scss
+2 -2
View File
@@ -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
+7 -15
View File
@@ -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(