diff --git a/src/client/app/init.ts b/src/client/app/init.ts index e85a249476b2220969e49d829b94a29271372432..52cdbf6c60aaa9a86f233f6d46b400bba3a09c72 100644 --- a/src/client/app/init.ts +++ b/src/client/app/init.ts @@ -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`); diff --git a/src/client/app/theme.ts b/src/client/app/theme.ts index ff5a845b5136b212f95d09e04d97c6cfefc6c817..1aa1984abd969e42837150cb89940aada4c71db9 100644 --- a/src/client/app/theme.ts +++ b/src/client/app/theme.ts @@ -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)); diff --git a/src/client/style.styl b/src/client/style.styl index adc331ebbae84d58cf39d3017deaea478635953e..34ef069b830d6e1c4e8559ee20d62eb1c1897543 100644 --- a/src/client/style.styl +++ b/src/client/style.styl @@ -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)