aboutsummaryrefslogtreecommitdiff
path: root/src/services/style_setter/style_setter.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/services/style_setter/style_setter.js')
-rw-r--r--src/services/style_setter/style_setter.js45
1 files changed, 45 insertions, 0 deletions
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