Add theming support for DropdownItem and DropdownMenu

ts/editor-toolbar/ButtonGroup.svelte

@@ -24,16 +24,16 @@
         display: inline-block;
         margin-bottom: calc(var(--toolbar-size) / 15);
 
-        & > :global(button),
+        > :global(button),
-        & > :global(select) {
+        > :global(select) {
             border-radius: 0;
         }
 
         &:nth-child(1) {
             margin-left: calc(var(--toolbar-size) / 7.5);
 
-            & > :global(button),
+            > :global(button),
-            & > :global(select) {
+            > :global(select) {
                 /* default 0.25rem */
                 border-top-left-radius: calc(var(--toolbar-size) / 7.5);
                 border-bottom-left-radius: calc(var(--toolbar-size) / 7.5);
@@ -43,8 +43,8 @@
         &:nth-last-child(1) {
             margin-right: calc(var(--toolbar-size) / 7.5);
 
-            & > :global(button),
+            > :global(button),
-            & > :global(select) {
+            > :global(select) {
                 border-top-right-radius: calc(var(--toolbar-size) / 7.5);
                 border-bottom-right-radius: calc(var(--toolbar-size) / 7.5);
             }

ts/editor-toolbar/DropdownItem.svelte

@@ -1,4 +1,7 @@
 <script lang="typescript">
+    import { getContext } from "svelte";
+    import { nightModeKey } from "./contextKeys";
+
     export let id: string;
     export let className = "";
     export let tooltip: string;
@@ -6,15 +9,52 @@
     export let onClick: (event: MouseEvent) => void;
     export let label: string;
     export let endLabel: string;
+
+    const nightMode = getContext(nightModeKey);
 </script>
 
+<style lang="scss">
+    @import "ts/node_modules/bootstrap/scss/functions";
+    @import "ts/node_modules/bootstrap/scss/variables";
+
+    button {
+        display: flex;
+        justify-content: space-between;
+
+        &.nightMode {
+            color: white;
+
+            &:hover, &:focus {
+                color: black;
+            }
+
+            &:active {
+                color: white;
+            }
+        }
+
+        &:hover, &:focus {
+            color: white;
+        }
+
+        &:focus {
+            box-shadow: none;
+        }
+    }
+
+    span {
+        font-size: calc(var(--toolbar-size) / 2.3);
+        color: inherit;
+    }
+</style>
+
 <button
     {id}
-    class={`dropdown-item ${className}`}
+    class={`btn dropdown-item ${className}`}
+    class:nightMode
     title={tooltip}
     on:click={onClick}
     on:mousedown|preventDefault>
-    <span class="float-start">{label}</span>
+    <span class:me-2={endLabel}>{label}</span>
-
+    {#if endLabel}<span>{endLabel}</span>{/if}
-    {#if endLabel}<span class="float-end">{endLabel}</span>{/if}
 </button>

ts/editor-toolbar/DropdownMenu.svelte

@@ -1,13 +1,30 @@
 <script lang="typescript">
     import type { SvelteComponentDefinition } from "./types";
+    import { getContext } from "svelte";
+    import { nightModeKey } from "./contextKeys";
 
     export let id: string;
     export let menuItems: SvelteComponentDefinition[];
+
+    const nightMode = getContext(nightModeKey);
 </script>
 
-<ul class="dropdown-menu" {id}>
+<style lang="scss">
+    @import "ts/node_modules/bootstrap/scss/functions";
+    @import "ts/node_modules/bootstrap/scss/variables";
+
+    ul {
+        background-color: $light;
+
+        &.nightMode {
+            background-color: $secondary;
+        }
+    }
+</style>
+
+<ul {id} class="dropdown-menu" class:nightMode>
     {#each menuItems as menuItem}
-        <li>
+        <li class:nightMode>
             <svelte:component this={menuItem.component} {...menuItem} />
         </li>
     {/each}

ts/editor-toolbar/SquareButton.svelte

@@ -1,6 +1,6 @@
 <script lang="typescript">
-    import { getContext, onMount, createEventDispatcher } from "svelte";
     import type { Readable } from "svelte/store";
+    import { getContext, onMount, createEventDispatcher } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
 
     export let id: string;