parent
9049ecb1cf
commit
4e2b966b80
1 changed files with 14 additions and 14 deletions
|
@ -42,41 +42,41 @@ export const builtinThemes = [
|
||||||
tweetDeckTheme,
|
tweetDeckTheme,
|
||||||
];
|
];
|
||||||
|
|
||||||
export function applyTheme(themes: Theme, persisted = true) {
|
export function applyTheme(theme: Theme, persisted = true) {
|
||||||
document.documentElement.classList.add('changing-themes');
|
document.documentElement.classList.add('changing-theme');
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
document.documentElement.classList.remove('changing-themes');
|
document.documentElement.classList.remove('changing-theme');
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
|
||||||
// Deep copy
|
// Deep copy
|
||||||
const _themes = JSON.parse(JSON.stringify(themes));
|
const _theme = JSON.parse(JSON.stringify(theme));
|
||||||
|
|
||||||
if (_themes.base) {
|
if (_theme.base) {
|
||||||
const base = [lightTheme, darkTheme].find(x => x.id == _themes.base);
|
const base = [lightTheme, darkTheme].find(x => x.id == _theme.base);
|
||||||
_themes.vars = Object.assign({}, base.vars, _themes.vars);
|
_theme.vars = Object.assign({}, base.vars, _theme.vars);
|
||||||
_themes.props = Object.assign({}, base.props, _themes.props);
|
_theme.props = Object.assign({}, base.props, _theme.props);
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = compile(_themes);
|
const props = compile(_theme);
|
||||||
|
|
||||||
for (const [k, v] of Object.entries(props)) {
|
for (const [k, v] of Object.entries(props)) {
|
||||||
document.documentElement.style.setProperty(`--${k}`, v.toString());
|
document.documentElement.style.setProperty(`--${k}`, v.toString());
|
||||||
}
|
}
|
||||||
|
|
||||||
if (persisted) {
|
if (persisted) {
|
||||||
localStorage.setItem('themes', JSON.stringify(props));
|
localStorage.setItem('theme', JSON.stringify(props));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function compile(themes: Theme): { [key: string]: string } {
|
function compile(theme: Theme): { [key: string]: string } {
|
||||||
function getColor(code: string): tinycolor.Instance {
|
function getColor(code: string): tinycolor.Instance {
|
||||||
// ref
|
// ref
|
||||||
if (code[0] == '@') {
|
if (code[0] == '@') {
|
||||||
return getColor(themes.props[code.substr(1)]);
|
return getColor(theme.props[code.substr(1)]);
|
||||||
}
|
}
|
||||||
if (code[0] == '$') {
|
if (code[0] == '$') {
|
||||||
return getColor(themes.vars[code.substr(1)]);
|
return getColor(theme.vars[code.substr(1)]);
|
||||||
}
|
}
|
||||||
|
|
||||||
// func
|
// func
|
||||||
|
@ -98,7 +98,7 @@ function compile(themes: Theme): { [key: string]: string } {
|
||||||
|
|
||||||
const props = {};
|
const props = {};
|
||||||
|
|
||||||
for (const [k, v] of Object.entries(themes.props)) {
|
for (const [k, v] of Object.entries(theme.props)) {
|
||||||
props[k] = genValue(getColor(v));
|
props[k] = genValue(getColor(v));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue