Dynamic style setting.

8 years ago · b65a29aa07
parent 1687d7de2e
commit b65a29aa07
4 changed files with 49 additions and 6 deletions
--- a/index.html
+++ b/index.html
@ -5,7 +5,6 @@
    <title>Pleroma</title>
    <link rel="stylesheet" href="/static/font/css/fontello.css">
    <link rel="stylesheet" href="/static/font/css/animation.css">
-    <link rel="stylesheet" href="/static/css/solarized-light.css">
  </head>
  <body>
    <div id="app"></div>
--- 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: '<App/>',
  components: { App }
 })
+
+StyleSetter.setStyle('/static/css/solarized-light.css')
--- a/src/services/style_setter/style_setter.js
+++ 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
--- 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 */