aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--app.js25
-rw-r--r--index.html7
2 files changed, 17 insertions, 15 deletions
diff --git a/app.js b/app.js
index a404314..41bdd9d 100644
--- a/app.js
+++ b/app.js
@@ -5,11 +5,18 @@ const app = new Vue({
5 offline: false, 5 offline: false,
6 filter: '', 6 filter: '',
7 vlayout: true, 7 vlayout: true,
8 overrideDark: null 8 isDark: null
9 }, 9 },
10 created: function () { 10 created: function () {
11 let that = this; 11 let that = this;
12
13 this.isDark = 'overrideDark' in localStorage ?
14 JSON.parse(localStorage.overrideDark) : matchMedia("(prefers-color-scheme: dark)").matches;
12 15
16 if ('vlayout' in localStorage) {
17 this.vlayout = JSON.parse(localStorage.vlayout)
18 }
19
13 this.checkOffline(); 20 this.checkOffline();
14 that.getConfig().then(function (config) { 21 that.getConfig().then(function (config) {
15 that.config = config; 22 that.config = config;
@@ -23,13 +30,6 @@ const app = new Vue({
23 } 30 }
24 }, false); 31 }, false);
25 }, 32 },
26 computed: {
27 isDark: function() {
28 return this.overrideDark !== null
29 ? this.overrideDark
30 : matchMedia("(prefers-color-scheme: dark)").matches;
31 }
32 },
33 methods: { 33 methods: {
34 checkOffline: function () { 34 checkOffline: function () {
35 let that = this; 35 let that = this;
@@ -53,8 +53,13 @@ const app = new Vue({
53 }); 53 });
54 }, 54 },
55 toggleTheme: function() { 55 toggleTheme: function() {
56 this.overrideDark = !this.isDark; 56 this.isDark = !this.isDark;
57 } 57 localStorage.overrideDark = this.isDark;
58 },
59 toggleLayout: function() {
60 this.vlayout = !this.vlayout;
61 localStorage.vlayout = this.vlayout;
62 },
58 } 63 }
59}); 64});
60 65
diff --git a/index.html b/index.html
index d5aebd3..1883223 100644
--- a/index.html
+++ b/index.html
@@ -14,10 +14,7 @@
14</head> 14</head>
15 15
16<body> 16<body>
17 <div id="app" v-if="config" :class="{ 17 <div id="app" v-if="config" :class="[isDark ? 'is-dark' : 'is-light']">
18 'is-dark': overrideDark === true,
19 'is-light': overrideDark === false
20 }">
21 <div id="bighead"> 18 <div id="bighead">
22 <section class="first-line"> 19 <section class="first-line">
23 <div v-cloak class="container"> 20 <div v-cloak class="container">
@@ -47,7 +44,7 @@
47 aria-label="Toggle dark mode" 44 aria-label="Toggle dark mode"
48 ><i class="fas fa-adjust"></i> 45 ><i class="fas fa-adjust"></i>
49 </a> 46 </a>
50 <a v-on:click="vlayout = !vlayout" class="icon-button navbar-item"><i 47 <a v-on:click="toggleLayout()" class="icon-button navbar-item"><i
51 :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a> 48 :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a>
52 <div class="search-bar"> 49 <div class="search-bar">
53 <label for="search" class="search-label"></label> 50 <label for="search" class="search-label"></label>