7x31/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-08-09 22:00:41 +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

12
src/components/HeartbeatBar.vue
View File

@@ -133,7 +133,7 @@ export default {
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
@import "../assets/vars.scss";
.wrap {
@@ -150,6 +150,10 @@ export default {
&.empty {
background-color: aliceblue;
.dark & {
background-color: #d0d3d5;
}
}
&.down {
@@ -168,4 +172,10 @@ export default {
}
}
.dark {
.hp-bar-big .beat.empty{
background-color: #848484;
}
}
</style>

12
src/components/NotificationDialog.vue
View File

@@ -325,7 +325,7 @@
<p>
Status:
<span v-if="appriseInstalled" class="text-primary">Apprise is installed</span>
<span v-else class="text-danger">Apprise is not installed. <a href="https://github.com/caronc/apprise">Read more</a></span>
<span v-else class="text-danger">Apprise is not installed. <a href="https://github.com/caronc/apprise" target="_blank">Read more</a></span>
</p>
</div>
</template>
@@ -512,3 +512,13 @@ export default {
},
}
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
.dark {
.modal-dialog .form-text, .modal-dialog p {
color: $dark-font-color;
}
}
</style>