Theming: background colour of button is also set

parent 2257778c
......@@ -8,6 +8,27 @@ export default {
backgroundColour () { this.$store.state.backgroundColour }
},
mounted () {
// Courtesy: https://www.sitepoint.com/javascript-generate-lighter-darker-color/
function adjustLuminanceOfHexColour (hex, lum) {
// Validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;
// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i*2,2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00"+c).substr(c.length);
}
return rgb;
}
// Very basic example of theming based on background colour.
// TODO: Refactor into a more robust, global solution.
// (See settings.vue for redundancy)
......@@ -20,6 +41,7 @@ export default {
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}; }`)
sheet.insertRule(`.button.is-primary:disabled { background-color: ${themeColour}; `)
}
}
</script>
......
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