diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/settings/settings.js | 31 | ||||
| -rw-r--r-- | src/components/settings/settings.vue | 8 |
2 files changed, 38 insertions, 1 deletions
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index b88937bb..a1d3aeda 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -10,7 +10,10 @@ const settings = { muteWordsString: this.$store.state.config.muteWords.join('\n'), autoLoadLocal: this.$store.state.config.autoLoad, streamingLocal: this.$store.state.config.streaming, - hoverPreviewLocal: this.$store.state.config.hoverPreview + hoverPreviewLocal: this.$store.state.config.hoverPreview, + bgColorLocal: '', + fgColorLocal: '', + linkColorLocal: '' } }, components: { @@ -21,6 +24,32 @@ const settings = { return this.$store.state.users.currentUser } }, + methods: { + setCustomTheme () { + if (!this.bgColorLocal && !this.fgColorLocal && !this.linkColorLocal) { + // reset to picked themes + } + const rgb = (hex) => { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null + } + const bgRgb = rgb(this.bgColorLocal) + const fgRgb = rgb(this.fgColorLocal) + const linkRgb = rgb(this.linkColorLocal) + if (bgRgb && fgRgb && linkRgb) { + console.log('all colors ok') + this.$store.dispatch('setOption', { name: 'customTheme', value: { + fg: fgRgb, + bg: bgRgb, + link: linkRgb + }}) + } + } + }, watch: { hideAttachmentsLocal (value) { this.$store.dispatch('setOption', { name: 'hideAttachments', value }) diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 6a311d55..9dcb1263 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -9,6 +9,14 @@ <style-switcher></style-switcher> </div> <div class="setting-item"> + <h3>Custom theme</h3> + <p>Enter hex color codes (#aabbcc) into the text fields.</p> + <input type="text" placeholder="Background" v-model="bgColorLocal"> + <input type="text" placeholder="Foreground" v-model="fgColorLocal"> + <input type="text" placeholder="Highlight" v-model="linkColorLocal"> + <button @click="setCustomTheme">Submit</button> + </div> + <div class="setting-item"> <h2>{{$t('settings.filtering')}}</h2> <p>{{$t('settings.filtering_explanation')}}</p> <textarea id="muteWords" v-model="muteWordsString"></textarea> |