From d38e6077d5b65e47ee6c068afc18d1985cb8dbdb Mon Sep 17 00:00:00 2001
From: Severin Neumann <neumanns@cisco.com>
Date: Wed, 30 Nov 2022 10:36:15 +0100
Subject: [PATCH] fix(#39): some MUI Components not changing in Dark Mode (#94)

Signed-off-by: svrnm <neumanns@cisco.com>

Signed-off-by: svrnm <neumanns@cisco.com>
---
 src/components/options/editor/Editor.js |  4 ++++
 styles/main.less                        | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/src/components/options/editor/Editor.js b/src/components/options/editor/Editor.js
index 31bd696..b510aab 100644
--- a/src/components/options/editor/Editor.js
+++ b/src/components/options/editor/Editor.js
@@ -350,6 +350,10 @@ class Editor extends React.Component {
           <div className="select-hotkeys">
             <FormControl sx={{ m: 1, width: '95%' }} size="small">
               <Select
+                style={{
+                  background: 'var(--input-background-color)',
+                  color: 'var(--mode-text-color)'
+                }}
                 renderValue={(selected) => {
                   if (selected.length === 0) {
                     return <em>Shortcut Groups...</em>
diff --git a/styles/main.less b/styles/main.less
index a579b37..8dc7799 100644
--- a/styles/main.less
+++ b/styles/main.less
@@ -174,6 +174,16 @@ input {
   color: var(--mode-text-color);
 }
 
+span.MuiSwitch-track {
+  background: var(--mode-text-color);
+}
+
+div.MuiPaper-root.MuiMenu-paper {
+  background: var(--input-background-color);
+  color: var(--mode-text-color);
+}
+
+
 .main-grid {
   display: flex;
   height: 100vh;