From 3ba4727bbd38ce8dd85a78cb70efcf9a5236bcce Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Tue, 8 Feb 2022 17:03:51 +0100 Subject: [PATCH 1/3] css: Use `@light-mode` to register light mode rules --- public/css/icinga/base.less | 11 ++++++----- public/css/icinga/controls.less | 8 ++++---- public/css/icinga/layout.less | 4 ++-- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 7cecc9c9e..266e61dc0 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -113,10 +113,11 @@ @vertical-padding: 0.5em; // 6px @horizontal-padding: 1em; // 12px -@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) { - +@light-mode: { @light-body-bg-color: #F5F9FA; + @iplWebLightRules(); + :root { --body-bg-color: @light-body-bg-color; --body-bg-color-transparent: fade(@light-body-bg-color, 0); @@ -151,7 +152,7 @@ --gray-lighter: #e8ecef; --gray-lightest: #F7F7F7; } -} +}; // Make padding not affect the final computed width of an element html { @@ -293,11 +294,11 @@ td, th { } } -@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) { +@light-mode: { .container { &:before, > .content:before { background-image: url(../img/icinga-loader-light.gif) } } -} +}; diff --git a/public/css/icinga/controls.less b/public/css/icinga/controls.less index 8d89f952c..01cf1526d 100644 --- a/public/css/icinga/controls.less +++ b/public/css/icinga/controls.less @@ -43,13 +43,13 @@ input.search { } } -@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) { +@light-mode: { #menu input.search, .controls input.search, input.search { background-image: url(../img/icons/search.png); } -} +}; .backend-selection, .pagination-control, @@ -241,7 +241,7 @@ input.search { } } -@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) { +@light-mode: { :root { // These are actually the default colors for the flatpickr @@ -276,6 +276,6 @@ input.search { --fp-hoverNumChooserBg: fadeout(black, 90%); --fp-numChooserBorderColor: fadeout(@fp-dayForeground, 85%); } -} +}; // Datetime picker colors (end) diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less index e6570c613..f2a97e100 100644 --- a/public/css/icinga/layout.less +++ b/public/css/icinga/layout.less @@ -366,10 +366,10 @@ } } -@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) { +@light-mode: { #header-logo, #mobile-menu-logo, #about .icinga-logo { filter: brightness(0.415) sepia(1) ~"saturate(0.1)" hue-rotate(144deg); } -} +}; From 55330c81c408a370d7495746779452b219ed2682 Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Thu, 10 Feb 2022 09:08:37 +0100 Subject: [PATCH 2/3] css: Drop explicit `dark` mode --- library/Icinga/Web/StyleSheet.php | 2 +- public/css/modes/dark.less | 5 ----- public/css/modes/light.less | 1 - public/css/modes/none.less | 1 - public/css/modes/system.less | 1 - 5 files changed, 1 insertion(+), 9 deletions(-) delete mode 100644 public/css/modes/dark.less diff --git a/library/Icinga/Web/StyleSheet.php b/library/Icinga/Web/StyleSheet.php index ab4e9d94c..d388f5924 100644 --- a/library/Icinga/Web/StyleSheet.php +++ b/library/Icinga/Web/StyleSheet.php @@ -26,7 +26,7 @@ class StyleSheet * * @var string */ - const DEFAULT_MODE = 'dark'; + const DEFAULT_MODE = 'none'; /** * The themes that are compatible with the default theme diff --git a/public/css/modes/dark.less b/public/css/modes/dark.less deleted file mode 100644 index 9be5fef38..000000000 --- a/public/css/modes/dark.less +++ /dev/null @@ -1,5 +0,0 @@ -/* Icinga Web 2 | (c) 2021 Icinga GmbH | GPLv2+ */ - -@enable-color-preference: 999999px; -@prefer-light-color-scheme: 999999px; -@prefer-dark-color-scheme: 0px; diff --git a/public/css/modes/light.less b/public/css/modes/light.less index d35545564..704400735 100644 --- a/public/css/modes/light.less +++ b/public/css/modes/light.less @@ -2,4 +2,3 @@ @enable-color-preference: 999999px; @prefer-light-color-scheme: 0px; -@prefer-dark-color-scheme: 999999px; diff --git a/public/css/modes/none.less b/public/css/modes/none.less index 790f01f63..05c618cdc 100644 --- a/public/css/modes/none.less +++ b/public/css/modes/none.less @@ -2,4 +2,3 @@ @enable-color-preference: 999999px; @prefer-light-color-scheme: 999999px; -@prefer-dark-color-scheme: 999999px; diff --git a/public/css/modes/system.less b/public/css/modes/system.less index b3b57b7b8..07bd06a8e 100644 --- a/public/css/modes/system.less +++ b/public/css/modes/system.less @@ -2,4 +2,3 @@ @enable-color-preference: 0px; @prefer-light-color-scheme: 999999px; -@prefer-dark-color-scheme: 999999px; From 74971359a3273ee84e235a296b1e9dc6a8a698be Mon Sep 17 00:00:00 2001 From: Johannes Meyer Date: Thu, 10 Feb 2022 09:09:29 +0100 Subject: [PATCH 3/3] css: Change mode detection to look for `@light-mode` --- application/forms/PreferenceForm.php | 6 +----- library/Icinga/Web/StyleSheet.php | 20 ++++---------------- 2 files changed, 5 insertions(+), 21 deletions(-) diff --git a/application/forms/PreferenceForm.php b/application/forms/PreferenceForm.php index e03d19260..6ab2ade3a 100644 --- a/application/forms/PreferenceForm.php +++ b/application/forms/PreferenceForm.php @@ -213,12 +213,8 @@ class PreferenceForm extends Form if (isset($formData['theme']) && $formData['theme'] !== StyleSheet::DEFAULT_THEME) { $themeFile = StyleSheet::getThemeFile($formData['theme']); $file = $themeFile !== null ? @file_get_contents($themeFile) : false; - if ($file && ! preg_match(StyleSheet::REGEX_ALL_MODE_QUERY, $file)) { + if ($file && strpos($file, StyleSheet::LIGHT_MODE_IDENTIFIER) === false) { $disabled = ['', 'light', 'system']; - if (preg_match(StyleSheet::REGEX_AUTO_MODE_QUERY, $file)) { - $value = 'system'; - $disabled = ['', 'light']; - } } } diff --git a/library/Icinga/Web/StyleSheet.php b/library/Icinga/Web/StyleSheet.php index d388f5924..1033f08db 100644 --- a/library/Icinga/Web/StyleSheet.php +++ b/library/Icinga/Web/StyleSheet.php @@ -41,19 +41,11 @@ class StyleSheet ]; /** - * RegEx pattern for matching full css @media query of theme mode + * Sequence that signals that a theme supports light mode * * @var string */ - const REGEX_ALL_MODE_QUERY = '/@media\s*\(\s*min-height\s*:\s*@prefer-light-color-scheme\s*\)\s*,' . - '\s*\(\s*prefers-color-scheme\s*:\s*light\s*\)\s*and\s*\(\s*min-height\s*:\s*@enable-color-preference\s*\)/'; - - /** - * RegEx pattern for matching css @media query of theme mode - * - * @var string - */ - const REGEX_AUTO_MODE_QUERY = '/@media.*prefers-color-scheme/'; + const LIGHT_MODE_IDENTIFIER = '@light-mode:'; /** * Array of core LESS files Web 2 sends to the client @@ -178,12 +170,8 @@ class StyleSheet $mode = 'none'; if ($user = Auth::getInstance()->getUser()) { - $file = $themePath !== null ? @file_get_contents($themePath) : ''; - if ($file && $file !== '' && ! preg_match(self::REGEX_ALL_MODE_QUERY, $file)) { - if (preg_match(self::REGEX_AUTO_MODE_QUERY, $file)) { - $mode = 'system'; - } - } else { + $file = $themePath !== null ? @file_get_contents($themePath) : false; + if (! $file || strpos($file, self::LIGHT_MODE_IDENTIFIER) !== false) { $mode = $user->getPreferences()->getValue('icingaweb', 'theme_mode', self::DEFAULT_MODE); } }