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

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`);

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));
 

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)