forked from AkkomaGang/akkoma-fe
something works without exploding and i'm tired already
This commit is contained in:
Henry Jameson
parent
9d0bbe37e6
commit
f78a5158e1
9 changed files with 297 additions and 182 deletions
|
|
@ -16,6 +16,7 @@
|
|||
"dependencies": {
|
||||
"babel-plugin-add-module-exports": "^0.2.1",
|
||||
"babel-plugin-lodash": "^3.2.11",
|
||||
"chromatism": "^3.0.0",
|
||||
"diff": "^3.0.1",
|
||||
"karma-mocha-reporter": "^2.2.1",
|
||||
"localforage": "^1.5.0",
|
||||
|
|
|
|||
10
src/App.scss
10
src/App.scss
|
|
@ -51,7 +51,7 @@ a {
|
|||
button {
|
||||
user-select: none;
|
||||
color: $fallback--fg;
|
||||
color: var(--fg, $fallback--fg);
|
||||
color: var(--btnText, $fallback--fg);
|
||||
background-color: $fallback--btn;
|
||||
background-color: var(--btn, $fallback--btn);
|
||||
border: none;
|
||||
|
|
@ -254,7 +254,7 @@ nav {
|
|||
mask-position: center;
|
||||
mask-size: contain;
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--fg, $fallback--fg);
|
||||
background-color: var(--topBarText, $fallback--fg);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -330,8 +330,9 @@ main-router {
|
|||
padding: .6em .6em;
|
||||
text-align: left;
|
||||
line-height: 28px;
|
||||
color: var(--panelText);
|
||||
background-color: $fallback--btn;
|
||||
background-color: var(--btn, $fallback--btn);
|
||||
background-color: var(--panel, $fallback--btn);
|
||||
align-items: baseline;
|
||||
|
||||
.title {
|
||||
|
|
@ -387,8 +388,9 @@ main-router {
|
|||
|
||||
nav {
|
||||
z-index: 1000;
|
||||
color: var(--topBarText);
|
||||
background-color: $fallback--btn;
|
||||
background-color: var(--btn, $fallback--btn);
|
||||
background-color: var(--topBar, $fallback--btn);
|
||||
color: $fallback--faint;
|
||||
color: var(--faint, $fallback--faint);
|
||||
box-shadow: 0px 0px 4px rgba(0,0,0,.6);
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
</transition>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<keep-alive>
|
||||
<tab-switcher>
|
||||
<div :label="$t('settings.general')" >
|
||||
<div class="setting-item">
|
||||
|
|
@ -146,6 +147,7 @@
|
|||
</div>
|
||||
|
||||
</tab-switcher>
|
||||
</keep-alive>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
import { rgbstr2hex } from '../../services/color_convert/color_convert.js'
|
||||
import { rgb2hex } from '../../services/color_convert/color_convert.js'
|
||||
import ColorInput from '../color_input/color_input.vue'
|
||||
import OpacityInput from '../opacity_input/opacity_input.vue'
|
||||
import StyleSetter from '../../services/style_setter/style_setter.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
|
|
@ -7,13 +10,23 @@ export default {
|
|||
selected: this.$store.state.config.theme,
|
||||
invalidThemeImported: false,
|
||||
bgColorLocal: '',
|
||||
bgOpacityLocal: 0,
|
||||
btnColorLocal: '',
|
||||
btnOpacityLocal: '',
|
||||
|
||||
textColorLocal: '',
|
||||
linkColorLocal: '',
|
||||
|
||||
panelColorLocal: undefined,
|
||||
panelOpacityLocal: undefined,
|
||||
topBarColorLocal: undefined,
|
||||
topBarOpacityLocal: undefined,
|
||||
|
||||
redColorLocal: '',
|
||||
blueColorLocal: '',
|
||||
greenColorLocal: '',
|
||||
orangeColorLocal: '',
|
||||
|
||||
btnRadiusLocal: '',
|
||||
inputRadiusLocal: '',
|
||||
panelRadiusLocal: '',
|
||||
|
|
@ -33,7 +46,48 @@ export default {
|
|||
})
|
||||
},
|
||||
mounted () {
|
||||
this.normalizeLocalState(this.$store.state.config.colors, this.$store.state.config.radii)
|
||||
this.normalizeLocalState(this.$store.state.config.customTheme)
|
||||
},
|
||||
computed: {
|
||||
currentTheme () {
|
||||
return {
|
||||
colors: {
|
||||
bg: this.bgColorLocal,
|
||||
fg: this.textColorLocal,
|
||||
panel: this.panelColorLocal,
|
||||
topBar: this.topBarColorLocal,
|
||||
btn: this.btnColorLocal,
|
||||
link: this.linkColorLocal,
|
||||
cRed: this.redColorLocal,
|
||||
cBlue: this.blueColorLocal,
|
||||
cGreen: this.greenColorLocal,
|
||||
cOrange: this.orangeColorLocal
|
||||
},
|
||||
radii: {
|
||||
btnRadius: this.btnRadiusLocal,
|
||||
inputRadius: this.inputRadiusLocal,
|
||||
panelRadius: this.panelRadiusLocal,
|
||||
avatarRadius: this.avatarRadiusLocal,
|
||||
avatarAltRadius: this.avatarAltRadiusLocal,
|
||||
tooltipRadius: this.tooltipRadiusLocal,
|
||||
attachmentRadius: this.attachmentRadiusLocal
|
||||
}
|
||||
}
|
||||
},
|
||||
previewRules () {
|
||||
try {
|
||||
const generated = StyleSetter.generatePreset(this.currentTheme.colors)
|
||||
return [generated.colorRules, generated.radiiRules].join(';')
|
||||
} catch (e) {
|
||||
console.error('CATCH')
|
||||
console.error(e)
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ColorInput,
|
||||
OpacityInput
|
||||
},
|
||||
methods: {
|
||||
exportCurrentTheme () {
|
||||
|
|
@ -101,57 +155,62 @@ export default {
|
|||
b: parseInt(result[3], 16)
|
||||
} : null
|
||||
}
|
||||
const bgRgb = rgb(this.bgColorLocal)
|
||||
const btnRgb = rgb(this.btnColorLocal)
|
||||
const textRgb = rgb(this.textColorLocal)
|
||||
const linkRgb = rgb(this.linkColorLocal)
|
||||
|
||||
const redRgb = rgb(this.redColorLocal)
|
||||
const blueRgb = rgb(this.blueColorLocal)
|
||||
const greenRgb = rgb(this.greenColorLocal)
|
||||
const orangeRgb = rgb(this.orangeColorLocal)
|
||||
|
||||
if (bgRgb && btnRgb && linkRgb) {
|
||||
this.$store.dispatch('setOption', {
|
||||
name: 'customTheme',
|
||||
value: {
|
||||
fg: btnRgb,
|
||||
bg: bgRgb,
|
||||
text: textRgb,
|
||||
link: linkRgb,
|
||||
cRed: redRgb,
|
||||
cBlue: blueRgb,
|
||||
cGreen: greenRgb,
|
||||
cOrange: orangeRgb,
|
||||
btnRadius: this.btnRadiusLocal,
|
||||
inputRadius: this.inputRadiusLocal,
|
||||
panelRadius: this.panelRadiusLocal,
|
||||
avatarRadius: this.avatarRadiusLocal,
|
||||
avatarAltRadius: this.avatarAltRadiusLocal,
|
||||
tooltipRadius: this.tooltipRadiusLocal,
|
||||
attachmentRadius: this.attachmentRadiusLocal
|
||||
}})
|
||||
}
|
||||
this.$store.dispatch('setOption', {
|
||||
name: 'customTheme',
|
||||
value: this.currentTheme
|
||||
})
|
||||
},
|
||||
|
||||
normalizeLocalState (colors, radii) {
|
||||
this.bgColorLocal = rgbstr2hex(colors.bg)
|
||||
this.btnColorLocal = rgbstr2hex(colors.btn)
|
||||
this.textColorLocal = rgbstr2hex(colors.fg)
|
||||
this.linkColorLocal = rgbstr2hex(colors.link)
|
||||
normalizeLocalState (input) {
|
||||
const colors = input.colors || input
|
||||
const radii = input.radii || input
|
||||
let i = 0
|
||||
console.log('BENIS')
|
||||
console.log(colors)
|
||||
|
||||
this.redColorLocal = rgbstr2hex(colors.cRed)
|
||||
this.blueColorLocal = rgbstr2hex(colors.cBlue)
|
||||
this.greenColorLocal = rgbstr2hex(colors.cGreen)
|
||||
this.orangeColorLocal = rgbstr2hex(colors.cOrange)
|
||||
console.log(i++)
|
||||
this.bgColorLocal = rgb2hex(colors.bg)
|
||||
console.log(i++)
|
||||
this.btnColorLocal = rgb2hex(colors.btn)
|
||||
console.log(i++)
|
||||
this.textColorLocal = rgb2hex(colors.text || colors.fg)
|
||||
console.log(i++)
|
||||
this.linkColorLocal = rgb2hex(colors.link)
|
||||
console.log(i++)
|
||||
|
||||
this.panelColorLocal = colors.panel ? rgb2hex(colors.panel) : undefined
|
||||
console.log(i++)
|
||||
this.topBarColorLocal = colors.topBad ? rgb2hex(colors.topBar) : undefined
|
||||
console.log(i++)
|
||||
|
||||
this.redColorLocal = rgb2hex(colors.cRed)
|
||||
console.log(i++)
|
||||
console.log('red')
|
||||
console.log(colors.cRed)
|
||||
console.log(this.redColorLocal)
|
||||
this.blueColorLocal = rgb2hex(colors.cBlue)
|
||||
console.log(i++)
|
||||
console.log('blue', this.blueColorLocal, colors.cBlue)
|
||||
this.greenColorLocal = rgb2hex(colors.cGreen)
|
||||
console.log(i++)
|
||||
this.orangeColorLocal = rgb2hex(colors.cOrange)
|
||||
console.log(i++)
|
||||
|
||||
this.btnRadiusLocal = radii.btnRadius || 4
|
||||
console.log(i++)
|
||||
this.inputRadiusLocal = radii.inputRadius || 4
|
||||
console.log(i++)
|
||||
this.panelRadiusLocal = radii.panelRadius || 10
|
||||
console.log(i++)
|
||||
this.avatarRadiusLocal = radii.avatarRadius || 5
|
||||
console.log(i++)
|
||||
this.avatarAltRadiusLocal = radii.avatarAltRadius || 50
|
||||
console.log(i++)
|
||||
this.tooltipRadiusLocal = radii.tooltipRadius || 2
|
||||
console.log(i++)
|
||||
this.attachmentRadiusLocal = radii.attachmentRadius || 5
|
||||
console.log(i++)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -24,80 +24,73 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<div :style="{
|
||||
'--btnRadius': btnRadiusLocal + 'px',
|
||||
'--inputRadius': inputRadiusLocal + 'px',
|
||||
'--panelRadius': panelRadiusLocal + 'px',
|
||||
'--avatarRadius': avatarRadiusLocal + 'px',
|
||||
'--avatarAltRadius': avatarAltRadiusLocal + 'px',
|
||||
'--tooltipRadius': tooltipRadiusLocal + 'px',
|
||||
'--attachmentRadius': attachmentRadiusLocal + 'px'
|
||||
}">
|
||||
<div class="panel dummy">
|
||||
<div class="panel-heading" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Preview</div>
|
||||
<div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
|
||||
<div class="avatar" :style="{
|
||||
'border-radius': avatarRadiusLocal + 'px'
|
||||
}">
|
||||
( ͡° ͜ʖ ͡°)
|
||||
</div>
|
||||
<h4>Content</h4>
|
||||
<br>
|
||||
A bunch of more content and
|
||||
<a :style="{ color: linkColorLocal }">a nice lil' link</a>
|
||||
<i :style="{ color: blueColorLocal }" class="icon-reply"/>
|
||||
<i :style="{ color: greenColorLocal }" class="icon-retweet"/>
|
||||
<i :style="{ color: redColorLocal }" class="icon-cancel"/>
|
||||
<i :style="{ color: orangeColorLocal }" class="icon-star"/>
|
||||
<br>
|
||||
<button class="btn" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Button</button>
|
||||
<div class="preview-container" :style="previewRules">
|
||||
<div class="panel dummy">
|
||||
<div class="panel-heading">Preview</div>
|
||||
<div class="panel-body theme-preview-content">
|
||||
<div class="avatar">
|
||||
( ͡° ͜ʖ ͡°)
|
||||
</div>
|
||||
<h4>Content</h4>
|
||||
<br>
|
||||
A bunch of more content and
|
||||
<a style="color: var(--link)">a nice lil' link</a>
|
||||
<i style="color: var(--cBlue)" class="icon-reply"/>
|
||||
<i style="color: var(--cGreen)" class="icon-retweet"/>
|
||||
<i style="color: var(--cRed)" class="icon-cancel"/>
|
||||
<i style="color: var(--cOrange)" class="icon-star"/>
|
||||
<br>
|
||||
<button class="btn">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-container">
|
||||
<p>{{$t('settings.theme_help')}}</p>
|
||||
<div class="color-item">
|
||||
<label for="bgcolor" class="theme-color-lb">{{$t('settings.background')}}</label>
|
||||
<input id="bgcolor" class="theme-color-cl" type="color" v-model="bgColorLocal">
|
||||
<input id="bgcolor-t" class="theme-color-in" type="text" v-model="bgColorLocal">
|
||||
<h3>Basic colors!!</h3>
|
||||
<div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="bgOpacity" v-model="bgOpacityLocal" fallback="1"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="fgColor" v-model="btnColorLocal" :label="$t('settings.foreground')"/>
|
||||
<OpacityInput name="fgOpacity" v-model="btnOpacityLocal" fallback="1"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<label for="fgcolor" class="theme-color-lb">{{$t('settings.foreground')}}</label>
|
||||
<input id="fgcolor" class="theme-color-cl" type="color" v-model="btnColorLocal">
|
||||
<input id="fgcolor-t" class="theme-color-in" type="text" v-model="btnColorLocal">
|
||||
|
||||
<h3>More customs!</h3>
|
||||
<div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="panelColor" v-model="panelColorLocal" :fallback="btnColorLocal" label="Panel header"/>
|
||||
<OpacityInput name="panelOpacity" v-model="panelOpacityLocal" fallback="1"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" label="Top bar"/>
|
||||
<OpacityInput name="topBarOpacity" v-model="topBarOpacityLocal" fallback="1"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<label for="textcolor" class="theme-color-lb">{{$t('settings.text')}}</label>
|
||||
<input id="textcolor" class="theme-color-cl" type="color" v-model="textColorLocal">
|
||||
<input id="textcolor-t" class="theme-color-in" type="text" v-model="textColorLocal">
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<label for="linkcolor" class="theme-color-lb">{{$t('settings.links')}}</label>
|
||||
<input id="linkcolor" class="theme-color-cl" type="color" v-model="linkColorLocal">
|
||||
<input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal">
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<label for="redcolor" class="theme-color-lb">{{$t('settings.cRed')}}</label>
|
||||
<input id="redcolor" class="theme-color-cl" type="color" v-model="redColorLocal">
|
||||
<input id="redcolor-t" class="theme-color-in" type="text" v-model="redColorLocal">
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<label for="bluecolor" class="theme-color-lb">{{$t('settings.cBlue')}}</label>
|
||||
<input id="bluecolor" class="theme-color-cl" type="color" v-model="blueColorLocal">
|
||||
<input id="bluecolor-t" class="theme-color-in" type="text" v-model="blueColorLocal">
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<label for="greencolor" class="theme-color-lb">{{$t('settings.cGreen')}}</label>
|
||||
<input id="greencolor" class="theme-color-cl" type="color" v-model="greenColorLocal">
|
||||
<input id="greencolor-t" class="theme-color-in" type="green" v-model="greenColorLocal">
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<label for="orangecolor" class="theme-color-lb">{{$t('settings.cOrange')}}</label>
|
||||
<input id="orangecolor" class="theme-color-cl" type="color" v-model="orangeColorLocal">
|
||||
<input id="orangecolor-t" class="theme-color-in" type="text" v-model="orangeColorLocal">
|
||||
|
||||
<h3>Rainbows!!!</h3>
|
||||
<div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ export default function createPersistedState ({
|
|||
loaded = true
|
||||
} catch (e) {
|
||||
console.log("Couldn't load state")
|
||||
console.error(e)
|
||||
loaded = true
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue