161sh/trashposs
1
0
Fork 0
mirror of https://iceshrimp.dev/crimekillz/trashposs synced 2024-11-23 01:13:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
syuilo 2019-03-03 08:43:51 +09:00
parent 1a539c1261
commit 796b032158
3 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/app/init.ts
View File

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

6
src/client/app/theme.ts
View File

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

6
src/client/style.styl
View File

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