diff options
Diffstat (limited to 'src/components/style_switcher')
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 8 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 14 |
2 files changed, 13 insertions, 9 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index a762f914..6e414338 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -21,10 +21,10 @@ export default { }) }, mounted () { - this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors['base00']) - this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors['base02']) - this.textColorLocal = rgbstr2hex(this.$store.state.config.colors['base05']) - this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors['base08']) + this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors.bg) + this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors.lightBg) + this.textColorLocal = rgbstr2hex(this.$store.state.config.colors.fg) + this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors.link) }, methods: { setCustomTheme () { diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 31bf546d..6c0cc6e7 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -7,22 +7,22 @@ <p>{{$t('settings.theme_help')}}</p> <div class="color-container"> <div class="color-item"> - <label for="bgcolor" class="base04 theme-color-lb">{{$t('settings.background')}}</label> + <label for="bgcolor" class="theme-color-lb">{{$t('settings.background')}}</label> <input id="bgcolor" class="theme-color-cl" type="color" v-model="bgColorLocal"> <input id="bgcolor-t" class="theme-color-in" type="text" v-model="bgColorLocal"> </div> <div class="color-item"> - <label for="fgcolor" class="base04 theme-color-lb">{{$t('settings.foreground')}}</label> + <label for="fgcolor" class="theme-color-lb">{{$t('settings.foreground')}}</label> <input id="fgcolor" class="theme-color-cl" type="color" v-model="fgColorLocal"> <input id="fgcolor-t" class="theme-color-in" type="text" v-model="fgColorLocal"> </div> <div class="color-item"> - <label for="textcolor" class="base04 theme-color-lb">{{$t('settings.text')}}</label> + <label for="textcolor" class="theme-color-lb">{{$t('settings.text')}}</label> <input id="textcolor" class="theme-color-cl" type="color" v-model="textColorLocal"> <input id="textcolor-t" class="theme-color-in" type="text" v-model="textColorLocal"> </div> <div class="color-item"> - <label for="linkcolor" class="base04 theme-color-lb">{{$t('settings.links')}}</label> + <label for="linkcolor" class="theme-color-lb">{{$t('settings.links')}}</label> <input id="linkcolor" class="theme-color-cl" type="color" v-model="linkColorLocal"> <input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal"> </div> @@ -40,7 +40,7 @@ </div> </div> </div> - <button class="btn base02-background base04" @click="setCustomTheme">{{$t('general.apply')}}</button> + <button class="btn" @click="setCustomTheme">{{$t('general.apply')}}</button> </div> </template> @@ -63,6 +63,10 @@ flex: 1 1 0; align-items: baseline; margin: 5px 6px 5px 0; + + label { + color: var(--faint); + } } .theme-color-cl, .theme-color-in { |