テーマの切り替えをなめらかに

This commit is contained in:
syuilo 2019-03-03 08:43:51 +09:00
parent e8ef8f0004
commit 4de75448b6
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
3 changed files with 14 additions and 2 deletions

View file

@ -389,7 +389,7 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS], os: MiOS)
});
//#endregion
// Reapply current theme
/*// Reapply current theme
try {
const themeName = os.store.state.device.darkmode ? os.store.state.device.darkTheme : os.store.state.device.lightTheme;
const themes = os.store.state.device.themes.concat(builtinThemes);
@ -399,7 +399,7 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS], os: MiOS)
}
} catch (e) {
console.log(`Cannot reapply theme. ${e}`);
}
}*/
//#region line width
document.documentElement.style.setProperty('--lineWidth', `${os.store.state.device.lineWidth}px`);

View file

@ -43,6 +43,12 @@ export const builtinThemes = [
];
export function applyTheme(theme: Theme, persisted = true) {
document.documentElement.classList.add('change-theme');
setTimeout(() => {
document.documentElement.classList.remove('change-theme');
}, 500);
// Deep copy
const _theme = JSON.parse(JSON.stringify(theme));

View file

@ -20,6 +20,12 @@ html, body
text-size-adjust 100%
font-family sans-serif
html.change-theme
&, *
transition-property all
transition-duration 0.5s
transition-timing-function ease
a
text-decoration none
color var(--link)