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/

Author: samrocketman

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;
+  }
+}

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 $!

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" .}}

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">