From 3373d287012d66c642249bbe2da48febaa69b12e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 5 Aug 2018 09:18:04 +0300
Subject: [PATCH] Fixes selects having unreadable text on some browsers/OSes.
Added bonus: theme switcher select now has styled options that show preview
of what theme's bg/fg colors are
---
src/App.scss | 7 +++++++
src/components/style_switcher/style_switcher.vue | 5 ++++-
2 files changed, 11 insertions(+), 1 deletion(-)
diff --git a/src/App.scss b/src/App.scss
index f830a33b..2426b998 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 7acba1dc..112bbc1e 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>