Make dropdown highlight color work with custom themes

matrix-org · May 16, 2022 · 7ed5229 · 7ed5229
1 parent 53d5cbb
commit 7ed5229
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 1 deletion.
diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.scss
@@ -120,7 +120,7 @@ input.mx_Dropdown_option:focus {
 }
 
 .mx_Dropdown_menu .mx_Dropdown_option_highlight {
-    background-color: rgba($quaternary-content, 0.2);
+    background-color: $dropdown-highlight-color;
 }
 
 .mx_Dropdown_searchPrompt {

diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
@@ -135,6 +135,11 @@ $button-danger-fg-color: $primary-content;
 $button-danger-disabled-fg-color: $primary-content;
 // ********************
 
+// Dropdowns
+// ********************
+$dropdown-highlight-color: rgba($quaternary-content, 0.2);
+// ********************
+
 // Toggle switch
 // ********************
 $togglesw-off-color: $room-highlight-color;

diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -156,6 +156,9 @@ $button-danger-fg-color: #ffffff;
 $button-danger-disabled-fg-color: #ffffff;
 $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
 
+// Dropdowns
+$dropdown-highlight-color: rgba($quaternary-content, 0.2);
+
 // Toggle switch
 $togglesw-off-color: $room-highlight-color;
 

diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
@@ -234,6 +234,9 @@ $button-danger-fg-color: #ffffff;
 $button-danger-disabled-fg-color: #ffffff;
 $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
 
+// Dropdowns
+$dropdown-highlight-color: rgba($quaternary-content, 0.2);
+
 $visual-bell-bg-color: #faa;
 
 // Toggle switch

diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss
@@ -145,3 +145,4 @@ $menu-selected-color: var(--menu-selected-color, $menu-selected-color);
 $pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color);
 $pill-hover-bg-color: var(--other-user-pill-bg-color, $pill-hover-bg-color);
 $icon-button-color: var(--icon-button-color, $icon-button-color);
+$dropdown-highlight-color: var(--dropdown-highlight-color, $dropdown-highlight-color);
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
@@ -216,6 +216,11 @@ $button-danger-disabled-fg-color: $background;
 $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
 // ********************
 
+// Dropdowns
+// ********************
+$dropdown-highlight-color: rgba($quaternary-content, 0.2);
+// ********************
+
 // Toggle switch
 // ********************
 $togglesw-off-color: #c1c9d6;