diff --git a/src/App.scss b/src/App.scss
index f830a33bcb..2426b99823 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -168,6 +168,13 @@ input, textarea, .select {
   }
 }
 
+option {
+  color: $fallback--fg;
+  color: var(--fg, $fallback--fg);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+}
+
 i[class*=icon-] {
   color: $fallback--icon;
   color: var(--icon, $fallback--icon)
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 7acba1dc4f..112bbc1e12 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -3,7 +3,10 @@
     <div>{{$t('settings.presets')}}
       <label for="style-switcher" class='select'>
         <select id="style-switcher" v-model="selected" class="style-switcher">
-          <option v-for="style in availableStyles" :value="style">{{style[0]}}</option>
+          <option v-for="style in availableStyles" :value="style" :style="{
+                  backgroundColor: style[1],
+                  color: style[3]
+                  }">{{style[0]}}</option>
         </select>
         <i class="icon-down-open"/>
       </label>