Dark mode feature

src/classes/Application/Driver.php

@@ -10,7 +10,6 @@
 use Application\Driver\DriverSettings;
 use Application\Driver\VersionInfo;
 use Application\Interfaces\Admin\AdminScreenInterface;
-use Application\Revisionable\Collection\BaseRevisionableCollection;
 use Application\Revisionable\RevisionableInterface;
 use Application\WhatsNew;
 use AppLocalize\Localization;
@@ -1217,25 +1216,31 @@ protected function configureScripts() : void
     protected function configureStyleIncludes() : void
     {
         $counter = 6000;
+        $dark = $this->user->isDarkModeEnabled();
 
         $this->ui->addStylesheet('ui-core.css', 'all', $counter--);
         $this->ui->addStylesheet('ui-fonts.css', 'all', $counter--);
-        $this->ui->addStylesheet('ui-colors.css', 'all', $counter--);
         $this->ui->addStylesheet(UI_Page_Section::STYLESHEET_FILE, 'all', $counter--);
         $this->ui->addStylesheet('ui-sidebar.css', 'all', $counter--);
         $this->ui->addStylesheet('ui-dialogs.css', 'all', $counter--);
         $this->ui->addStylesheet('ui-icons.css', 'all', $counter--);
         $this->ui->addStylesheet('ui-forms.css', 'all', $counter--);
         $this->ui->addStylesheet('ui/notepad.css', 'all', $counter--);
         $this->ui->addStylesheet('ui-print.css', 'print', $counter--);
-        $this->ui->addStylesheet('driver.css', 'all', $counter--);
 
-        if($this->user->isDarkModeEnabled())
-        {
-            $this->ui->addStylesheet('ui/dark.css', 'all', $counter--);
-            $this->ui->addStylesheet('driver-dark.css', 'all', $counter--);
+        if($dark) {
+            $this->ui->addStylesheet('colors/dark.css', 'all', $counter--);
+        } else {
+            $this->ui->addStylesheet('colors/light.css', 'all', $counter--);
         }
 
+        $this->ui->addStylesheet('colors/colors.css', 'all', $counter--);
+
+        if($dark) {
+            $this->ui->addStylesheet('driver-dark.css', 'all', $counter--);
+        } else {
+            $this->ui->addStylesheet('driver.css', 'all', $counter--);
+        }
     }
 
     /**

src/classes/UI/DataGrid/Entry.php

@@ -192,6 +192,13 @@ public function makeNonSortable() : self
     public function select(bool $select=true) : self
     {
         $this->selected = $select;
+
+        if($select) {
+            $this->addClass('active');
+        } else {
+            $this->removeClass('active');
+        }
+
         return $this;
     }
 

src/themes/default/css/colors/dark.css

@@ -0,0 +1,197 @@
+/*
+ * http://github.com/peteboere/css-crush (v4.1.3)
+ */
+:root {
+    --accent-base: #1D2025;
+    --accent-primary: #91d6ff;
+    --accent-secondary-xxs: #3e4b60;
+    --accent-secondary-xs: #58667f;
+    --accent-secondary-s: #58667f;
+    --accent-secondary: #64738D;
+    --accent-secondary-l: #5b5b5b;
+    --accent-secondary-xl: #8798b7;
+    --accent-grid-hover: #2d3139;
+    --accent-grid-sorted-hover: #e2ebf4;
+    --accent-grid-sorted-active: #e2ebf4;
+    --accent-grid-highlight: #2d2f3b;
+    --accent-text: #93A5B4;
+    --accent-text-inverted: #333;
+    --accent-text-inverted-muted: #444;
+    --accent-text-tooltip: #e4ef9e;
+    --accent-text-link: #91d6ff;
+    --accent-text-link-hover: #bfe6ff;
+    --accent-text-link-external: #5eabd9;
+    --accent-rating-1star: #c52320;
+    --accent-rating-2star: #e2500b;
+    --accent-rating-3star: #fff131;
+    --accent-rating-4star: #88ff31;
+    --accent-rating-5star: #00ff45;
+    --accent-danger-xxs: #fedfdf;
+    --accent-danger: #b94a48;
+    --accent-danger-xxl: #c52320;
+    --accent-warning-xxs: #fff1d1;
+    --accent-warning-xs: #ffe4be;
+    --accent-warning-s: #f2cfa5;
+    --accent-warning: #e2500b;
+    --accent-success-xxs: #ebf8a4;
+    --accent-success-s: #5bb75b;
+    --accent-success: #468847;
+    --accent-info-xxs: #f0f5ff;
+    --accent-info-xs: #e5f0ff;
+    --accent-info: #3a87ad;
+    --accent-developer: #f47e00;
+    --accent-developer-hover: #5c2600;
+    --accent-inactive: #999;
+    --accent-inactive-xl: #000;
+    --accent-developer-gradient-b: #f2cfa5;
+    --accent-developer-gradient-a: #ffc27d;
+    --accent-borders-s: #1a1d1f;
+    --accent-borders: #0e0f10;
+    --accent-shadow: #000;
+    --accent-shadow-75: rgba(0,0,0,.75);
+    --accent-shadow-25: rgba(0,0,0,.25);
+    --accent-highlight: #fff;
+    --accent-highlight-20: rgba(255,255,255,.2);
+    --accent-highlight-60: rgba(255,255,255,.6);
+    --accent-highlight-50: rgba(255,255,255,.5);
+    --accent-code: #dadada;
+    --accent-form-element-bg: #fff;
+    --accent-form-element-border: #ccc;
+    --accent-form-file-bg: #f0f8ff;
+    --accent-form-file-bg-hover: #b0d4f1;
+    --accent-form-section-subheader-bg: #ccc;
+    --accent-form-hints-separator: #eee;
+    --accent-mainnav-bg: #10161f;
+    --accent-mainnav-gradient-start: #40546f;
+    --accent-mainnav-text: #eaeeff;
+    --accent-mainnav-active-text: #f4f6ff;
+    --accent-mainnav-active-bg: #021a3a;
+    --accent-mainnav-active-gradient-start: #3b649c;
+    --accent-mainnav-hover-bg: #142234;
+    --accent-mainnav-hover-text: #eaeeff;
+    --accent-quicknav-bg: #003D8F;
+    --accent-quicknav-gradient-end: #10305D;
+    --accent-quicknav-text-shadow: #002a66;
+    --accent-quicknav-hover-bg: #245eac;
+    --accent-quicknav-active-bg: #7aa3dc;
+    --accent-quicknav-active-text-shadow: #5477a9;
+    --accent-footer-gradient-start: #003d8f;
+    --accent-footer-gradient-end: #01204c;
+    --accent-footer-border: #01204c;
+    --accent-footer-shadow: rgba(1,32,76,.5);
+    --accent-footer-text: #a3c7ee;
+    --accent-footer-separator: #246fd4;
+    --accent-footer-link: #60a1ff;
+    --accent-footer-link-hover: #aff2fc;
+    --accent-syshint-default-bg: #eac222;
+    --accent-syshint-default-border: #bfaa00;
+    --accent-syshint-developer-bg: #f47e00;
+    --accent-syshint-developer-border: #b83d00;
+    --accent-syshint-success-bg: #0c0;
+    --accent-syshint-success-border: #080;
+    --accent-hseparator-top: #3c414b;
+    --accent-hseparator-bottom: #0e0f1;
+    --accent-menu-bg: #2d3139;
+    --accent-menu-default-bg-hover: #0081c2;
+    --accent-pills-subnav-bg: #222934;
+    --accent-pills-subnav-border: #283447;
+    --accent-pills-bg-hover: #eee;
+    --accent-section-header-bg: #f7f7f7;
+    --accent-section-header-bg-hover: #e8f5ff;
+    --accent-btn-default-text: rgba(0,0,0,.75);
+    --accent-btn-default-gradient-start: #fff;
+    --accent-btn-default-gradient-end: #e6e6e6;
+    --accent-btn-default-hover-gradient-start: #f2f2f2;
+    --accent-btn-default-hover-gradient-end: #d5d5d5;
+    --accent-btn-default-border-bottom: #bfbfbf;
+    --accent-btn-primary-text: #fff;
+    --accent-btn-primary-gradient-start: #08c;
+    --accent-btn-primary-gradient-end: #04c;
+    --accent-btn-primary-hover-gradient-start: #006dcc;
+    --accent-btn-primary-hover-gradient-end: #003296;
+    --accent-btn-primary-border-bottom: #002a80;
+    --accent-btn-warning-text: #fff;
+    --accent-btn-warning-gradient-start: #fbb450;
+    --accent-btn-warning-gradient-end: #f89406;
+    --accent-btn-warning-hover-gradient-start: #f4aa40;
+    --accent-btn-warning-hover-gradient-end: #eb8100;
+    --accent-btn-warning-border-bottom: #ad6704;
+    --accent-btn-danger-text: #fff;
+    --accent-btn-danger-gradient-start: #ee5f5b;
+    --accent-btn-danger-gradient-end: #bd362f;
+    --accent-btn-danger-hover-gradient-start: #e54c47;
+    --accent-btn-danger-hover-gradient-end: #a82a1f;
+    --accent-btn-danger-border-bottom: #802420;
+    --accent-btn-success-text: #fff;
+    --accent-btn-success-gradient-start: #62c462;
+    --accent-btn-success-gradient-end: #51a351;
+    --accent-btn-success-hover-gradient-start: #57c957;
+    --accent-btn-success-hover-gradient-end: #408140;
+    --accent-btn-success-border-bottom: #387038;
+    --accent-btn-info-text: #fff;
+    --accent-btn-info-gradient-start: #5bc0de;
+    --accent-btn-info-gradient-end: #2f96b4;
+    --accent-btn-info-hover-gradient-start: #47c1e0;
+    --accent-btn-info-hover-gradient-end: #1f8aaf;
+    --accent-btn-info-border-bottom: #1f6377;
+    --accent-btn-inverted-text: #fff;
+    --accent-btn-inverted-gradient-start: #444;
+    --accent-btn-inverted-gradient-end: #222;
+    --accent-btn-inverted-hover-gradient-start: #333;
+    --accent-btn-inverted-hover-gradient-end: #111;
+    --accent-btn-inverted-border-bottom: #000;
+    }
+HTML {
+    color-scheme: dark;
+    }
+.breadcrumb > LI {
+    text-shadow: none;
+    }
+#footer {
+    border: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    color: inherit;
+    }
+.nav > LI > A:hover,
+.nav > LI > A:focus {
+    background: #2C4A7C;
+    }
+.nav-tabs .open .dropdown-toggle,
+.nav-pills .open .dropdown-toggle,
+.nav > li.dropdown.open.active > a:hover,
+.nav > li.dropdown.open.active > a:focus {
+    background: #39598E;
+    }
+.nav-pills > .active > a,
+.nav-pills > .active > a:hover,
+.nav-pills > .active > a:focus {
+    background: #365891;
+    }
+#app-mainnav .nav > LI.dropdown > A.nav-group-active,
+#app-mainnav .nav > LI.active > A {
+    border-color: #264564;
+    }
+.nav-tabs > .active > a,
+.nav-tabs > .active > a:hover,
+.nav-tabs > .active > a:focus {
+    border: none;
+    }
+.section .body-wrapper .tab-toolbar {
+    background: transparent;
+    }
+.nav-tabs > li > a:hover,
+.nav-tabs > li > a:focus {
+    border-color: transparent;
+    }
+.nav-tabs {
+    border: none;
+    }
+.help-block {
+    color: inherit;
+    opacity: .7;
+    }
+.dropdown-menu .divider {
+    background: #27354D;
+    border-bottom-color: #27354D;
+    }