Make styling on select button behave correctly

ts/components/SelectButton.svelte

@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import type { Readable } from "svelte/store";
     import { onMount, createEventDispatcher, getContext } from "svelte";
-    import { disabledKey } from "./contextKeys";
+    import { disabledKey, nightModeKey } from "./contextKeys";
 
     export let id: string | undefined = undefined;
     let className = "";
@@ -15,16 +15,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let disables = true;
 
+    const nightMode = getContext<boolean>(nightModeKey);
+    const disabled = getContext<Readable<boolean>>(disabledKey);
+    $: _disabled = disables && $disabled;
+
     let buttonRef: HTMLSelectElement;
 
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
-
-    const disabled = getContext<Readable<boolean>>(disabledKey);
-    $: _disabled = disables && $disabled;
 </script>
 
 <style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
     select {
         display: inline-block;
         vertical-align: middle;
@@ -37,14 +40,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         box-shadow: none;
         border-radius: 0;
 
-        &:hover {
-            background-color: #eee;
-        }
-
         &:focus {
             outline: none;
         }
     }
+
+    @include button.btn-day($with-hover: false);
+    @include button.btn-night($with-hover: false);
 </style>
 
 <!-- svelte-ignore a11y-no-onchange -->
@@ -54,7 +56,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     bind:this={buttonRef}
     disabled={_disabled}
     {id}
-    class={` ${className}`}
+    class={className}
+    class:btn-day={!nightMode}
+    class:btn-night={nightMode}
     title={tooltip}
     on:change>
     <slot />

ts/sass/bootstrap-dark.scss

@@ -5,29 +5,6 @@
 @use 'fusion_vars';
 
 @mixin night-mode {
-    input,
-    select {
-        background-color: var(--frame-bg);
-        border-color: var(--border);
-
-        &:focus {
-            background-color: var(--window-bg);
-        }
-    }
-
-    .dropdown-menu {
-        background-color: var(--frame-bg);
-
-        .dropdown-item {
-            color: var(--text-fg);
-
-            &:hover,
-            &:active {
-                background-color: var(--window-bg);
-            }
-        }
-    }
-
     .modal-content {
         background-color: var(--window-bg);
         color: var(--text-fg);

ts/sass/button_mixins.scss

@@ -17,15 +17,18 @@ $btn-base-color-day: white;
     border-color: var(--medium-border) !important;
 }
 
-@mixin btn-day($with-disabled: true, $with-margin: true) {
+@mixin btn-day($with-hover: true, $with-active: true, $with-disabled: true, $with-margin: true) {
     .btn-day {
         @include btn-day-base;
         @content ($btn-base-color-day);
 
+        @if ($with-hover) {
             &:hover {
                 background-color: darken($btn-base-color-day, 8%);
             }
+        }
 
+        @if ($with-active) {
             &:active,
             &.active {
                 @include impressed-shadow(0.25);
@@ -34,6 +37,7 @@ $btn-base-color-day: white;
             &:active.active {
                 box-shadow: none;
             }
+        }
 
         @if ($with-disabled) {
             &[disabled] {
@@ -56,16 +60,20 @@ $btn-base-color-night: #666;
     border-color: $btn-base-color-night;
 }
 
-@mixin btn-night($with-disabled: true, $with-margin: true) {
+@mixin btn-night($with-hover: true, $with-active: true, $with-disabled: true, $with-margin: true) {
+
     .btn-night {
         @include btn-night-base;
         @content ($btn-base-color-night);
 
+        @if ($with-hover) {
             &:hover {
                 background-color: lighten($btn-base-color-night, 8%);
                 border-color: lighten($btn-base-color-night, 8%);
             }
+        }
 
+        @if ($with-disabled) {
             &:active,
             &.active {
                 @include impressed-shadow(0.35);
@@ -76,6 +84,7 @@ $btn-base-color-night: #666;
                 box-shadow: none;
                 border-color: $btn-base-color-night;
             }
+        }
 
         @if ($with-disabled) {
             &[disabled] {