-
-
-
+
+
More customs!
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -161,7 +154,7 @@
.apply-container,
.radius-container,
-.color-container,
+.color-container > div,
.presets-container {
display: flex;
@@ -176,7 +169,7 @@
flex-direction: column;
}
-.color-container {
+.color-container > div{
flex-wrap: wrap;
justify-content: space-between;
}
@@ -214,14 +207,30 @@
.radius-item,
.color-item {
min-width: 20em;
+ margin: 5px 6px 0 0;
display:flex;
+ flex-direction: column;
flex: 1 1 0;
- align-items: baseline;
- margin: 5px 6px 5px 0;
+
+ &:nth-child(2n+1) {
+ margin-right: 7px;
+
+ }
+
+ .color, .opacity {
+ display:flex;
+ align-items: baseline;
+ }
label {
color: var(--faint, $fallback--faint);
}
+ .opacity-control {
+ margin-top: 5px;
+ height: 12px;
+ line-height: 12px;
+ font-size: 12px;
+ }
}
.radius-item {
@@ -243,44 +252,19 @@
margin-left: 4px;
}
-.theme-color-in {
- min-width: 4em;
-}
-
.theme-radius-in {
min-width: 1em;
}
-.theme-radius-in,
-.theme-color-in {
+.theme-radius-in {
max-width: 7em;
flex: 1;
}
-.theme-radius-lb,
-.theme-color-lb {
- flex: 2;
- min-width: 7em;
-}
-
.theme-radius-lb{
max-width: 50em;
}
-.theme-color-lb {
- max-width: 10em;
-}
-
-.theme-color-cl {
- padding: 1px;
- max-width: 8em;
- height: 100%;
- flex: 0;
- min-width: 2em;
- cursor: pointer;
- max-height: 29px;
-}
-
.theme-preview-content {
padding: 20px;
}
diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
index 006107e2..e55b3b79 100644
--- a/src/lib/persisted_state.js
+++ b/src/lib/persisted_state.js
@@ -73,6 +73,7 @@ export default function createPersistedState ({
loaded = true
} catch (e) {
console.log("Couldn't load state")
+ console.error(e)
loaded = true
}
})
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 13dd8979..efb43327 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -1,6 +1,10 @@
import { map } from 'lodash'
const rgb2hex = (r, g, b) => {
+ console.log(r)
+ if (typeof r === 'object') {
+ ({ r, g, b } = r)
+ }
[r, g, b] = map([r, g, b], (val) => {
val = Math.ceil(val)
val = val < 0 ? 0 : val
@@ -27,8 +31,16 @@ const rgbstr2hex = (rgb) => {
return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
}
+const mixrgb = (a, b) => {
+ return Object.keys(a).reduce((acc, k) => {
+ acc[k] = (a[k] + b[k]) / 2
+ return acc
+ }, {})
+}
+
export {
rgb2hex,
hex2rgb,
+ mixrgb,
rgbstr2hex
}
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 493d444e..72782594 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,5 +1,6 @@
import { times } from 'lodash'
-import { rgb2hex, hex2rgb } from '../color_convert/color_convert.js'
+import { brightness, invertLightness, convert } from 'chromatism'
+import { rgb2hex, hex2rgb, mixrgb } from '../color_convert/color_convert.js'
// While this is not used anymore right now, I left it in if we want to do custom
// styles that aren't just colors, so user can pick from a few different distinct
@@ -53,7 +54,23 @@ const setStyle = (href, commit) => {
cssEl.addEventListener('load', setDynamic)
}
-const setColors = (col, commit) => {
+const rgb2rgba = function (rgba) {
+ return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
+}
+
+const getTextColor = function (bg, text) {
+ const bgIsLight = convert(bg).hsl.l > 50
+ const textIsLight = convert(text).hsl.l > 50
+
+ if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
+ const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
+ return Object.assign(base, invertLightness(text).rgb)
+ }
+ return text
+}
+
+const setColors = (input, commit) => {
+ const { colorRules, radiiRules, col } = generatePreset(input)
const head = document.head
const body = document.body
body.style.display = 'none'
@@ -62,51 +79,83 @@ const setColors = (col, commit) => {
head.appendChild(styleEl)
const styleSheet = styleEl.sheet
- const isDark = (col.text.r + col.text.g + col.text.b) > (col.bg.r + col.bg.g + col.bg.b)
- let colors = {}
- let radii = {}
-
- const mod = isDark ? -10 : 10
-
- colors.bg = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background
- colors.lightBg = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
- colors.btn = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons
- colors.input = `rgba(${col.fg.r}, ${col.fg.g}, ${col.fg.b}, .5)`
- colors.border = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod) // borders
- colors.faint = `rgba(${col.text.r}, ${col.text.g}, ${col.text.b}, .5)`
- colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b) // text
- colors.lightFg = rgb2hex(col.text.r - mod * 5, col.text.g - mod * 5, col.text.b - mod * 5) // strong text
-
- colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
-
- colors.link = rgb2hex(col.link.r, col.link.g, col.link.b) // links
- colors.icon = rgb2hex((col.bg.r + col.text.r) / 2, (col.bg.g + col.text.g) / 2, (col.bg.b + col.text.b) / 2) // icons
-
- colors.cBlue = col.cBlue && rgb2hex(col.cBlue.r, col.cBlue.g, col.cBlue.b)
- colors.cRed = col.cRed && rgb2hex(col.cRed.r, col.cRed.g, col.cRed.b)
- colors.cGreen = col.cGreen && rgb2hex(col.cGreen.r, col.cGreen.g, col.cGreen.b)
- colors.cOrange = col.cOrange && rgb2hex(col.cOrange.r, col.cOrange.g, col.cOrange.b)
-
- colors.cAlertRed = col.cRed && `rgba(${col.cRed.r}, ${col.cRed.g}, ${col.cRed.b}, .5)`
-
- radii.btnRadius = col.btnRadius
- radii.inputRadius = col.inputRadius
- radii.panelRadius = col.panelRadius
- radii.avatarRadius = col.avatarRadius
- radii.avatarAltRadius = col.avatarAltRadius
- radii.tooltipRadius = col.tooltipRadius
- radii.attachmentRadius = col.attachmentRadius
-
styleSheet.toString()
- styleSheet.insertRule(`body { ${Object.entries(colors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';')} }`, 'index-max')
- styleSheet.insertRule(`body { ${Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';')} }`, 'index-max')
+ styleSheet.insertRule(`body { ${colorRules} }`, 'index-max')
+ styleSheet.insertRule(`body { ${radiiRules} }`, 'index-max')
body.style.display = 'initial'
- commit('setOption', { name: 'colors', value: colors })
- commit('setOption', { name: 'radii', value: radii })
+ // commit('setOption', { name: 'colors', value: htmlColors })
+ // commit('setOption', { name: 'radii', value: radii })
commit('setOption', { name: 'customTheme', value: col })
}
+const generatePreset = (input) => {
+ const radii = input.radii || {
+ btnRadius: input.btnRadius,
+ inputRadius: input.inputRadius,
+ panelRadius: input.panelRadius,
+ avatarRadius: input.avatarRadius,
+ avatarAltRadius: input.avatarAltRadius,
+ tooltipRadius: input.tooltipRadius,
+ attachmentRadius: input.attachmentRadius
+ }
+ const colors = {}
+
+ const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => {
+ if (typeof v === 'object') {
+ acc[k] = v
+ } else {
+ acc[k] = hex2rgb(v)
+ }
+ return acc
+ }, {})
+
+ colors.fg = col.fg || col.text // text
+ colors.text = col.fg || col.text // text
+ colors.lightFg = col.fg || col.text // text
+
+ colors.bg = col.bg // background
+ colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb // hilighted bg
+ console.log(colors.bg)
+ console.log(colors.lightBg)
+
+ colors.btn = col.btn || { r: 0, g: 0, b: 0 }
+ colors.btnText = getTextColor(colors.btn, colors.text)
+
+ colors.panel = col.panel || col.btn
+ colors.panelText = getTextColor(colors.panel, colors.text)
+
+ colors.topBar = col.topBar || col.btn
+ colors.topBarText = getTextColor(colors.topBar, colors.text)
+
+ colors.input = col.input || Object.assign({ a: 0.5 }, col.btn)
+ colors.border = col.btn // borders
+ colors.faint = col.faint || Object.assign({ a: 0.5 }, col.text)
+
+ colors.link = col.link // links
+ colors.icon = mixrgb(colors.bg, colors.text) // icons
+
+ colors.cBlue = col.cBlue
+ colors.cRed = col.cRed
+ colors.cGreen = col.cGreen
+ colors.cOrange = col.cOrange
+
+ colors.cAlertRed = col.cAlertRed || Object.assign({ a: 0.5 }, col.cRed)
+
+ const htmlColors = Object.entries(colors)
+ .reduce((acc, [k, v]) => {
+ if (!v) return acc
+ acc[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
+ return acc
+ }, {})
+
+ return {
+ colorRules: Object.entries(htmlColors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'),
+ radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'),
+ col
+ }
+}
+
const setPreset = (val, commit) => {
window.fetch('/static/styles.json')
.then((data) => data.json())
@@ -148,7 +197,8 @@ const setPreset = (val, commit) => {
const StyleSetter = {
setStyle,
setPreset,
- setColors
+ setColors,
+ generatePreset
}
export default StyleSetter
diff --git a/yarn.lock b/yarn.lock
index fdad8b49..0139c714 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1205,6 +1205,10 @@ chokidar@^1.0.0, chokidar@^1.4.1:
optionalDependencies:
fsevents "^1.0.0"
+chromatism@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/chromatism/-/chromatism-3.0.0.tgz#a7249d353c1e4f3577e444ac41171c4e2e624b12"
+
chromedriver@^2.21.2:
version "2.35.0"
resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-2.35.0.tgz#c103ba2fb3d1671f666058159f5cbaa816902e4d"