jostreff/wireguard-ui
1
0
Fork 0
mirror of https://github.com/ngoduykhanh/wireguard-ui.git synced 2025-06-07 00:46:58 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Dark mode

Browse source 
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
-----------

![image](https://github.com/user-attachments/assets/56a66d64-b6e6-4dea-b1dd-5c5d40440f6f)

![Image](https://github.com/user-attachments/assets/899a76b5-8a9a-4a8a-8963-b3bdd267985a)

![Image](https://github.com/user-attachments/assets/c3acdc84-e44e-4374-af04-e5fa1b3e2e46)

![Image](https://github.com/user-attachments/assets/f37d0dd3-2970-4b27-8163-5894956b248d)

![image](https://github.com/user-attachments/assets/968e14ca-445b-4abd-89c8-69bd143e93a0)

![Image](https://github.com/user-attachments/assets/d0000ce5-0325-480d-be98-3dd0f5dcafe2)

[ha-addon]: https://github.com/samrocketman/addons-homeassistant/
This commit is contained in:
Sam Gleske 2025-05-07 16:50:03 -04:00
parent 2fdafd34ca
commit 8e4147ed20
4 changed files with 86 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

81
custom/css/darkmode.css Normal file
View file

@ -0,0 +1,81 @@
@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;
}
}

2
init.sh
View file

@ -18,6 +18,6 @@ case $WGUI_MANAGE_RESTART in (1|t|T|true|True|TRUE)
done &
esac
./wg-ui &
trap 'kill 0; exit 0;' SIGTERM INT EXIT
wait $!

2
templates/base.html
View file

@ -27,6 +27,8 @@
<link rel="stylesheet" href="{{.basePath}}/static/dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
<!-- Custom css -->
<link rel="stylesheet" href="{{.basePath}}/static/custom/css/darkmode.css">
<!-- START: On page css -->
{{template "top_css" .}}

2
templates/login.html
View file

@ -20,6 +20,8 @@
<link rel="stylesheet" href="{{.basePath}}/static/dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
<!-- Custom css -->
<link rel="stylesheet" href="{{.basePath}}/static/custom/css/darkmode.css">
</head>
<body class="hold-transition login-page">