NEW FEATURE: dark theme

Because sysadmins don't have a 9 to 5
This commit is contained in:
Jeroen De Meerleer 2021-11-09 15:54:16 +01:00
parent 6410c2e5c9
commit e36414b8c2
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
3 changed files with 124 additions and 2 deletions

View File

@ -1 +1,93 @@
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap/dist/css/bootstrap.css";
$light-bgcolor: #ffffff;
$light-textcolor: #212529;
$dark-bgcolor: #212529;
$dark-bordercolor: #656565;
$dark-textcolor: #ffffff;
body {
background-color: $light-bgcolor;
color: $light-textcolor;
}
.table {
}
@media (prefers-color-scheme: dark) {
body {
background-color: $dark-bgcolor;
color: $dark-textcolor;
}
.table {
color: $dark-textcolor
}
.modal-content {
background-color: $dark-bgcolor;
}
.form-control {
border: 1px solid $dark-bordercolor;
background-color: $dark-bgcolor;
color: $dark-textcolor;
&:disabled {
border: 1px solid $dark-bordercolor;
background-color: $dark-bordercolor;
color: $dark-textcolor;
}
&:focus {
border: 1px solid $dark-bordercolor;
background-color: $dark-bgcolor;
color: $dark-textcolor;
}
}
.tempus-dominus-widget {
background-color: $dark-bgcolor;
.date-container-decades, .date-container-years, .date-container-months, .date-container-days,
.time-container-clock, .time-container-hour, .time-container-minute, .time-container-second {
div:not(.no-highlight) {
&:hover {
background-color: $dark-bordercolor
}
&.old,
&.new {
color: $dark-bordercolor;
}
}
}
.date-container-days .dow {
color: $dark-bordercolor
}
.toolbar {
div:hover {
background-color: $dark-bordercolor;
}
}
}
.accordion-item {
background-color: $dark-bgcolor;
.accordion-button {
background-color: $dark-bordercolor;
color: $dark-textcolor;
&:not(.collapsed) {
background-color: $dark-bgcolor;
}
}
}
}

View File

@ -3,10 +3,39 @@
tr.norun td {
background-color: #f8d7da;
@media (prefers-color-scheme: dark) {
background-color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
color: #f8d7da;
.btn-outline-danger {
color: #f8d7da;
border-color: #f8d7da;
&:hover {
background-color: #f8d7da;
}
}
}
}
tr.running td {
background-color: #d4edda;
@media (prefers-color-scheme: dark) {
background-color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
color: #d4edda;
.btn-outline-success {
color: #d4edda;
border-color: #d4edda;
&:hover {
background-color: #d4edda;
}
}
}
}
.big-icon {

View File

@ -1 +1,2 @@
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap/dist/css/bootstrap.css";
@import "assets/scss/base";