Merge pull request #4406 from Icinga/disable-dark-theme

Disable dark theme

application/forms/PreferenceForm.php

@@ -247,6 +247,9 @@ class PreferenceForm extends Form
             ]
         );
 
+        // Temporarily disabled. Re-enabled with v2.10
+        $this->removeElement('theme_mode');
+
         /** @var GettextTranslator $translator */
         $translator = StaticTranslator::$instance;
 

application/views/scripts/about/index.phtml

@@ -2,7 +2,7 @@
     <?= $tabs ?>
 </div>
 <div id="about" class="content content-centered">
-    <?= $this->img('img/icinga-logo-big.svg', null, array('class' => 'icinga-logo', 'width' => 320)) ?>
+    <?= $this->img('img/icinga-logo-big-dark.png', null, array('class' => 'icinga-logo', 'width' => 320)) ?>
     <dl class="name-value-list">
     <?php if (isset($version['appVersion'])): ?>
         <dt><?= $this->translate('Icinga Web 2 Version') ?></dt>

library/Icinga/Web/LessCompiler.php

@@ -3,6 +3,7 @@
 
 namespace Icinga\Web;
 
+use Icinga\Application\Icinga;
 use Icinga\Application\Logger;
 use Icinga\Util\LessParser;
 
@@ -48,6 +49,8 @@ class LessCompiler
      */
     protected $source;
 
