moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dynamic style setting.

This commit is contained in:
Roger Braun 2017-01-16 17:44:26 +01:00
parent 1687d7de2e
commit b65a29aa07
4 changed files with 49 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -5,7 +5,6 @@
<title>Pleroma</title> <title>Pleroma</title>
<link rel="stylesheet" href="/static/font/css/fontello.css"> <link rel="stylesheet" href="/static/font/css/fontello.css">
<link rel="stylesheet" href="/static/font/css/animation.css"> <link rel="stylesheet" href="/static/font/css/animation.css">
<link rel="stylesheet" href="/static/css/solarized-light.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

4
src/main.js
View File

@ -15,6 +15,8 @@ import apiModule from './modules/api.js'
import VueTimeago from 'vue-timeago' import VueTimeago from 'vue-timeago'
import StyleSetter from './services/style_setter/style_setter.js'
Vue.use(Vuex) Vue.use(Vuex)
Vue.use(VueRouter) Vue.use(VueRouter)
Vue.use(VueTimeago, { Vue.use(VueTimeago, {
@ -58,3 +60,5 @@ new Vue({
template: '<App/>', template: '<App/>',
components: { App } components: { App }
}) })
StyleSetter.setStyle('/static/css/solarized-light.css')

45
src/services/style_setter/style_setter.js Normal file
View File

@ -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

5
static/css/solarized-light.css
View File

@ -31,8 +31,3 @@
.base0D { color: #268bd2; } .base0D { color: #268bd2; }
.base0E { color: #6c71c4; } .base0E { color: #6c71c4; }
.base0F { color: #d33682; } .base0F { color: #d33682; }
.base05-border { color: #586e75; }
a { color: #dc322f; } /* base08 */
body { color: #586e75; } /* base05 */