offline: false,
filter: '',
vlayout: true,
- overrideDark: null
+ isDark: null
},
created: function () {
let that = this;
+
+ this.isDark = 'overrideDark' in localStorage ?
+ JSON.parse(localStorage.overrideDark) : matchMedia("(prefers-color-scheme: dark)").matches;
+ if ('vlayout' in localStorage) {
+ this.vlayout = JSON.parse(localStorage.vlayout)
+ }
+
this.checkOffline();
that.getConfig().then(function (config) {
that.config = config;
}
}, false);
},
- computed: {
- isDark: function() {
- return this.overrideDark !== null
- ? this.overrideDark
- : matchMedia("(prefers-color-scheme: dark)").matches;
- }
- },
methods: {
checkOffline: function () {
let that = this;
});
},
toggleTheme: function() {
- this.overrideDark = !this.isDark;
- }
+ this.isDark = !this.isDark;
+ localStorage.overrideDark = this.isDark;
+ },
+ toggleLayout: function() {
+ this.vlayout = !this.vlayout;
+ localStorage.vlayout = this.vlayout;
+ },
}
});
</head>
<body>
- <div id="app" v-if="config" :class="{
- 'is-dark': overrideDark === true,
- 'is-light': overrideDark === false
- }">
+ <div id="app" v-if="config" :class="[isDark ? 'is-dark' : 'is-light']">
<div id="bighead">
<section class="first-line">
<div v-cloak class="container">
aria-label="Toggle dark mode"
><i class="fas fa-adjust"></i>
</a>
- <a v-on:click="vlayout = !vlayout" class="icon-button navbar-item"><i
+ <a v-on:click="toggleLayout()" class="icon-button navbar-item"><i
:class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a>
<div class="search-bar">
<label for="search" class="search-label"></label>
projects / github / bastienwirtz / homer.git / commitdiff
