diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index 9871a57ff..46b7a2445 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -22,6 +22,8 @@
 </script>
 
 <style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
     button {
         padding: 0;
         background: content-box linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
@@ -36,8 +38,13 @@
         overflow: hidden;
     }
 
+    .btn-light {
+        @include button.light-hover-active;
+    }
+
     input {
         display: inline-block;
+        cursor: pointer;
         opacity: 0;
     }
 </style>
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index abfec42fa..a7ca85e4f 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -21,6 +21,8 @@
         display: flex;
         justify-content: space-between;
 
+        color: black;
+
         &.nightMode {
             color: white;
 
@@ -33,10 +35,6 @@
             }
         }
 
-        &:hover, &:focus {
-            color: white;
-        }
-
         &:focus {
             box-shadow: none;
         }
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 5c2d852cf..e95ce5feb 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -42,6 +42,10 @@
         width: auto;
         height: var(--toolbar-size);
     }
+
+    .btn-light {
+        @include button.light-hover-active;
+    }
 </style>
 
 <button
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 1504b31ca..06e2ad397 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -35,8 +35,15 @@
 </script>
 
 <style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
     button {
         padding: 0;
+
+    }
+
+    .btn-light {
+        @include button.light-hover-active;
     }
 
     span {
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
index 41b559f6c..a29d7d45a 100644
--- a/ts/sass/button_mixins.scss
+++ b/ts/sass/button_mixins.scss
@@ -1,8 +1,6 @@
-@mixin disabled {
-    &[disabled] {
-        opacity: 0.4;
-        cursor: not-allowed;
-
-        @content;
+@mixin light-hover-active {
+    &:hover, &:focus, &:active, &.active {
+        background-color: #e3e3e8;
+        border-color: #e3e3e8;
     }
 }