+    private $defaultThemeOverride = false;
+
     /**
      * Path of the LESS theme
      *
@@ -142,6 +145,14 @@ class LessCompiler
         return $lessFiles;
     }
 
+    /**
+     * @deprecated Don't use
+     */
+    public function enableDefaultThemeOverride()
+    {
+        $this->defaultThemeOverride = true;
+    }
+
     /**
      * Set the path to the LESS theme
      *
@@ -241,6 +252,12 @@ class LessCompiler
         // able to override other variables, that's what themes are for
         $this->source = $varExports . "\n\n" . $this->source;
 
+        if ($this->defaultThemeOverride) {
+            $this->source .= file_get_contents(
+                Icinga::app()->getBaseDir('public/css/icinga') . '/legacy-theme.less'
+            );
+        }
+
         if ($this->theme !== null) {
             $this->source .= file_get_contents($this->theme);
         }

library/Icinga/Web/StyleSheet.php

@@ -107,6 +107,7 @@ class StyleSheet
         $app = Icinga::app();
         $this->app = $app;
         $this->lessCompiler = new LessCompiler();
+        $this->lessCompiler->enableDefaultThemeOverride();
         $this->pubPath = $app->getBaseDir('public');
         $this->collect();
     }
@@ -175,6 +176,9 @@ class StyleSheet
             }
         }
 
+        // Temporarily disabled. Re-enabled with v2.10
+        $mode = 'none';
+
         $this->lessCompiler->setThemeMode($this->pubPath . '/css/modes/'. $mode . '.less');
     }
 

public/css/icinga/legacy-theme.less

@@ -0,0 +1,175 @@
+// base.less
+@gray: #7F7F7F;
+@gray-semilight: #A9A9A9;
+@gray-light: #C9C9C9;
+@gray-lighter: #EEEEEE;
+@gray-lightest: #F7F7F7;
+@icinga-blue: #0095BF;
+@low-sat-blue: #dae3e6;
+@low-sat-blue-dark: #becbcf;
+@body-bg-color: #fff;
+@text-color: @black;
+@text-color-light: @gray;
+@tr-active-color: #E5F9FF;
+@tr-hover-color: #F5FDFF;
+@menu-bg-color: #494949;
+@menu-active-bg-color: #333;
+@menu-color: @text-color-inverted;
+@menu-hover-bg-color: mix(#000, @menu-bg-color, 20);
+@menu-search-hover-bg-color: mix(#000, @menu-bg-color, 20);
+@menu-active-hover-bg-color: mix(#000, @menu-active-bg-color, 20);
+@menu-2ndlvl-highlight-bg-color: darken(@menu-bg-color, 20);
+@tab-hover-bg-color: rgba(0,0,0,.1);
+
+.container {
+  &:before,
+  > .content:before {
+    background-image: url(../img/icinga-loader-light.gif);
+  }
+}
+
+// badges.less
+.badge {
+  background-color: @gray-light;
+}
+
+// controls.less
+.controls input.search,
+input.search {
+  background-image: url(../img/icons/search.png);
+}
+
+@fp-calendarBackground: #ffffff;
+@fp-calendarBorderColor: @fp-dayHoverBackground;
+
+@fp-arrowColor: fadeout(@fp-dayForeground, 40%);
+@fp-arrow_hover_color: #f64747;
+
+@fp-monthForeground: fadeout(black, 10%);
+@fp-monthBackground: transparent;
+
+@fp-weekdaysBackground: transparent;
+@fp-weekdaysForeground: fadeout(black, 46%);
+@fp-weekNumberForeground: fadeout(@fp-dayForeground, 70%);
+
+@fp-dayForeground: #393939;
+@fp-dayHoverBackground: #e6e6e6;
+@fp-disabledDayForeground: fadeout(@fp-dayForeground, 90%);
+@fp-outsideRangeDayForeground: fadeout(@fp-dayForeground, 70%);
+@fp-selectedDayBackground: #569FF7;
+@fp-todayColor: #959ea9;
+
+@fp-timeHoverBg: lighten(@fp-dayHoverBackground, 3);
+
+@fp-hoverInvertedBg: fadeout(black, 95%);
+
+@fp-numChooserSvgFillColor: fadeout(fadeout(black, 10%), 50%);
+@fp-hoverNumChooserBg: fadeout(black, 90%);
+@fp-numChooserBorderColor: fadeout(@fp-dayForeground, 85%);
+
+.icinga-datetime-picker .flatpickr-day.today {
+  &:hover,
+  &:focus {
+    color: #fff;
+  }
+}
+
+// layout-structure.less
+
+#sidebar:after {
+  display: none;
+}
+
+// layout.less
+#header-logo-container {
+  .var(background, icinga-blue);
+}
+
+// login.less
+#login {
+  color: @white;
+
+  background-color: #06062B;
+
+  input[type=text],
+  input[type=password],
+  .toggle-slider {
+    border-color: #404d72;
+    background-color: #404d72;
+
+    &:before {
+      border-color: #282e39;
+      background-color: #282E39;
+    }
+  }
+
+  input[type="checkbox"]:checked + .toggle-switch .toggle-slider {
+    border-color: #00C3ED;
+    background-color: #00C3ED;
+  }
+}
+
+// menu.less
+#menu .nav-level-1 > .nav-item {
+  &.active {
+    color: @menu-color;
+  }
+
+  &:not(.selected) > a:hover,
+  &:not(.selected) > a:focus {
+    background-color: mix(#000, @menu-bg-color, 20);
+  }
+}
+
+#menu .nav-level-2 > .nav-item {
+  &.active > a {
+    color: @menu-color;
+  }
+}
+
+#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
+  &.nav-item:not(.badge-nav-item) {
+    &:not(.selected):not(.active) a:hover,
+    &:not(.selected):not(.active) a:focus {
+      background-color: darken(@menu-bg-color, 20);
+      color: @menu-2ndlvl-highlight-color;
+    }
+  }
+
+  &.badge-nav-item:not(.selected) {
+    a:hover,
+    a:focus {
+      &:first-of-type,
+      &:first-of-type ~ a {
+        color: white;
+        background-color: darken(@menu-bg-color, 20);
+      }
+    }
+  }
+}
+
+// Hovered menu
+#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover,
+#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover {
+  > .nav-level-2 {
+    > .nav-item {
+      &:not(.active) {
+        a:hover, a:focus {
+          &:first-of-type,
+          &:first-of-type ~ a {
+            background-color: @tr-active-color;
+          }
+        }
+      }
+    }
+  }
+}
+
+// tabs.less
+.tabs {
+  background-color: @icinga-blue;
+
+  > li > a {
+    color: @body-bg-color;
+  }
+}

public/css/themes/colorblind.less

@@ -1,15 +1,15 @@
 /*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */
 
