diff options
| -rw-r--r-- | app.js | 25 | ||||
| -rw-r--r-- | index.html | 7 |
2 files changed, 17 insertions, 15 deletions
| @@ -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 | ||
| @@ -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> |