From b65a29aa0752a6369d8b84cc1a83a3e6ddf98e79 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 16 Jan 2017 17:44:26 +0100 Subject: [PATCH] Dynamic style setting. --- index.html | 1 - src/main.js | 4 ++ src/services/style_setter/style_setter.js | 45 +++++++++++++++++++++++ static/css/solarized-light.css | 5 --- 4 files changed, 49 insertions(+), 6 deletions(-) create mode 100644 src/services/style_setter/style_setter.js diff --git a/index.html b/index.html index 30156774..ec831c41 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,6 @@ Pleroma -
diff --git a/src/main.js b/src/main.js index 048706d5..ce81ed4d 100644 --- a/src/main.js +++ b/src/main.js @@ -15,6 +15,8 @@ import apiModule from './modules/api.js' import VueTimeago from 'vue-timeago' +import StyleSetter from './services/style_setter/style_setter.js' + Vue.use(Vuex) Vue.use(VueRouter) Vue.use(VueTimeago, { @@ -58,3 +60,5 @@ new Vue({ template: '', components: { App } }) + +StyleSetter.setStyle('/static/css/solarized-light.css') diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js new file mode 100644 index 00000000..b8c978b4 --- /dev/null +++ b/src/services/style_setter/style_setter.js @@ -0,0 +1,45 @@ +const setStyle = (href) => { + /*** + What's going on here? + I want to make it easy for admins to style this application. To have + a good set of default themes, I chose the system from base16 + (https://chriskempson.github.io/base16/) to style all elements. They + all have the base00..0F classes. So the only thing an admin needs to + do to style Pleroma is to change these colors in that one css file. + Some default things (body text color, link color) need to be set dy- + namically, so this is done here by waiting for the stylesheet to be + loaded and then creating an element with the respective classes. + + It is a bit weird, but should make life for admins somewhat easier. + ***/ + const head = document.head + const body = document.body + body.style.display = 'none' + const cssEl = document.createElement('link') + cssEl.setAttribute('rel', 'stylesheet') + cssEl.setAttribute('href', href) + head.appendChild(cssEl) + + const setDynamic = () => { + const baseEl = document.createElement('div') + baseEl.setAttribute('class', 'base05') + const base05Color = window.getComputedStyle(baseEl).getPropertyValue('color') + baseEl.setAttribute('class', 'base08') + const base08Color = window.getComputedStyle(baseEl).getPropertyValue('color') + const styleEl = document.createElement('style') + head.appendChild(styleEl) + const styleSheet = styleEl.sheet + + styleSheet.insertRule(`a { color: ${base08Color}`, 'index-max') + styleSheet.insertRule(`body { color: ${base05Color}`, 'index-max') + styleSheet.insertRule(`.base05-border { color: ${base05Color}`, 'index-max') + body.style.display = 'initial' + } + cssEl.addEventListener('load', setDynamic) +} + +const StyleSetter = { + setStyle +} + +export default StyleSetter diff --git a/static/css/solarized-light.css b/static/css/solarized-light.css index 14f4d572..7164cb04 100644 --- a/static/css/solarized-light.css +++ b/static/css/solarized-light.css @@ -31,8 +31,3 @@ .base0D { color: #268bd2; } .base0E { color: #6c71c4; } .base0F { color: #d33682; } - -.base05-border { color: #586e75; } - -a { color: #dc322f; } /* base08 */ -body { color: #586e75; } /* base05 */