-@color-ok: fade(#77E08E, 50%);
+@color-ok: #CCFFD7;
 @color-critical: #FE5566;
-@color-critical-handled: fade(#FE5566, 50%);
+@color-critical-handled: #FF99AA;
 @color-warning: #EAD010;
-@color-warning-handled: fade(#EAD010, 50%);
+@color-warning-handled: #FFF399;
 @color-unknown: #7791E0;
-@color-unknown-handled: fade(#7791E0, 50%);
+@color-unknown-handled: #B8C6FF;
 @color-unreachable: @color-unknown;
 @color-unreachable-handled: @color-unknown-handled;
-@color-pending:fade(#FFFFFF, 75%);
+@color-pending: #000000;
 
 /* Adapt font color to match handled / unhandled states and maintain readability with text-shadows */
 .badge {
@@ -18,32 +18,32 @@
 
 .state-ok,
 .state-up {
-  color: @text-color;
+  color: black;
 }
 .state-warning,
 .state-critical,
 .state-down,
 .state-unknown {
   &.handled {
-    color: @text-color;
+    color: black;
   }
 }
 .state-warning,
 .state-critical,
 .state-down,
 .state-unknown {
-  color: @text-color-inverted;
+  color: white;
 }
 .state-warning:not(.handled) {
-  text-shadow: 0 0 3px mix(@text-color, @color-warning, 60);
+  text-shadow: 0 0 3px mix(#000000, @color-warning, 60);
 }
 .state-critical:not(.handled),
 .state-down:not(.handled) {
-  text-shadow: 0 0 1px mix(@text-color, @color-critical, 20);
+  text-shadow: 0 0 1px mix(#000000, @color-critical, 20);
 }
 .state-unknown:not(.handled),
 .state-unreachable:not(.handled) {
-  text-shadow: 0 0 1px mix(@text-color, @color-unknown, 20);
+  text-shadow: 0 0 1px mix(#000000, @color-unknown, 20);
 }
 
 .processinfo .process > div.backend-running {

public/css/themes/high-contrast.less

@@ -2,15 +2,6 @@
 
 @icinga-blue: #006D8C;
 
-// Gray colors
-@gray: #7F7F7F;
-@gray-semilight: #A9A9A9;
-@gray-light: #C9C9C9;
-@gray-lighter: #EEEEEE;
-@gray-lightest: #F7F7F7;
-@disabled-gray: #9a9a9a;
-
-// State colors
 @color-ok: #006400;
 @color-critical: #EE0000;
 @color-critical-handled: #EE0000;
@@ -22,19 +13,15 @@
 @color-unreachable-handled: #800080;
 @color-pending: #0000EE;
 
-// Icinga colors
-@low-sat-blue: #dae3e6;
-
-// Background color for <body>
-@body-bg-color: @white;
-
 @text-color: #191919;
 @text-color-light: #555555;
 
 @menu-highlight-color: white;
+@menu-highlight-hover-bg-color: white;
 @menu-2ndlvl-color: white;
 @menu-2ndlvl-highlight-color: white;
-@menu-2ndlvl-active-hover-color: @text-color;
+@menu-2ndlvl-active-bg-color: black;
+@menu-2ndlvl-active-hover-color: white;
 
 #menu ul.nav-level-1 > .nav-item > a {
   &:focus, &:hover {
@@ -42,24 +29,6 @@
   }
 }
 
-#menu ul.nav-level-1 > .nav-item.active > a,
-#menu .nav-level-1 > .nav-item.active:not(.selected) > a:hover {
-  color: @text-color;
-  background-color: @white;
-}
-
-#menu .nav-level-2 > .nav-item.active {
-  background-color: @white;
-
-  a {
-    color: @text-color;
-  }
-
-  > a:focus, > a:hover {
-    opacity: 1;
-  }
-}
-
 #menu .nav-level-2 > .nav-item > a {
   &:hover, &:focus {
     text-decoration: underline;
@@ -74,53 +43,37 @@
   text-decoration: underline;
 }
 
-.badge:not(.handled),
+.badge {
-.state-badge:not(.handled) {
+  background-color: @text-color-light;
-  &.state-warning {
-    border: 1px solid @color-warning;
-  }
-
-  &.state-critical,
-  &.state-down {
-    border: 1px solid @color-critical;
-  }
-
-  &.state-unreachable {
-    border: 1px solid @color-unreachable;
-  }
-
-  &.state-unknown {
-    border: 1px solid @color-unknown;
-  }
-
-  &.state-ok,
-  &.state-up {
-    border: 1px solid @color-ok;
-  }
 }
 
-.badge.handled,
+.badge.handled {
-.badge.state-ok,
-.state-badge.handled,
-.state-badge.state-ok {
   background-color: @body-bg-color !important;
-  color: @text-color !important;
+  color: @text-color;
 
   &.state-warning {
     border: 1px solid @color-warning-handled;
+    margin-top: -1px;
+  }
+
+  &.state-critical {
+    border: 1px solid @color-critical-handled;
+    margin-top: -1px;
   }
 
-  &.state-critical,
   &.state-down {
     border: 1px solid @color-critical-handled;
+    margin-top: -1px;
   }
 
   &.state-unreachable {
     border: 1px solid @color-unreachable-handled;
+    margin-top: -1px;
   }
 
   &.state-unknown {
     border: 1px solid @color-unknown-handled;
+    margin-top: -1px;
   }
 }
 
@@ -189,8 +142,7 @@
   }
 }
 
-.icinga-controls,
+.icinga-controls {
-.search-editor {
   input:not([type="checkbox"]):not([type="radio"]),
   .toggle-switch .toggle-slider:before,
   .toggle-switch > .toggle-slider,
@@ -205,30 +157,3 @@
     margin: 1px;
   }
 }
-
-.icinga-module.module-icingadb .list-item.overdue {
-  background: none;
-
-  header > *:not(time),
-  .caption {
-    opacity: 1;
-  }
-}
-
-.controls input.search,
-input.search {
-  background-image: url(../img/icons/search.png);
-}
-
-.search-bar,
-.button-link {
-  border: 1px solid @icinga-blue;
-}
-
-.view-mode-switcher > label {
-  border: 1px solid @icinga-blue;
-
-  &:not(:first-of-type) {
-    border-left: none;
-  }
-}

public/css/themes/solarized-dark.less

@@ -48,6 +48,7 @@
 @tr-hover-color: @base02;
 
 // Menu colors
+@menu-color: #DBDBDB;
 @menu-bg-color: @base02;
 @menu-2ndlvl-active-bg-color: lighten(@base03, 5%);
 @menu-highlight-hover-bg-color: @base03;
@@ -66,6 +67,33 @@
 // Form colors
 @button-primary-color: lighten(@base02, 20);
 
+// Datetime picker colors
+@fp-calendarBackground: #3f4458;
+@fp-calendarBorderColor: darken(#3f4458, 50%);
+
+@fp-monthForeground: #fff;
+@fp-monthBackground: #3f4458;
+
+@fp-weekdaysBackground: transparent;
+@fp-weekdaysForeground: #fff;
+
+@fp-dayForeground: fadeout(white, 5%);
+@fp-dayHoverBackground: lighten(@fp-calendarBackground, 25%);
+
+@fp-todayColor: #eee;
+@fp-today_fg_color: #3f4458;
+
+@fp-selectedDayBackground: #80CBC4;
+
+.icinga-datetime-picker .flatpickr-day.today {
+  &:hover,
+  &:focus {
+    color: @fp-today_fg_color;
+  }
+}
+
+// Datetime picker colors (end)
+
 #sidebar {
   background-color: @base02;
   box-shadow: inset -0.5em 0 1em rgba(0,0,0,0.3);