From aed1ca47123d6438837b304b9501918ded60c6d8 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Sat, 24 Jun 2023 09:39:23 +0200
Subject: [PATCH] optimise dark mode setting saving

---
 src/webapp/public/index.html | 1 +
 src/webapp/src/App.vue       | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/webapp/public/index.html b/src/webapp/public/index.html
index 907ec59..a2d369b 100644
--- a/src/webapp/public/index.html
+++ b/src/webapp/public/index.html
@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <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">
     <title>
         <%= htmlWebpackPlugin.options.title %>
diff --git a/src/webapp/src/App.vue b/src/webapp/src/App.vue
index 72e9705..dec0a34 100644
--- a/src/webapp/src/App.vue
+++ b/src/webapp/src/App.vue
@@ -164,18 +164,18 @@ export default {
             if ( this.theme === '&#9788;' ) {
                 document.documentElement.classList.remove( 'dark' );
                 document.documentElement.classList.add( 'light' );
-                sessionStorage.setItem( 'theme', '&#9789;' );
+                localStorage.setItem( 'theme', '&#9789;' );
                 this.theme = '&#9789;';
             } else if ( this.theme === '&#9789;' ) {
                 document.documentElement.classList.remove( 'light' );
                 document.documentElement.classList.add( 'dark' );
-                sessionStorage.setItem( 'theme', '&#9788;' );
+                localStorage.setItem( 'theme', '&#9788;' );
                 this.theme = '&#9788;';
             }
         }
     },
     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;' ) {
             document.documentElement.classList.add( 'dark' );
             this.theme = '&#9788;';