Merge pull request #853 from johnwang16/auto_dark_mode

Allow auto light/dark mode matching user OS setting by @johnwang16  🙏

docker-compose.yml

@@ -64,7 +64,7 @@ services:
       # DELETE END anyone trying to use this file: comment out / delete ABOVE lines, they are only for development purposes
       # ---------------------------------------------------------------------------
     environment:
-      # - APP_CONF_OVERRIDE={"SCAN_SUBNETS":"['192.168.1.0/24 --interface=eth1']","UI_dark_mode":"True"}
+      # - APP_CONF_OVERRIDE={"SCAN_SUBNETS":"['192.168.1.0/24 --interface=eth1']","UI_theme":"Dark"}
       - TZ=${TZ}
       - PORT=${PORT}      
       # ❗ DANGER ZONE BELOW - Setting ALWAYS_FRESH_INSTALL=true will delete the content of the /db & /config folders

dockerfiles/README.md

@@ -41,7 +41,7 @@ docker run -d --rm --network=host \
 | `PORT`      |Port of the web interface  |  `20211` |
 | `LISTEN_ADDR`      |Set the specific IP Address for the listener address for the nginx webserver (web interface). This could be useful when using multiple subnets to hide the web interface from all untrusted networks. |  `0.0.0.0` |
 |`TZ` |Time zone to display stats correctly. Find your time zone [here](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)  |  `Europe/Berlin` |
