optimise dark mode setting saving

This commit is contained in:
2023-06-24 09:39:23 +02:00
parent 2d5308b140
commit aed1ca4712
2 changed files with 4 additions and 3 deletions

View File

@@ -5,6 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title> <title>
<%= htmlWebpackPlugin.options.title %> <%= htmlWebpackPlugin.options.title %>

View File

@@ -164,18 +164,18 @@ export default {
if ( this.theme === '&#9788;' ) { if ( this.theme === '&#9788;' ) {
document.documentElement.classList.remove( 'dark' ); document.documentElement.classList.remove( 'dark' );
document.documentElement.classList.add( 'light' ); document.documentElement.classList.add( 'light' );
sessionStorage.setItem( 'theme', '&#9789;' ); localStorage.setItem( 'theme', '&#9789;' );
this.theme = '&#9789;'; this.theme = '&#9789;';
} else if ( this.theme === '&#9789;' ) { } else if ( this.theme === '&#9789;' ) {
document.documentElement.classList.remove( 'light' ); document.documentElement.classList.remove( 'light' );
document.documentElement.classList.add( 'dark' ); document.documentElement.classList.add( 'dark' );
sessionStorage.setItem( 'theme', '&#9788;' ); localStorage.setItem( 'theme', '&#9788;' );
this.theme = '&#9788;'; this.theme = '&#9788;';
} }
} }
}, },
created () { created () {
this.theme = sessionStorage.getItem( 'theme' ) ? sessionStorage.getItem( 'theme' ) : ''; this.theme = localStorage.getItem( 'theme' ) ? localStorage.getItem( 'theme' ) : '';
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || this.theme === '&#9788;' ) { if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || this.theme === '&#9788;' ) {
document.documentElement.classList.add( 'dark' ); document.documentElement.classList.add( 'dark' );
this.theme = '&#9788;'; this.theme = '&#9788;';