diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/settings/settings.js | 31 | ||||
| -rw-r--r-- | src/components/settings/settings.vue | 8 | ||||
| -rw-r--r-- | src/modules/config.js | 5 | ||||
| -rw-r--r-- | src/services/style_setter/style_setter.js | 46 |
4 files changed, 86 insertions, 4 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> diff --git a/src/modules/config.js b/src/modules/config.js index ac17747e..1811faa8 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -32,7 +32,10 @@ const config = { break case 'theme': const fullPath = `/static/css/${value}` - StyleSetter.setStyle(fullPath, commit) + StyleSetter.setStyle(fullPath, null, commit) + break + case 'customTheme': + StyleSetter.setStyle(null, value, commit) } } } diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 59d5a7de..4047c26e 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -1,6 +1,6 @@ import { times } from 'lodash' -const setStyle = (href, commit) => { +const setStyle = (href, col, commit) => { /*** What's going on here? I want to make it easy for admins to style this application. To have @@ -48,7 +48,49 @@ const setStyle = (href, commit) => { styleSheet.insertRule(`.base03-border { border-color: ${colors['base03']}`, 'index-max') body.style.display = 'initial' } - cssEl.addEventListener('load', setDynamic) + + const rgb2hex = (r, g, b) => { + return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}` + } + + const setColors = () => { + const styleEl = document.createElement('style') + head.appendChild(styleEl) + const styleSheet = styleEl.sheet + + const isDark = (col.fg.r + col.fg.g + col.fg.b) > (col.bg.r + col.bg.g + col.bg.b) + let colors = {} + + times(4, (n) => { + const nameLow = `base0${n.toString(16).toUpperCase()}` + const nameHigh = `base0${(n + 4).toString(16).toUpperCase()}` + if (isDark) { + colors[nameLow] = rgb2hex(col.bg.r + 10 * n, col.bg.g + 10 * n, col.bg.b + 10 * n) + colors[nameHigh] = rgb2hex(col.fg.r - 10 * n, col.fg.g - 10 * n, col.fg.b - 10 * n) + } else { + colors[nameLow] = rgb2hex(col.bg.r - 10 * n, col.bg.g - 10 * n, col.bg.b - 10 * n) + colors[nameHigh] = rgb2hex(col.fg.r + 10 * n, col.fg.g + 10 * n, col.fg.b + 10 * n) + } + styleSheet.insertRule(`.${nameLow} { color: ${colors[nameLow]}`, 'index-max') + styleSheet.insertRule(`.${nameHigh} { color: ${colors[nameHigh]}`, 'index-max') + styleSheet.insertRule(`.${nameLow}-background { background-color: ${colors[nameLow]}`, 'index-max') + styleSheet.insertRule(`.${nameHigh}-background { background-color: ${colors[nameHigh]}`, 'index-max') + }) + colors['base08'] = rgb2hex(col.link.r, col.link.g, col.link.b) + commit('setOption', { name: 'colors', value: colors }) + console.log(colors) + + styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max') + styleSheet.insertRule(`body { color: ${colors['base05']}`, 'index-max') + styleSheet.insertRule(`.base05-border { border-color: ${colors['base05']}`, 'index-max') + styleSheet.insertRule(`.base03-border { border-color: ${colors['base03']}`, 'index-max') + body.style.display = 'initial' + } + if (col) { + setColors() + } else { + cssEl.addEventListener('load', setDynamic) + } } const StyleSetter = { |