7x31/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-08-12 02:27:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

FEAT: darkmode (#155)

Browse Source 
* darkmode fixes

* fix: darkmode: empty beats in active/ hovered state

* fix: color for empty beats

* fix: navbar background color

* Update src/assets/vars.scss

Co-authored-by: Adam Stachowicz <saibamenppl@gmail.com>

* Update src/assets/app.scss

Co-authored-by: Adam Stachowicz <saibamenppl@gmail.com>

* wip, split dark theme style by .dark and store light theme to normal

* add back missing css

* working switch theme button and tuning dark theme

* finish dark theme

Co-authored-by: Adam Stachowicz <saibamenppl@gmail.com>
Co-authored-by: LouisLam <louislam@users.noreply.github.com>
This commit is contained in:
Philipp Dormann
2021-08-08 07:47:29 +02:00
committed by GitHub
parent d5b40dfebf
commit 123fca43a1
15 changed files with 319 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/Settings.vue
View File

@@ -20,6 +20,19 @@
</select>
</div>
<div class="mb-3">
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input id="btncheck1" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="light">
<label class="btn btn-outline-primary" for="btncheck1">Light</label>
<input id="btncheck2" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="dark">
<label class="btn btn-outline-primary" for="btncheck2">Dark</label>
<input id="btncheck3" v-model="$root.userTheme" type="radio" class="btn-check" name="theme" autocomplete="off" value="auto">
<label class="btn btn-outline-primary" for="btncheck3">Auto</label>
</div>
</div>
<div>
<button class="btn btn-primary" type="submit">
Save
@@ -67,7 +80,7 @@
</template>
</div>
<div class="col-md-6">
<div class="notification-list col-md-6">
<div v-if="$root.isMobile" class="mt-3" />
<h2>Notifications</h2>
@@ -201,8 +214,17 @@ export default {
}
</script>
<style scoped>
.shadow-box {
padding: 20px;
<style lang="scss" scoped>
@import "../assets/vars.scss";
.shadow-box {
padding: 20px;
}
.dark {
.list-group-item {
background-color: $dark-bg2;
color: $dark-font-color;
}
}
</style>