Demonstrate basic runtime theming support by inserting global styles

(This is just a demonstration. Needs to be refactored and expanded into a full theming system.)
parent ed7a7607
......@@ -4,7 +4,7 @@
"bio": "Cyborg Rights Activist",
"profileImage": "/profile-image.jpg",
"backgroundImage": false,
"backgroundColour": "#73D8FF",
"backgroundColour": "#0062B1",
"privateKey": "encrypted private key",
"publicKey": "public key",
"debug": false
......
......@@ -99,7 +99,22 @@
},
backgroundColour: {
get () { return this.$store.state.backgroundColour },
set (value) { this.$store.commit('backgroundColour', value) }
set (value) { this.$store.commit('backgroundColour', value)
// Very basic example of theming based on background colour.
// TODO: Refactor into a more robust, global solution.
// (See default.vue layout for redundancy)
let style = document.createElement('style')
document.head.appendChild(style)
let sheet = style.sheet
console.log('Background colour: ' + value.hex)
sheet.insertRule(`.tabs li.is-active a { color: ${value.hex}; border-bottom-color: ${value.hex}; }`)
sheet.insertRule(`.button.is-primary { background-color: ${value.hex}; }`)
sheet.insertRule(`.button.is-primary:hover { background-color: ${value.hex}; }`)
}
},
configured: {
get () { return this.$store.state.configured },
......
......@@ -2,6 +2,28 @@
<nuxt/>
</template>
<script>
export default {
computed: {
backgroundColour () { this.$store.state.backgroundColour }
},
mounted () {
// Very basic example of theming based on background colour.
// TODO: Refactor into a more robust, global solution.
// (See settings.vue for redundancy)
let style = document.createElement('style')
document.head.appendChild(style)
let sheet = style.sheet
let themeColour = this.$store.state.backgroundColour
sheet.insertRule(`.tabs li.is-active a {color: ${themeColour}; border-bottom-color: ${themeColour}}`)
sheet.insertRule(`.button.is-primary { background-color: ${themeColour}; }`)
sheet.insertRule(`.button.is-primary:hover { background-color: ${themeColour}; }`)
}
}
</script>
<style>
body
{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment