mirror of
https://github.com/ngoduykhanh/wireguard-ui.git
synced 2025-06-07 00:46:58 +03:00
8e4147ed20
This provides a lightweight dark mode. This is a work in progress. There's darker styles when the operating system is in dark mode. If you would like to try it out I am currently applying this patch in my [home assistant addon][ha-addon]. closes #580 Screenshots -----------       [ha-addon]: https://github.com/samrocketman/addons-homeassistant/
81 lines
2.3 KiB
CSS
81 lines
2.3 KiB
CSS
@media (prefers-color-scheme: dark) {
|
|
body, body.login-page, div.info-box {
|
|
background-color: #343a40;
|
|
color: #ffffff;
|
|
}
|
|
.main-header, .main-sidebar, .control-sidebar {
|
|
background-color: #212529;
|
|
color: #ffffff;
|
|
}
|
|
.content-wrapper {
|
|
background-color: #495057;
|
|
}
|
|
/* Add more style overrides for other AdminLTE elements as needed */
|
|
.card {
|
|
background-color: #343a40;
|
|
color: #ffffff;
|
|
}
|
|
.card-header {
|
|
background-color: #212529;
|
|
color: #ffffff;
|
|
}
|
|
a {
|
|
color: #bb86fc;
|
|
}
|
|
a:hover {
|
|
color: #3700b3;
|
|
}
|
|
.modal-content {
|
|
background-color: #212529;
|
|
color: #ffffff;
|
|
}
|
|
/* Example for table elements */
|
|
.table {
|
|
color: #ffffff;
|
|
}
|
|
.table thead th {
|
|
border-bottom-color: #6c757d;
|
|
color: #ffffff;
|
|
}
|
|
.table-bordered, .table-bordered td, .table-bordered th {
|
|
border-color: #6c757d;
|
|
}
|
|
.table-striped tbody tr:nth-of-type(odd) {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
/* input boxes */
|
|
.modal-content > input, .modal-content > input::placeholder, div.tagsinput, .modal-content > select, input.form-control {
|
|
background-color: #495057;
|
|
color: #ffffff;
|
|
}
|
|
/* login page */
|
|
html body.login-page div.login-box div.card div.card-body.login-card-body {
|
|
background-color: #202326;
|
|
color: #bfbfbf;
|
|
}
|
|
html body.login-page div.login-box div.card div.card-body.login-card-body form div.row div.col-8 div.icheck-primary label {
|
|
color: #0069d9;
|
|
}
|
|
/* disabled forms */
|
|
.form-control:disabled, .form-control[readonly] {
|
|
color: #000000;
|
|
}
|
|
/*
|
|
.modal-content > input#client_allowed_ips_tag {
|
|
color: #ffffff;
|
|
}*/
|
|
/* mobile hamburger */
|
|
.navbar-light .navbar-nav .nav-link {
|
|
color: rgba(255, 255, 255, .75);
|
|
}
|
|
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
|
|
color: #007bff;
|
|
}
|
|
html body.login-page div.login-box div.login-logo a {
|
|
color: #dc3545;
|
|
}
|
|
/* subnet range dropdown */
|
|
body.sidebar-mini.modal-open span.select2-container.select2-container--default.select2-container--open span.select2-dropdown.select2-dropdown--below span.select2-results ul#select2-subnet_ranges-results.select2-results__options li#select2-subnet_ranges-result-5jm4-DMZ Network.select2-results__option {
|
|
color: #000000;
|
|
}
|
|
}
|