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

Merge branch 'master' of philippdormann/uptime-kuma into philippdormann/uptime-kuma->feature/darkmode

Browse Source 
darkmode based on css variables. ref https://github.com/louislam/uptime-kuma/issues/21
This commit is contained in:
Philipp Dormann
2021-07-12 22:21:19 +02:00
parent 1259ff5368 010302395f
commit d9e2c230bf
7 changed files with 87 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/assets/app.scss
View File

@@ -1,16 +1,46 @@
@import "vars.scss";
@import "node_modules/bootstrap/scss/bootstrap";
html,
body,
input,
.modal-content {
background: var(--page-background);
color: var(--main-font-color);
}
a,
.table,
.nav-link {
color: var(--main-font-color);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: #0a0a0a;
}
.nav-link:hover,
.nav-link:focus {
color: #5cdd8b;
}
.form-control,
.form-control:focus,
.form-select,
.form-select:focus {
color: var(--main-font-color);
background-color: var(--background-4);
}
#app {
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif,
apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
}
.shadow-box {
overflow: hidden;
box-shadow: 0 15px 70px rgba(0, 0, 0, .1);
box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
padding: 10px;
border-radius: 10px;
&.big-padding {
padding: 20px;
}
@@ -22,10 +52,14 @@
}
.btn-primary {
color: white;
// color: white;
color: #0a0a0a;
&:hover, &:active, &:focus, &.active {
color: white;
&:hover,
&:active,
&:focus,
&.active {
color: #0a0a0a;
background-color: $highlight;
border-color: $highlight;
}
@@ -36,3 +70,8 @@
backdrop-filter: blur(3px);
}
@media (prefers-color-scheme: dark) {
a:hover {
color: #7ce8a4;
}
}