diff options
Diffstat (limited to 'src/services/style_setter/style_setter.js')
| -rw-r--r-- | src/services/style_setter/style_setter.js | 28 |
1 files changed, 19 insertions, 9 deletions
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 0a5be77d..7129852d 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -1,4 +1,6 @@ -const setStyle = (href) => { +import { times } from 'lodash' + +const setStyle = (href, commit) => { /*** What's going on here? I want to make it easy for admins to style this application. To have @@ -23,18 +25,26 @@ const setStyle = (href) => { const setDynamic = () => { const baseEl = document.createElement('div') body.appendChild(baseEl) - baseEl.setAttribute('class', 'base05') - const base05Color = window.getComputedStyle(baseEl).getPropertyValue('color') - baseEl.setAttribute('class', 'base08') - const base08Color = window.getComputedStyle(baseEl).getPropertyValue('color') + + let colors = {} + times(16, (n) => { + const name = `base0${n.toString(16).toUpperCase()}` + baseEl.setAttribute('class', name) + const color = window.getComputedStyle(baseEl).getPropertyValue('color') + colors[name] = color + }) + + commit('setOption', { name: 'colors', value: colors }) + + body.removeChild(baseEl) + const styleEl = document.createElement('style') head.appendChild(styleEl) const styleSheet = styleEl.sheet - body.removeChild(baseEl) - styleSheet.insertRule(`a { color: ${base08Color}`, 'index-max') - styleSheet.insertRule(`body { color: ${base05Color}`, 'index-max') - styleSheet.insertRule(`.base05-border { border-color: ${base05Color}`, 'index-max') + 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') body.style.display = 'initial' } cssEl.addEventListener('load', setDynamic) |