Merge pull request #4667 from Icinga/change-theme-mode-detection

Change mode detection in themes

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'];
-                }
             }
         }
 

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
@@ -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);
             }
         }

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)
     }
   }
-}
+};

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)

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);
   }
-}
+};

public/css/modes/dark.less

@@ -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;

public/css/modes/light.less

@@ -2,4 +2,3 @@
 
 @enable-color-preference: 999999px;
 @prefer-light-color-scheme: 0px;
-@prefer-dark-color-scheme: 999999px;

public/css/modes/none.less

@@ -2,4 +2,3 @@
 
 @enable-color-preference: 999999px;
 @prefer-light-color-scheme: 999999px;
-@prefer-dark-color-scheme: 999999px;

public/css/modes/system.less

@@ -2,4 +2,3 @@
 
 @enable-color-preference: 0px;
 @prefer-light-color-scheme: 999999px;
-@prefer-dark-color-scheme: 999999px;