48 lines
1.8 KiB
JavaScript
48 lines
1.8 KiB
JavaScript
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')
|
|
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')
|
|
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')
|
|
body.style.display = 'initial'
|
|
}
|
|
cssEl.addEventListener('load', setDynamic)
|
|
}
|
|
|
|
const StyleSetter = {
|
|
setStyle
|
|
}
|
|
|
|
export default StyleSetter
|