Skip to content

Commit

Permalink
Merge pull request #4406 from Icinga/disable-dark-theme
Browse files Browse the repository at this point in the history
Disable dark theme
  • Loading branch information
nilmerg committed Jul 12, 2021
2 parents 6c03c80 + 1ec9d74 commit d52d759
Show file tree
Hide file tree
Showing 8 changed files with 256 additions and 104 deletions.
3 changes: 3 additions & 0 deletions application/forms/PreferenceForm.php
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,9 @@ public function createElements(array $formData)
]
);

// Temporarily disabled. Re-enabled with v2.10
$this->removeElement('theme_mode');

/** @var GettextTranslator $translator */
$translator = StaticTranslator::$instance;

Expand Down
2 changes: 1 addition & 1 deletion application/views/scripts/about/index.phtml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
17 changes: 17 additions & 0 deletions library/Icinga/Web/LessCompiler.php
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

namespace Icinga\Web;

use Icinga\Application\Icinga;
use Icinga\Application\Logger;
use Icinga\Util\LessParser;

Expand Down Expand Up @@ -48,6 +49,8 @@ class LessCompiler
*/
protected $source;

private $defaultThemeOverride = false;

/**
* Path of the LESS theme
*
Expand Down Expand Up @@ -142,6 +145,14 @@ public function getLessFiles()
return $lessFiles;
}

/**
* @deprecated Don't use
*/
public function enableDefaultThemeOverride()
{
$this->defaultThemeOverride = true;
}

/**
* Set the path to the LESS theme
*
Expand Down Expand Up @@ -241,6 +252,12 @@ public function render()
// 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);
}
Expand Down
4 changes: 4 additions & 0 deletions library/Icinga/Web/StyleSheet.php
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ public function __construct()
$app = Icinga::app();
$this->app = $app;
$this->lessCompiler = new LessCompiler();
$this->lessCompiler->enableDefaultThemeOverride();
$this->pubPath = $app->getBaseDir('public');
$this->collect();
}
Expand Down Expand Up @@ -175,6 +176,9 @@ protected function collect()
}
}

// Temporarily disabled. Re-enabled with v2.10
$mode = 'none';

$this->lessCompiler->setThemeMode($this->pubPath . '/css/modes/'. $mode . '.less');
}

Expand Down
175 changes: 175 additions & 0 deletions public/css/icinga/legacy-theme.less
Original file line number Diff line number Diff line change
@@ -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;
}
}
22 changes: 11 additions & 11 deletions public/css/themes/colorblind.less
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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 {
Expand Down
Loading

0 comments on commit d52d759

Please sign in to comment.