-|`APP_CONF_OVERRIDE` | JSON override for settings, e.g. `{"SCAN_SUBNETS":"['192.168.1.0/24 --interface=eth1']","UI_dark_mode":"True"}` (Experimental 🧪)  |  `N/A` |
+|`APP_CONF_OVERRIDE` | JSON override for settings, e.g. `{"SCAN_SUBNETS":"['192.168.1.0/24 --interface=eth1']","UI_theme":"Dark"}` (Experimental 🧪)  |  `N/A` |
 |`ALWAYS_FRESH_INSTALL` | If `true` will delete the content of the `/db` & `/config` folders. For testing purposes. Can be coupled with [watchtower](https://github.com/containrrr/watchtower) to have an always freshly installed `netalertx`/`netalertx-dev` image.   |    `N/A` |
 
 ### Docker paths
@@ -237,4 +237,4 @@ Big thanks to <a href="https://github.com/Macleykun">@Macleykun</a> & for help a
 - Bitcoin: `1N8tupjeCK12qRVU2XrV17WvKK7LCawyZM`
 - Ethereum: `0x6e2749Cb42F4411bc98501406BdcD82244e3f9C7`
 
-> 📧 Email me at [jokob@duck.com](mailto:jokob@duck.com?subject=NetAlertX) if you want to get in touch or if I should add other sponsorship platforms.
+> 📧 Email me at [jokob@duck.com](mailto:jokob@duck.com?subject=NetAlertX) if you want to get in touch or if I should add other sponsorship platforms.

front/css/app.css

@@ -212,6 +212,12 @@
 {
     line-height: 30px;
 }
+
+body
+{
+    background-image: url('../img/background.png');
+}
+
 /* -----------------------------------------------------------------------------
    Customized Main Menu
 ----------------------------------------------------------------------------- */

front/css/dark-patch.css

@@ -17,6 +17,10 @@ html {
   background-color: #353c42;
 }
 
+body {
+  background-image: url('../img/boxed-bg-dark.png') !important;
+}
+
 body, .bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
 
   background-color: #353c42 !important;

front/css/system-dark-patch-cal.css

@@ -0,0 +1,21 @@
+@media (prefers-color-scheme: dark) {
+
+  .fc-sat {  
+  background-color: #444D56; }
+  .fc-sun {  
+  background-color: #444D56; }
+  .fc-today {
+    background-color: #8D9AAC !important;
+    border: none !important;
+  } 
+  .fc-cell-content {
+	  background-color: #272c30;
+  }
+  .fc-widget-header {
+	  background-color: #353c42;
+  }
+  .fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead{
+	  border-color: #353c42 !important;
+  }
+
+}

front/css/system-dark-patch.css

@@ -0,0 +1,737 @@
+/* Pi-hole: A black hole for Internet advertisements
+*  (c) 2020 Pi-hole, LLC (https://pi-hole.net)
+*  Network-wide ad blocking via your own hardware.
+*
+*  This file is copyright under the latest version of the EUPL.
+*  Please see LICENSE file for your rights under this license.
+*
+*  The colors used in this theme has been inspired by
+*  https://github.com/anvyst/adminlte-skin-midnight
+*
+* Additional fixes For Pi.Alert UI by leiweibau */
+
+@media (prefers-color-scheme: dark) {
+    
+  :root {
+    --datatable-bgcolor: rgba(64, 76, 88, 0.8);
+  }
+  html {
+    background-color: #353c42;
+  }
+
+  body {
+    background-image: url('../img/boxed-bg-dark.png') !important;
+  }
+
+  body, .bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
+
+    background-color: #353c42 !important;
+    color: #bec5cb !important;
+  }
+  h4 {
+    color: #44def1;
+  }
+  .content-header > .breadcrumb > li > a {
+    color: #bec5cb;
+  }
+  .table > thead > tr > th,
+  .table > tbody > tr > th,
+  .table > tfoot > tr > th,
+  .table > thead > tr > td,
+  .table > tbody > tr > td,
+  .table > tfoot > tr > td {
+    border-top: 0;
+  }
+  .table > thead > tr.odd,
+  .table > tbody > tr.odd,
+  .table > tfoot > tr.odd {
+    background-color: #2a2f34;
+  }
+  .table > thead > tr.odd:hover,
+  .table > tbody > tr.odd:hover,
+  .table > tfoot > tr.odd:hover,
+  .table > thead > tr.even:hover,
+  .table > tbody > tr.even:hover,
+  .table > tfoot > tr.even:hover {
+    background-color: #1e2226;
+  }
+  .table-bordered,
+  .table-bordered > thead > tr > th,
+  .table-bordered > tbody > tr > th,
+  .table-bordered > tfoot > tr > th,
+  .table-bordered > thead > tr > td,
+  .table-bordered > tbody > tr > td,
+  .table-bordered > tfoot > tr > td {
+    border: 1px solid #353c42;
+  }
+  .dataTables_wrapper input[type="search"] {
+    border-radius: 4px;
+    background-color: #353c42;
+    border: 0;
+    color: #bec5cb;
+  }
+  .dataTables_paginate .pagination li > a {
+    background-color: #353c42;
+    border-color: #353c42;
+  }
+  .pagination > .disabled > a,
+  .pagination > .disabled > a:focus,
+  .pagination > .disabled > a:hover,
+  .pagination > .disabled > span,
+  .pagination > .disabled > span:focus,
+  .pagination > .disabled > span:hover {
+    cursor: not-allowed;
+    color: #bec5cb;
+    background-color: #353c42;
+    border-color: #353c42;
+  }
+  .pagination > li > a:focus,
+  .pagination > li > a:hover,
+  .pagination > li > span:focus,
+  .pagination > li > span:hover {
+    z-index: 2;
+    color: #bec5cb;
+    background-color: #54606b;
+    border-color: #54606b;
+  }
+  .wrapper,
+  .main-sidebar,
+  .left-side {
+    background-color: #272c30;
+  }
+  .user-panel > .info,
+  .user-panel > .info > a {
+    color: #fff;
+  }
+  .sidebar-menu > li.header {
+    color: #556068;
+    background-color: #1e2225;
+  }
+  .sidebar-menu > li > a {
+    border-left: 3px solid transparent;
+  }
+  .sidebar-menu > li:hover > a,
+  .sidebar-menu > li > a:focus,
+  .sidebar-menu > li.active > a {
+    color: #fff;
+    background-color: #22272a;
+    border-color: #3c8dbc;
+  }
+  .sidebar-menu > li > .treeview-menu {
+    margin: 0 1px;
+    background-color: #32393e;
+  }
+  .sidebar a {
+    color: #bec5cb;
+  }
+  .sidebar a:hover {
+    text-decoration: none;
+  }
+  .treeview-menu > li > a {
+    color: #949fa8;
+  }
+  .treeview-menu > li.active > a,
+  .treeview-menu > li > a:hover,
+  .treeview-menu > li > a:focus {
+    color: #fff;
+  }
+  .sidebar-form {
+    border-radius: 3px;
+    border: 1px solid #3e464c;
+    margin: 10px;
+  }
+  .sidebar-form input[type="text"],
+  .sidebar-form .btn {
+    box-shadow: none;
+    background-color: #3e464c;
+    border: 1px solid transparent;
+    height: 35px;
+  }
+  .sidebar-form input[type="text"] {
+    color: #666;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 2px;
+  }
+  .sidebar-form input[type="text"]:focus,
+  .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+    background-color: #fff;
+    color: #666;
+  }
+  .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+    border-left-color: #fff;
+  }
+  .sidebar-form .btn {
+    color: #999;
+    border-top-left-radius: 0;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 0;
+  }
+  .box,
+  .box-footer,
+  .info-box,
+  .box-comment,
+  .comment-text,
+  .comment-text .username {
+    color: #bec5cb;
+    background-color: #272c30;
+  }
+  .box-comments .box-comment {
+    border-bottom-color: #353c42;
+  }
+  .box-footer {
+    border-top: 1px solid #353c42;
+  }
+  .box-header.with-border {
+    border-bottom: 1px solid #353c42;
+  }
+  .box-solid,
+  .box {
+    border: 1px solid #272c30;
+  }
+  .box-solid > .box-header,
+  .box > .box-header {
+    color: #bec5cb;
+  }
+  .box-solid > .box-header .btn,
+  .box > .box-header .btn {
+    color: #bec5cb;
+  }
+  .box.box-info,
+  .box.box-primary,
+  .box.box-success,
+  .box.box-warning,
+  .box.box-danger {
+    border-top-width: 3px;
+  }
+  .main-header .navbar {
+    background-color: #272c30;
+  }
+  .main-header .navbar .nav > li > a,
+  .main-header .navbar .nav > li > .navbar-text {
+    color: #bec5cb;
+    max-height: 50px;
+  }
+  .main-header .navbar .nav > li > a:hover,
+  .main-header .navbar .nav > li > a:active,
+  .main-header .navbar .nav > li > a:focus,
+  .main-header .navbar .nav .open > a,
+  .main-header .navbar .nav .open > a:hover,
+  .main-header .navbar .nav .open > a:focus,
+  .main-header .navbar .nav > .active > a {
+    background-color: rgba(0, 0, 0, 0.1);
+    color: #f6f6f6;
+  }
+  .main-header .navbar .sidebar-toggle {
+    color: #bec5cb;
+  }
+  .main-header .navbar .sidebar-toggle:hover {
+    color: #f6f6f6;
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  .timeline li .timeline-item {
+    color: #bec5cb;
+    background-color: #272c30;
+    border-color: #353c42;
+  }
+  .timeline li .timeline-header {
+    border-bottom-color: #353c42;
+  }
+  .nav-stacked > li > a {
+    color: #bec5cb;
+  }
+  .nav-stacked > li > a:hover {
+    color: white;
+    background-color: #1e2226;
+  }
+  .content-wrapper,
+  .right-side {
+    background-color: #353c42;
+  }
+  .main-footer,
+  .nav-tabs-custom {
+    background-color: #272c30;
+    border-top-color: #353c42;
+    color: #bec5cb;
+  }
+  .main-footer .nav-tabs,
+  .nav-tabs-custom .nav-tabs {
+    background-color: #30383f;
+    border-bottom-color: #2f363b;
+  }
+  .main-footer .tab-content,
+  .nav-tabs-custom .tab-content {
+    background-color: #30383f;
+  }
+  .nav-tabs-custom > .nav-tabs {
+    background: rgba(64, 72, 80, 0.666);
+  }
+  .nav-tabs-custom > .nav-tabs > li {
+    margin-right: 1px;
+    color: #bec5cb;
+  }
+  .nav-tabs-custom > .nav-tabs > li.active > a,
+  .nav-tabs-custom > .nav-tabs > li.active:hover > a {
+    border-left-color: #30383f;
+    border-right-color: #30383f;
+    background-color: #30383f;
+    color: #bec5cb;
+  }
+  .nav-tabs-custom > .nav-tabs > li:not(.active):hover {
+    border-top-color: #d2d6de;
+    background-color: transparent;
+  }
+  .nav-tabs-custom > .nav-tabs > li > a {
+    color: #8e959b;
+  }
+  .nav-tabs-custom > .nav-tabs > li > a:focus {
+    color: #3c8dbc;
+  }
+  .nav-tabs-custom > .nav-tabs > li:hover > a,
+  .nav-tabs-custom > .nav-tabs > li.active:hover > a {
+    background-color: #353c42;
+    color: #bec5cb;
+  }
+
+  .list-group {
+    color: #bec5cb;
+    background-color: #272c30;
+  }
+  .list-group .list-group-item {
+    border-color: #353c42;
+    background-color: #272c30;
+  }
+  .input-group .input-group-addon {
+    border-right: 1px solid #272c30;
+  }
+  .select2 .select2-selection {
+    background-color: #353c42;
+    color: #bec5cb;
+    border: 1px solid #353c42;
+  }
+  .select2 .select2-selection .select2-container--default,
+  .select2 .select2-selection .select2-selection--single,
+  .select2 .select2-selection .select2-selection--multiple,
+  .select2 .select2-selection .select2-selection__rendered {
+    color: #bec5cb;
+  }
+  .select2-dropdown {
+    background-color: #353c42;
+    color: #bec5cb;
+    border: 1px solid #353c42;
+  }
+  .select2-dropdown .select2-search__field {
+    background-color: #272c30;
+    color: #bec5cb;
+    border: 1px solid #353c42;
+  }
+  .select2-container--default.select2-container--open {
+    background-color: #272c30;
+  }
+
+  .layout-boxed {
+    background: url("../../img/boxed-bg-dark.png") repeat fixed;
+  }
+  .not-used {
+    background-color: #eee;
+  }
+  .not-used:hover {
+    background-color: #c5c5c5;
+  }
+  .used {
+    background-color: #fff;
+  }
+  .used:hover {
+    background-color: #ddd;
+  }
+
+  .graphs-grid {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  .graphs-ticks {
+    color: #b8c7ce;
+  }
+  .queries-permitted {
+    background-color: #00a65a;
+  }
+  .queries-blocked {
+    background-color: #999;
+  }
+  .progress {
+    background-color: #333;
+  }
+
+  .bg-green {
+    background-color: #005c32 !important;
+  }
+  .bg-aqua {
+    background-color: #007997 !important;
+  }
+  .bg-yellow {
+    background-color: #b1720c !important;
+  }
+  .bg-red {
+    background-color: #913225 !important;
+  }
+
+  code,
+  pre {
+    padding: 2px 4px;
+    font-size: 90%;
+    color: #bec5cb;
+    background-color: #353c42;
+    border-radius: 4px;
+  }
+
+  /* Used in the Query Log table */
+  .text-green-light {
+    color: #5ca314 !important;
+  }
+  .text-green {
+    color: #00aa60 !important;
+  }
+  .text-orange {
+    color: #b1720c !important;
+  }
+  .text-red {
+    color: #bd2c19 !important;
+  }
+  .text-vivid-blue {
+    color: #007997 !important;
+  }
+  td.highlight {
+    background-color: rgba(255, 204, 0, 0.333);
+  }
+  .btn-default {
+    box-shadow: none;
+    background-color: #3e464c;
+    color: #bec5cb;
+    border: 1px solid #353c42;
+  }
+
+  /* Used in debug log page */
+  .log-red {
+    color: #ff4038;
+  }
+  .log-green {
+    color: #4c4;
+  }
+  .log-yellow {
+    color: #fb0;
+  }
+  .log-blue {
+    color: #48f;
+  }
+  .log-purple {
+    color: #b8e;
+  }
+  .log-cyan {
+    color: #0df;
+  }
+  .log-gray {
+    color: #999;
+  }
+
+  #output {
+    border-color: #505458;
+    background: #272c30;
+  }
+
+  /* Used by the long-term pages */
+  .daterangepicker {
+    background-color: #3e464c;
+    border-radius: 4px;
+    border: 1px solid #353c42;
+  }
+  .daterangepicker .ranges li:hover {
+    background-color: #353c42;
+  }
+  .daterangepicker .ranges li.active {
+    background-color: #1e2226; /* Color also used in table pagination */
+  }
+  .daterangepicker .calendar-table {
+    background-color: #3e464c;
+    border-radius: 4px;
+    border: 1px solid #353c42;
+  }
+  .daterangepicker td.off,
+  .daterangepicker td.off.in-range,
+  .daterangepicker td.off.start-date,
+  .daterangepicker td.off.end-date {
+    background-color: #485158;
+  }
+  .daterangepicker td.available:hover,
+  .daterangepicker th.available:hover {
+    background-color: #1e2226;
+  }
+  .daterangepicker td.active,
+  .daterangepicker td.active:hover,
+  .daterangepicker td.in-range:hover {
+    background-color: #225e92;
+  }
+  .daterangepicker td.in-range {
+    background-color: #1e2226;
+    color: #bec5cb;
+  }
+  input,
+  select,
+  select.form-control,
+  .form-group .input-group-addon,
+  .input-group .input-group-addon,
+  .form-group input,
+  .input-group input,
+  .form-group textarea,
+  .input-group textarea,
+  .daterangepicker select.hourselect,
+  .daterangepicker select.minuteselect,
+  .daterangepicker select.secondselect,
+  .daterangepicker select.ampmselect,
+  .form-control,
+  div.dataTables_wrapper div.dataTables_length select {
+    background-color: #353c42;
+    color: #bec5cb;
+    border: 1px solid #3d444b;
+  }
+  .form-control[disabled],
+  .form-control[readonly],
+  fieldset[disabled] .form-control {
+    background-color: #353c42;
+    opacity: 1;
+  }
+  .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
+    background-color: #4c5761;
+    color: #bec5cb;
+    border: 1px solid #171c20;
+  }
+  .table-striped > tbody > tr:nth-of-type(2n + 1) {
+    background-color: #2d343a;
+  }
+  .panel,
+  .panel-body,
+  .panel-default > .panel-heading {
+    background-color: #3e464c;
+    border-radius: 4px;
+    border: 1px solid #353c42;
+    color: #bec5cb;
+  }
+  .box.box-solid.box-info,
+  .box.box-solid.box-info > .box-header {
+    color: #bec5cb;
+    background-color: #367fa9 !important;
+    border: 1px solid #367fa9;
+  }
+  input[type="password"]::-webkit-credentials-auto-fill-button {
+    background: #bfc5ca;
+  }
+  input[type="password"]::-webkit-caps-lock-indicator {
+    filter: invert(100%);
+  }
+
+  .network-never {
+    background-color: #661b02;
+  }
+  .network-recent {
+    background-color: #114100;
+  }
+  .network-old {
+    background-color: #525200;
+  }
+  .network-older {
+    background-color: #502b00;
+  }
+  .network-gradient {
+    background-image: linear-gradient(to right, #114100 0%, #525200 100%);
+  }
+
+  .icheckbox_polaris,
+  .icheckbox_futurico,
+  .icheckbox_minimal-blue {
+    margin-right: 10px;
+  }
+  .iradio_polaris,
+  .iradio_futurico,
+  .iradio_minimal-blue {
+    margin-right: 8px;
+  }
+
+  /* Overlay box with spinners as shown during data collection for graphs */
+  .box .overlay,
+  .overlay-wrapper .overlay {
+    z-index: 50;
+    background-color: rgba(53, 60, 66, 0.733);
+    border-radius: 3px;
+  }
+  .box .overlay > .fa,
+  .overlay-wrapper .overlay > .fa,
+  .navbar-nav > .user-menu > .dropdown-menu > .user-body a {
+    color: #bec5cb !important;
+  }
+
+  .navbar-nav > .user-menu > .dropdown-menu > .user-footer {
+    background-color: #353c42bb;
+    padding: 10px;
+  }
+
+  .modal-content {
+    background: #272c30;
+  }
+  .modal-header {
+    border-bottom-color: #353c42;
+  }
+  .modal-footer {
+    border-top-color: #353c42;
+  }
+  .close {
+    color: #383838;
+  }
+
+  /*** Fix login input visual misalignment ***/
+  #loginform,
+  #loginform input {
+    color: rgb(120, 127, 133);
+  }
+
+  .login-options input,
+  .login-options [class*="icheck-"] > input:first-child + input[type="hidden"] + label::before,
+  .login-options [class*="icheck-"] > input:first-child + label::before {
+    background: none;
+    border-color: rgb(120, 127, 133);
+  }
+
+  /*** Additional fixes For Pi.Alert UI ***/
+  .small-box {
+      border-radius: 10px;
+      border-top: 0px;
+  }
+  .pa-small-box-aqua .inner {
+    background-color: rgb(45,108,133);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+  .pa-small-box-green .inner {
+    background-color: rgb(31,76,46);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+  .pa-small-box-yellow .inner {
+    background-color: rgb(151,104,37);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+  .pa-small-box-red .inner {
+    background-color: rgb(120,50,38);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+  .pa-small-box-gray .inner {
+    background-color: #777;
+    /* color: rgba(20,20,20,30%); */
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+  .pa-small-box-gray .inner h3 {
+    color:  #bbb;
+  }
+  .text-gray-20 {
+    color: rgba(220,220,220,30%);
+  }
+  .bg-gray {
+    background-color: #888888 !important;
+  }
+  .badge.bg-green {
+      background-color: #00A000 !important;
+  }
+  .badge.bg-gray {
+      background-color: #888 !important;
+  }
+  #txtRecord {
+    background-color: #353c42;
+    border-color: #888888;
+  }
+  .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
+    background-color: rgb(189,192,198);
+    color: #444;
+  }
+
+  .db_info_table_cell:nth-child(1) {background: #272c30}
+  .db_info_table_cell:nth-child(2) {background: #272c30}
+  .db_tools_table_cell_a:nth-child(1) {background: #272c30}
+  .db_tools_table_cell_a:nth-child(2) {background: #272c30}
+  .db_tools_table_cell_b:nth-child(1) {background: #272c30}
+  .db_tools_table_cell_b:nth-child(2) {background: #272c30}
+
+  .db_info_table { 
+     display: table;
+     border-spacing: 0em;
+     font-weight: 400;
+     font-size: 15px;
+     width: 100%;
+     margin: auto;
+  }
+
+  .nav-tabs-custom > .nav-tabs > li:hover > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
+    background-color: #272c30;
+    color: #bec5cb;
+  }
+
+  .nav-tabs-custom > .nav-tabs > li.active > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
+    border-left-color: #30383f;
+    border-right-color: #30383f;
+    background-color: #272c30;
+    color: #bec5cb;
+  }
+  .nav-tabs-custom > .nav-tabs {
+    background-color: #353c42;
+  }
+  .nav-tabs-custom .tab-content {
+    background-color: #272c30;
+  }
+  .top_small_box_gray_text {
+    color: white !important;
+  }
+
+  /* remove white border that appears on mobile screen sizes */
+  .box-body {
+      border: 0px;
+  }
+  /* remove white border that appears on mobile screen sizes */
+  .table-responsive {
+    border: 0px;
+  }
+
+  .login-page {
+    background-color: transparent;
+  }
+
+  .login-logo a {
+    color: white;
+  }
+
+  .login-box-body {
+    color: #bec5cb;
+    background-color: #272c30;
+  }
+  /* Add border radius to bottom of the status boxes*/
+  .pa-small-box-footer {
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+  }
+
+  .small-box > .inner h3, .small-box > .inner p {
+    margin-bottom: 0px;
+    margin-left: 0px;
+  }
+  .small-box:hover .icon {
+    font-size: 3.74em;
+  }
+  .small-box .icon { 
+    top: 0.01em;
+    font-size: 3.25em;
+  }
+  .pa_semitransparent-panel{
+    background-color: #000 !important;
+  }
+
+}

front/deviceDetails.php

@@ -641,8 +641,14 @@
 
 <!-- Dark-Mode Patch -->
 <?php
-if ($ENABLED_DARKMODE === True) {
+switch ($UI_THEME) {
-   echo '<link rel="stylesheet" href="css/dark-patch-cal.css">';
+  case "Dark":
+    echo '<link rel="stylesheet" href="css/dark-patch-cal.css">';
+    break;
+  case "System":
+    echo '<link rel="stylesheet" href="css/system-dark-patch-cal.css">';
+    break;
+
 }
 ?>
 

front/index.php

@@ -103,10 +103,14 @@ if (isset ($_SESSION["login"]) == FALSE || $_SESSION["login"] != 1)
 
   <!-- Dark-Mode Patch -->
 <?php
-if ($ENABLED_DARKMODE === True) {
+switch ($UI_THEME) {
-   echo '<link rel="stylesheet" href="css/dark-patch.css">';
+  case "Dark":
-   $BACKGROUND_IMAGE_PATCH='style="background-image: url(\'img/boxed-bg-dark.png\');"';
+    echo '<link rel="stylesheet" href="css/dark-patch.css">';
-} else { $BACKGROUND_IMAGE_PATCH='style="background-image: url(\'img/background.png\');"';}
+    break;
+  case "System":
+    echo '<link rel="stylesheet" href="css/system-dark-patch.css">';
+    break;
+}
 ?>
   <link rel="stylesheet" href="/css/offline-font.css">
 </head>

front/js/common.js

@@ -1186,20 +1186,24 @@ function hideUIelements(settingKey) {
 
 
 // -----------------------------------------------------------------------------
-// apply dark mode
+// apply theme
 
 $(document).ready(function() {
-  // Assume getSetting is a function that returns true or false for dark mode
+  let theme = getSetting("UI_theme");
-  if (getSetting("UI_dark_mode") === "True") {
+  if (theme) {
-    // Add the dark mode stylesheet
+    theme = theme.replace("['","").replace("']","");
-    setCookie("UI_dark_mode", "True")
+    // Add the theme stylesheet
-    $('head').append('<link rel="stylesheet" href="css/dark-patch.css">');
+    setCookie("UI_theme", theme);
-    // Set the background image for dark mode
+    switch(theme) {
-    $('body').attr('style', 'background-image: url(\'img/boxed-bg-dark.png\');');
+      case "Dark":
+	$('head').append('<link rel="stylesheet" href="css/dark-patch.css">');
+	break;
+      case "System":
+	$('head').append('<link rel="stylesheet" href="css/system-dark-patch.css">');
+	break
+    }
   } else {
-    setCookie("UI_dark_mode", "False")
+    setCookie("UI_theme", "Light");
-    // Set the background image for light mode
-    $('body').attr('style', 'background-image: url(\'img/background.png\');');
   }
 });
 

front/php/templates/header.php

@@ -73,10 +73,14 @@
   <!-- Dark-Mode Patch -->
 
   <?php
-  if ($ENABLED_DARKMODE === True) {
+  switch ($UI_THEME) {
-    echo '<link rel="stylesheet" href="css/dark-patch.css">';
+    case "Dark":
-    $BACKGROUND_IMAGE_PATCH='style="background-image: url(\'img/boxed-bg-dark.png\');"';
+      echo '<link rel="stylesheet" href="css/dark-patch.css">';
-  } else { $BACKGROUND_IMAGE_PATCH='style="background-image: url(\'img/background.png\');"';}
+      break;
+    case "System":
+      echo '<link rel="stylesheet" href="css/system-dark-patch.css">';
+      break;
+  }
   ?>
 
 
@@ -114,7 +118,7 @@
 <!-- ----------------------------------------------------------------------- -->
 <!-- Layout Boxed Yellow -->
 
-<body class="hold-transition fixed <?php echo $pia_skin_selected;?> sidebar-mini" <?php echo $BACKGROUND_IMAGE_PATCH;?> onLoad="show_pia_servertime();" >
+<body class="hold-transition fixed <?php echo $pia_skin_selected;?> sidebar-mini" onLoad="show_pia_servertime();" >
 <!-- Site wrapper -->
 <div class="wrapper">
 

front/php/templates/skinUI.php

@@ -4,12 +4,12 @@
 // ## GUI settings processing start
 // ###################################
 
-if( isset($_COOKIE['UI_dark_mode']))
+if( isset($_COOKIE['UI_theme']))
 {
-    $ENABLED_DARKMODE = $_COOKIE['UI_dark_mode'] == "True";
+    $UI_THEME = $_COOKIE['UI_theme'];
 }else
 {
-    $ENABLED_DARKMODE = False;
+    $UI_THEME = "Light";
 }
 
 $pia_skin_selected = 'skin-blue';
@@ -18,4 +18,4 @@ $pia_skin_selected = 'skin-blue';
 // ## GUI settings processing end
 // ###################################
 
-?>
+?>

front/plugins/ui_settings/config.json

@@ -463,30 +463,30 @@
       ]
     },
     {
-      "function": "dark_mode",
+      "function": "theme",
       "type": {
-        "dataType": "boolean",
+        "dataType": "array",
         "elements": [
           {
-            "elementType": "input",
+            "elementType": "select",
-            "elementOptions": [{ "type": "checkbox" }],
+            "elementOptions": [{ "multiple": "false", "orderable": "false" }],
             "transformers": []
           }
         ]
       },
-      "default_value": false,
+      "default_value": "Light",
-      "options": [],
+      "options": ["Light","Dark","System"],
       "localized": ["name", "description"],
       "name": [
         {
           "language_code": "en_us",
-          "string": "Dark mode"
+          "string": "Theme"
         }
       ],
       "description": [
         {
           "language_code": "en_us",
-          "string": "Enable dark mode."
+          "string": "UI theme to use. System will auto switch between Light and Dark."
         }
       ]
     }

front/presence.php

@@ -216,8 +216,13 @@
 
 <!-- Dark-Mode Patch -->
 <?php
-if ($ENABLED_DARKMODE === True) {
+switch ($UI_THEME) {
-   echo '<link rel="stylesheet" href="css/dark-patch-cal.css">';
+  case "Dark":
+    echo '<link rel="stylesheet" href="css/dark-patch-cal.css">';
+    break;
+  case "System":
+    echo '<link rel="stylesheet" href="css/system-dark-patch-cal.css">';
+    break;
 }
 ?>