TyleoDvDelaware3217/Kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-07-19 23:44:04 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

working switch theme button and tuning dark theme

Browse source
This commit is contained in:
LouisLam 2021-08-07 12:56:38 +08:00
parent fbbdb1601c
commit ca7ecc4239
5 changed files with 42 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/assets/app.scss
View file

@ -38,6 +38,13 @@
// Dark Theme override here // Dark Theme override here
.dark { .dark {
background-color: #090C10;
color: $dark-font-color;
.shadow-box {
background-color: #0D1117;
}
a:hover { a:hover {
color: #7ce8a4; color: #7ce8a4;
} }
@ -81,4 +88,8 @@
color: var(--main-font-color); color: var(--main-font-color);
background-color: var(--background-4); background-color: var(--background-4);
} }
.form-control {
border-color: #21262D;
}
} }

13
src/assets/vars.scss
View file

@ -7,18 +7,15 @@ $border-radius: 50rem;
$highlight: #7ce8a4; $highlight: #7ce8a4;
$highlight-white: #e7faec; $highlight-white: #e7faec;
.dark {
$primary: #5cdd8b;
$danger: #dc3545;
$warning: #dca235;
:root { $dark-font-color: #b1b8c0;
.dark {
--page-background: #0a0a0a; --page-background: #0a0a0a;
--background-secondary: #656565; --background-secondary: #656565;
--background-4: #313131; --background-4: #070A10;
--background-ternary: #a7a7a7; --background-ternary: #a7a7a7;
--background-sidebar-active: #777777; --background-sidebar-active: #777777;
--background-navbar: #333333; --background-navbar: #333333;
--main-font-color: #e4e4e4; --main-font-color: $dark-font-color;
}
} }

21
src/layouts/Layout.vue
View file

@ -143,12 +143,6 @@ export default {
} }
} }
.dark {
.bottom-nav {
background-color: var(--background-navbar);
}
}
.title { .title {
font-weight: bold; font-weight: bold;
} }
@ -172,4 +166,19 @@ footer {
text-align: center; text-align: center;
} }
.dark {
header {
background-color: #161B22;
border-bottom-color: #161B22 !important;
span {
color: #F0F6FC;
}
}
.bottom-nav {
background-color: var(--background-navbar);
}
}
</style> </style>

7
src/mixins/theme.js
View file

@ -23,10 +23,9 @@ export default {
} }
}, },
methods: { watch: {
changeTheme(name) { userTheme(to, from) {
localStorage.theme = name; localStorage.theme = to;
this.userTheme = name;
} }
} }
} }

6
src/pages/Settings.vue
View file

@ -22,13 +22,13 @@
<div class="mb-3"> <div class="mb-3">
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group"> <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input id="btncheck1" type="radio" class="btn-check" name="theme" autocomplete="off"> <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> <label class="btn btn-outline-primary" for="btncheck1">Light</label>
<input id="btncheck2" type="radio" class="btn-check" name="theme" autocomplete="off"> <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> <label class="btn btn-outline-primary" for="btncheck2">Dark</label>
<input id="btncheck3" type="radio" class="btn-check" name="theme" autocomplete="off"> <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> <label class="btn btn-outline-primary" for="btncheck3">Auto</label>
</div> </div>
</div> </div>