First version with naive color extrapolation.

This commit is contained in:
shpuld 2017-11-14 01:37:49 +02:00
parent a169abcec2
commit ed84c6acc0
4 changed files with 86 additions and 4 deletions

View file

@ -10,7 +10,10 @@ const settings = {
muteWordsString: this.$store.state.config.muteWords.join('\n'), muteWordsString: this.$store.state.config.muteWords.join('\n'),
autoLoadLocal: this.$store.state.config.autoLoad, autoLoadLocal: this.$store.state.config.autoLoad,
streamingLocal: this.$store.state.config.streaming, streamingLocal: this.$store.state.config.streaming,
hoverPreviewLocal: this.$store.state.config.hoverPreview hoverPreviewLocal: this.$store.state.config.hoverPreview,
bgColorLocal: '',
fgColorLocal: '',
linkColorLocal: ''
} }
}, },
components: { components: {
@ -21,6 +24,32 @@ const settings = {
return this.$store.state.users.currentUser 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: { watch: {
hideAttachmentsLocal (value) { hideAttachmentsLocal (value) {
this.$store.dispatch('setOption', { name: 'hideAttachments', value }) this.$store.dispatch('setOption', { name: 'hideAttachments', value })

View file

@ -8,6 +8,14 @@
<h2>{{$t('settings.theme')}}</h2> <h2>{{$t('settings.theme')}}</h2>
<style-switcher></style-switcher> <style-switcher></style-switcher>
</div> </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"> <div class="setting-item">
<h2>{{$t('settings.filtering')}}</h2> <h2>{{$t('settings.filtering')}}</h2>
<p>{{$t('settings.filtering_explanation')}}</p> <p>{{$t('settings.filtering_explanation')}}</p>

View file

@ -32,7 +32,10 @@ const config = {
break break
case 'theme': case 'theme':
const fullPath = `/static/css/${value}` const fullPath = `/static/css/${value}`
StyleSetter.setStyle(fullPath, commit) StyleSetter.setStyle(fullPath, null, commit)
break
case 'customTheme':
StyleSetter.setStyle(null, value, commit)
} }
} }
} }

View file

@ -1,6 +1,6 @@
import { times } from 'lodash' import { times } from 'lodash'
const setStyle = (href, commit) => { const setStyle = (href, col, commit) => {
/*** /***
What's going on here? What's going on here?
I want to make it easy for admins to style this application. To have 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') styleSheet.insertRule(`.base03-border { border-color: ${colors['base03']}`, 'index-max')
body.style.display = 'initial' 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 = { const StyleSetter = {