From b65a29aa0752a6369d8b84cc1a83a3e6ddf98e79 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
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 301567740..ec831c415 100644
--- 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>
diff --git a/src/main.js b/src/main.js
index 048706d57..ce81ed4d3 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: '<App/>',
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 000000000..b8c978b42
--- /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 14f4d5720..7164cb046 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 */
--
GitLab