From 75f0c191dd8ad029561901ce0dab8e10226b95f7 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 14 Nov 2018 21:53:51 +0300 Subject: [PATCH] some initial work for user highlight v2 --- src/components/user_card_content/user_card_content.js | 2 +- src/services/color_convert/color_convert.js | 10 ++++++++++ src/services/style_setter/style_setter.js | 5 ++--- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 76a5577e..eae436a9 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -5,7 +5,7 @@ export default { props: [ 'user', 'switcher', 'selected', 'hideBio' ], computed: { headingStyle () { - const color = this.$store.state.config.colors.bg + const color = this.$store.state.config.customTheme.colors.bg if (color) { const rgb = hex2rgb(color) const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js index 6f046a1d..00b6c552 100644 --- a/src/services/color_convert/color_convert.js +++ b/src/services/color_convert/color_convert.js @@ -97,6 +97,15 @@ const alphaBlend = (fg, fga, bg) => { }, {}) } +const invert = (rgb) => { + return 'rgb'.split('').reduce((acc, c) => { + console.log(rgb[c]) + acc[c] = 255 - rgb[c] + console.log(acc[c]) + return acc + }, {}) +} + const hex2rgb = (hex) => { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) return result ? { @@ -125,6 +134,7 @@ export { rgb2hex, hex2rgb, mixrgb, + invert, rgbstr2hex, getContrastRatio, alphaBlend diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 9388e6f9..907de586 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -40,8 +40,6 @@ const setStyle = (href, commit) => { colors[name] = color }) - commit('setOption', { name: 'colors', value: colors }) - body.removeChild(baseEl) const styleEl = document.createElement('style') @@ -74,7 +72,7 @@ const getTextColor = function (bg, text, preserve) { } const setColors = (input, commit) => { - const { colorRules, radiiRules } = generatePreset(input) + const { colorRules, radiiRules, theme } = generatePreset(input) const head = document.head const body = document.body body.style.display = 'none' @@ -91,6 +89,7 @@ const setColors = (input, commit) => { // commit('setOption', { name: 'colors', value: htmlColors }) // commit('setOption', { name: 'radii', value: radii }) commit('setOption', { name: 'customTheme', value: input }) + commit('setOption', { name: 'colors', value: theme.colors }) } const generatePreset = (input) => {