YakumoLabs/gatus
4
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Close #99: Implement dark theme

Browse Source
This commit is contained in:
TwinProduction
2021-05-09 12:59:22 -04:00
parent 857ad584e7
commit 2a632e8f87
12 changed files with 86 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
web/app/src/components/Settings.vue
View File

@@ -1,17 +1,23 @@
<template>
<div id="settings">
<div class="flex bg-gray-200 rounded border border-gray-300 shadow">
<div class="text-sm text-gray-600 rounded-xl py-1 px-2">
&#x21bb;
<div class="flex">
<div class="flex bg-gray-200 border-gray-300 rounded border shadow dark:text-gray-200 dark:bg-gray-800 dark:border-gray-500">
<div class="text-xs text-gray-600 rounded-xl py-1 px-2 dark:text-gray-200">
&#x21bb;
</div>
<select class="text-center text-gray-500 text-xs dark:text-gray-200 dark:bg-gray-800 border-r border-l border-gray-300 dark:border-gray-500" id="refresh-rate" ref="refreshInterval" @change="handleChangeRefreshInterval">
<option value="10" :selected="refreshInterval === 10">10s</option>
<option value="30" :selected="refreshInterval === 30">30s</option>
<option value="60" :selected="refreshInterval === 60">1m</option>
<option value="120" :selected="refreshInterval === 120">2m</option>
<option value="300" :selected="refreshInterval === 300">5m</option>
<option value="600" :selected="refreshInterval === 600">10m</option>
</select>
<button @click="toggleDarkMode" class="text-xs p-1">
<slot v-if="darkMode">☀</slot>
<slot v-else>🌙</slot>
</button>
</div>
<select class="text-center text-gray-500 text-sm" id="refresh-rate" ref="refreshInterval" @change="handleChangeRefreshInterval">
<option value="10" :selected="refreshInterval === 10">10s</option>
<option value="30" :selected="refreshInterval === 30">30s</option>
<option value="60" :selected="refreshInterval === 60">1m</option>
<option value="120" :selected="refreshInterval === 120">2m</option>
<option value="300" :selected="refreshInterval === 300">5m</option>
<option value="600" :selected="refreshInterval === 600">10m</option>
</select>
</div>
</div>
</template>
@@ -36,6 +42,24 @@ export default {
this.refreshData();
clearInterval(this.refreshIntervalHandler);
this.setRefreshInterval(this.$refs.refreshInterval.value);
},
toggleDarkMode() {
if (localStorage.theme === 'dark') {
localStorage.theme = 'light';
} else {
localStorage.theme = 'dark';
}
this.applyTheme();
},
applyTheme() {
console.log(localStorage.theme, 'theme' in localStorage);
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
this.darkMode = true;
document.documentElement.classList.add('dark');
} else {
this.darkMode = false;
document.documentElement.classList.remove('dark');
}
}
},
created() {
@@ -43,6 +67,8 @@ export default {
this.refreshInterval = 60;
}
this.setRefreshInterval(this.refreshInterval);
// dark mode
this.applyTheme();
},
unmounted() {
clearInterval(this.refreshIntervalHandler);
@@ -51,6 +77,7 @@ export default {
return {
refreshInterval: sessionStorage.getItem('gatus:refresh-interval') < 10 ? 60 : parseInt(sessionStorage.getItem('gatus:refresh-interval')),
refreshIntervalHandler: 0,
darkMode: false
}
},
}