Fix Popup Implementation

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

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;