From 8e4147ed206709ebf388c28fbc8e645ab33e4dc9 Mon Sep 17 00:00:00 2001
From: Sam Gleske <sam.mxracer@gmail.com>
Date: Wed, 7 May 2025 16:50:03 -0400
Subject: [PATCH] Dark mode

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/
---
 custom/css/darkmode.css | 81 +++++++++++++++++++++++++++++++++++++++++
 init.sh                 |  2 +-
 templates/base.html     |  2 +
 templates/login.html    |  2 +
 4 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 custom/css/darkmode.css

diff --git a/custom/css/darkmode.css b/custom/css/darkmode.css
new file mode 100644
index 0000000..fa8f687
--- /dev/null
+++ b/custom/css/darkmode.css
@@ -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;
+  }
+}
diff --git a/init.sh b/init.sh
index 08b98e8..a66e157 100755
--- a/init.sh
+++ b/init.sh
@@ -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 $!
diff --git a/templates/base.html b/templates/base.html
index 3640699..9737961 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -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" .}}
diff --git a/templates/login.html b/templates/login.html
index c0a96b9..d2aa167 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -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">