diff --git a/src/client/app/init.ts b/src/client/app/init.ts index e85a249476..52cdbf6c60 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 ff5a845b51..1aa1984abd 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 adc331ebba..34ef069b83 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)