diff options
Diffstat (limited to 'src/components/style_switcher')
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 27 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 23 |
2 files changed, 47 insertions, 3 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 6e414338..5e5ba266 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -8,7 +8,11 @@ export default { bgColorLocal: '', fgColorLocal: '', textColorLocal: '', - linkColorLocal: '' + linkColorLocal: '', + redColorLocal: '#ff0000', + blueColorLocal: '#0095ff', + greenColorLocal: '#0fa00f', + orangeColorLocal: '#E3FF00' } }, created () { @@ -25,6 +29,11 @@ export default { 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) + + this.redColorLocal = rgbstr2hex(this.$store.state.config.colors.cRed || this.redColorLocal) + this.blueColorLocal = rgbstr2hex(this.$store.state.config.colors.cBlue || this.blueColorLocal) + this.greenColorLocal = rgbstr2hex(this.$store.state.config.colors.cGreen || this.greenColorLocal) + this.orangeColorLocal = rgbstr2hex(this.$store.state.config.colors.cOrange || this.orangeColorLocal) }, methods: { setCustomTheme () { @@ -43,6 +52,12 @@ export default { const fgRgb = rgb(this.fgColorLocal) const textRgb = rgb(this.textColorLocal) const linkRgb = rgb(this.linkColorLocal) + + const redRgb = rgb(this.redColorLocal) + const blueRgb = rgb(this.blueColorLocal) + const greenRgb = rgb(this.greenColorLocal) + const orangeRgb = rgb(this.orangeColorLocal) + if (bgRgb && fgRgb && linkRgb) { this.$store.dispatch('setOption', { name: 'customTheme', @@ -50,7 +65,11 @@ export default { fg: fgRgb, bg: bgRgb, text: textRgb, - link: linkRgb + link: linkRgb, + cRed: redRgb, + cBlue: blueRgb, + cGreen: greenRgb, + cOrange: orangeRgb }}) } } @@ -61,6 +80,10 @@ export default { this.fgColorLocal = this.selected[2] this.textColorLocal = this.selected[3] this.linkColorLocal = this.selected[4] + this.redColorLocal = this.selected[5] + this.blueColorLocal = this.selected[6] + this.greenColorLocal = this.selected[7] + this.orangeColorLocal = this.selected[8] } } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index e6a00275..e2853d01 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -27,6 +27,28 @@ <input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal"> </div> </div> + <div class="color-container additional colors"> + <div class="color-item"> + <label for="redcolor" class="theme-color-lb">{{$t('settings.cRed')}}</label> + <input id="redcolor" class="theme-color-cl" type="color" v-model="redColorLocal"> + <input id="redcolor-t" class="theme-color-in" type="text" v-model="redColorLocal"> + </div> + <div class="color-item"> + <label for="bluecolor" class="theme-color-lb">{{$t('settings.cBlue')}}</label> + <input id="bluecolor" class="theme-color-cl" type="color" v-model="blueColorLocal"> + <input id="bluecolor-t" class="theme-color-in" type="text" v-model="blueColorLocal"> + </div> + <div class="color-item"> + <label for="greencolor" class="theme-color-lb">{{$t('settings.cGreen')}}</label> + <input id="greencolor" class="theme-color-cl" type="color" v-model="greenColorLocal"> + <input id="greencolor-t" class="theme-color-in" type="green" v-model="greenColorLocal"> + </div> + <div class="color-item"> + <label for="orangecolor" class="theme-color-lb">{{$t('settings.cOrange')}}</label> + <input id="orangecolor" class="theme-color-cl" type="color" v-model="orangeColorLocal"> + <input id="orangecolor-t" class="theme-color-in" type="text" v-model="orangeColorLocal"> + </div> + </div> <div> <div class="panel"> <div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div> @@ -79,7 +101,6 @@ .theme-color-cl, .theme-color-in { margin-left: 4px; - border-radius: 2px; } .theme-color-in { |