some initial work for user highlight v2

This commit is contained in:
Henry Jameson 2018-11-14 21:53:51 +03:00
parent e7fe2dc9f9
commit 75f0c191dd
3 changed files with 13 additions and 4 deletions

View file

@ -5,7 +5,7 @@ export default {
props: [ 'user', 'switcher', 'selected', 'hideBio' ], props: [ 'user', 'switcher', 'selected', 'hideBio' ],
computed: { computed: {
headingStyle () { headingStyle () {
const color = this.$store.state.config.colors.bg const color = this.$store.state.config.customTheme.colors.bg
if (color) { if (color) {
const rgb = hex2rgb(color) const rgb = hex2rgb(color)
const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`

View file

@ -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 hex2rgb = (hex) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
return result ? { return result ? {
@ -125,6 +134,7 @@ export {
rgb2hex, rgb2hex,
hex2rgb, hex2rgb,
mixrgb, mixrgb,
invert,
rgbstr2hex, rgbstr2hex,
getContrastRatio, getContrastRatio,
alphaBlend alphaBlend

View file

@ -40,8 +40,6 @@ const setStyle = (href, commit) => {
colors[name] = color colors[name] = color
}) })
commit('setOption', { name: 'colors', value: colors })
body.removeChild(baseEl) body.removeChild(baseEl)
const styleEl = document.createElement('style') const styleEl = document.createElement('style')
@ -74,7 +72,7 @@ const getTextColor = function (bg, text, preserve) {
} }
const setColors = (input, commit) => { const setColors = (input, commit) => {
const { colorRules, radiiRules } = generatePreset(input) const { colorRules, radiiRules, theme } = generatePreset(input)
const head = document.head const head = document.head
const body = document.body const body = document.body
body.style.display = 'none' body.style.display = 'none'
@ -91,6 +89,7 @@ const setColors = (input, commit) => {
// commit('setOption', { name: 'colors', value: htmlColors }) // commit('setOption', { name: 'colors', value: htmlColors })
// commit('setOption', { name: 'radii', value: radii }) // commit('setOption', { name: 'radii', value: radii })
commit('setOption', { name: 'customTheme', value: input }) commit('setOption', { name: 'customTheme', value: input })
commit('setOption', { name: 'colors', value: theme.colors })
} }
const generatePreset = (input) => { const generatePreset = (input) => {