From ed84c6acc07d7e1848dab0fc2d64061e9a090e8d Mon Sep 17 00:00:00 2001 From: shpuld Date: Tue, 14 Nov 2017 01:37:49 +0200 Subject: [PATCH 1/6] First version with naive color extrapolation. --- src/components/settings/settings.js | 31 ++++++++++++++- src/components/settings/settings.vue | 8 ++++ src/modules/config.js | 5 ++- 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 b88937bbcc..a1d3aeda26 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 6a311d5594..9dcb12637d 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -8,6 +8,14 @@

{{$t('settings.theme')}}

+
+

Custom theme

+

Enter hex color codes (#aabbcc) into the text fields.

+ + + + +

{{$t('settings.filtering')}}

{{$t('settings.filtering_explanation')}}

diff --git a/src/modules/config.js b/src/modules/config.js index ac17747e8a..1811faa82f 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 59d5a7de54..4047c26e1f 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 = { From 44073e72fdb5d253f48b6f0bb0755da89f7e4ae1 Mon Sep 17 00:00:00 2001 From: shpuld Date: Fri, 17 Nov 2017 02:17:36 +0200 Subject: [PATCH 2/6] Update theme editor to have 4 colors, rewrite the color setter, change a LOT of base16 assignments for better consistency. --- src/App.vue | 6 +- src/components/conversation/conversation.vue | 2 +- src/components/login_form/login_form.vue | 4 +- .../notifications/notifications.vue | 4 +- .../post_status_form/post_status_form.vue | 6 +- src/components/registration/registration.vue | 4 +- src/components/settings/settings.js | 15 +++++ src/components/settings/settings.vue | 60 +++++++++++++++++-- src/components/timeline/timeline.vue | 14 ++--- .../user_settings/user_settings.vue | 10 ++-- src/services/style_setter/style_setter.js | 45 ++++++++------ 11 files changed, 122 insertions(+), 48 deletions(-) diff --git a/src/App.vue b/src/App.vue index 0d00466591..74a18dc787 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,6 @@