diff --git a/src/app/components/dropdown/dropdown.scss b/src/app/components/dropdown/dropdown.scss index 0a5c92f..355f8d6 100644 --- a/src/app/components/dropdown/dropdown.scss +++ b/src/app/components/dropdown/dropdown.scss @@ -2,8 +2,8 @@ @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 $height: 40px; @@ -19,9 +19,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 +73,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 +86,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; } diff --git a/src/app/components/popup/popup.scss b/src/app/components/popup/popup.scss index 0b25635..40e9135 100644 --- a/src/app/components/popup/popup.scss +++ b/src/app/components/popup/popup.scss @@ -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; diff --git a/src/styles.scss b/src/styles.scss index e2ce281..eb54a0f 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -68,7 +68,7 @@ h1 { h2 { font-size: 24px; - color: oklch(0.5103 0 0); // #666 + color: oklch(0.6830 0 0); // #999999 } h3 {