add config option default_theme_dark

Signed-off-by: Sven Nierlein <[email protected]>

Author: sni

Changes

@@ -2,6 +2,8 @@ This file documents the revision history for the Monitoring Webinterface Thruk.
 
 next:
           - improve logs performance when using logcache
+          - improve switching light/dark mode automatically
+          - add config option default_theme_dark
           - fix minemap missing services if user is only authorized for service but not the host
           - fix back button for embedded links, like pnp or grafana
           - Panorama:

docs/documentation/configuration.asciidoc

@@ -267,11 +267,20 @@ ex.:
 === default_theme
 
 Default theme to use for all users. Must be a valid sub directory in
-the themes folder.
+the `themes_path` folder.
 
 ex.:
 
-  default_theme = Thruk
+  default_theme = Light
+
+
+=== default_theme_dark
+
+Default theme to use for if the user prefers a dark theme.
+
+ex.:
+
+  default_theme_dark = Dark
 
 
 === first_day_of_week

lib/Thruk/Action/AddDefaults.pm

@@ -79,23 +79,24 @@ sub begin {
     # use pager?
     Thruk::Utils::set_paging_steps($c, $c->config->{'paging_steps'});
 
+    ###############################
     # which theme?
     my $available_themes = Thruk::Base::array2hash($c->config->{'themes'});
-    my($param_theme, $cookie_theme);
-    if( $c->req->parameters->{'theme'} ) {
-        $param_theme = $c->req->parameters->{'theme'};
-    }
-    elsif($c->cookies('thruk_theme') ) {
-        my $theme_cookie = $c->cookies('thruk_theme');
-        $cookie_theme = $theme_cookie if(defined $theme_cookie && defined $available_themes->{$theme_cookie});
+    my $theme            = $c->req->parameters->{'theme'} || $c->cookies('thruk_theme') || 'auto:';
+    if($theme =~ m/^auto:(.*)/mx) {
+        if($1 eq 'dark') {
+            $theme = $c->config->{'default_theme_dark'};
+        } else {
+            $theme = $c->config->{'default_theme'};
+        }
     }
-    my $theme = $param_theme || $cookie_theme || $c->config->{'default_theme'};
     $theme = $c->config->{'default_theme'} unless defined $available_themes->{$theme};
     $theme = 'Light'                       unless defined $available_themes->{$theme};
     $theme = $c->config->{'themes'}->[0]   unless defined $available_themes->{$theme};
-    $c->stash->{'theme'} = $theme || 'None';
-    $c->stash->{'cookie_theme'} = $cookie_theme // '';
+    $c->stash->{'theme'}        = $theme || 'Broken';
+    $c->stash->{'cookie_theme'} = $c->cookies('thruk_theme') // '';
 
+    ###############################
     if(exists $c->req->parameters->{'noheader'}) {
         $c->req->parameters->{'hidetop'}  = 1;
     }

lib/Thruk/Config.pm

@@ -76,6 +76,7 @@ my $base_defaults = {
     'group_paging_grid'                     => '*5, 10, 50, all',
     'group_paging_summary'                  => '*10, 50, 100, all',
     'default_theme'                         => 'Light',
+    'default_theme_dark'                    => 'Dark',
     'datetime_format'                       => '%Y-%m-%d  %H:%M:%S',
     'datetime_format_long'                  => '%a %b %e %H:%M:%S %Z %Y',
     'datetime_format_today'                 => '%H:%M:%S',

root/thruk/javascript/thruk-3.12.js

@@ -1077,20 +1077,34 @@ function preventDblEvents(el) {
     return false;
 }
 
-function switchTheme(sel, store) {
-    theme = sel;
+function switchTheme(sel) {
     if(sel && sel.tagName) {
-        theme = jQuery(sel).val();
+        sel = jQuery(sel).val();
+    }
+    if(is_array(sel)) {
+        sel = sel[0];
     }
-    if(is_array(theme)) {
-        theme = theme[0];
+
+    var auto = "";
+    if(sel.match(/^auto:/)) {
+        sel  = theme_default;
+        auto = "auto:light";
+        if(isDarkModeEnabled()) {
+            sel  = theme_default_dark;
+            auto = "auto:dark";
+        }
+        cookieSave('thruk_theme', auto);
     }
+    if(theme == sel) {
+        return;
+    }
+    theme = sel;
     if(theme.match(/dark/i)) {
         jQuery("BODY").addClass("dark");
     } else {
         jQuery("BODY").removeClass("dark");
     }
-    if(store !== false) {
+    if(!auto) {
         cookieSave('thruk_theme', theme);
     }
     jQuery("LINK.maintheme").attr("href", url_prefix+"themes/"+theme+"/stylesheets/"+theme+".css");

templates/_common_js.tt

@@ -16,7 +16,8 @@
   var product_prefix      = '[% product_prefix %]';
   var cookie_path         = '[% cookie_path %]';
   var theme               = '[% theme %]';
-  var themes              = [% json_encode(c.config.themes) %];
+  var theme_default       = '[% c.config.default_theme %]';
+  var theme_default_dark  = '[% c.config.default_theme_dark %]';
   var has_expire_acks     = [% IF has_expire_acks %]true[% ELSE %]false[% END %];
   var fav_counter         = [% IF fav_counter +%]true[% ELSE %]false[% END %];
   var perf_bar_mode       = '[% perf_bar_mode %]';
@@ -83,20 +84,14 @@
 
   // switch to dark theme if prefered by the user
   var cookieTheme = readCookie('thruk_theme');
-  if(!cookieTheme && isDarkModeEnabled()) {
-    // user has not set any theme yet and prefers dark mode
-    if(jQuery.inArray(themes, "Dark")) {
-      switchTheme("Dark", false);
-    } else {
-      // use first theme which has dark in name
-      jQuery.each(themes, function(i, name) {
-        if(name.match(/dark/i)) {
-          switchTheme(name, false);
-          return false;
-        }
-      });
-    }
+  if(!cookieTheme || cookieTheme.match(/^auto:/)) {
+    switchTheme(cookieTheme);
+  }
+  // watch for changes
+  if(window.matchMedia) {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+      switchTheme(cookieTheme);
+    });
   }
-
 -->
 </script>

templates/_header_prefs.tt

@@ -17,22 +17,21 @@
     <th class="align-middle"><i class="uil uil-brush-alt"></i></th>
     <th class="align-middle">Theme</th>
     <td class="flex gap-x-1">
-      [% IF c.config.themes.size > 4 %]
+      [% IF c.config.themes.size > 1 %]
         <select name="theme" id="pref_theme" class="w-40" onchange="switchTheme(this)">
+          <option value="auto:"[% IF !cookie_theme || cookie_theme.match('/^auto:/') %] selected[% END %]>system default (auto.)</option>
           [% FOR t = c.config.themes %]
-          <option value="[% t | html %]"[% IF cookie_theme && t == theme %] selected[% END %]>[% t | html %]</option>
+          <option value="[% t | html %]"[% IF cookie_theme && t == cookie_theme %] selected[% END %]>[% t | html %]</option>
           [% END %]
         </select>
       [% ELSE %]
       <div class="radiogroup min-w-[18rem]">
+        <input type="radio" name="theme" value="auto:" id="theme-auto" onchange="switchTheme('auto:')" [% IF !cookie_theme || cookie_theme.match('/^auto:/') %]checked[% END %]><label for="theme-auto" title="Use system default theme.&#013;Switches automatically between light/dark theme based on desktop preferences.">auto.</label>
         [% FOR t = c.config.themes %]
-        <input type="radio" name="theme" value="[% t | html %]" id="theme-[% t | html %]" onchange="switchTheme('[% t | html %]')" [% IF cookie_theme && t == theme %]checked[% END %]><label for="theme-[% t | html %]">[% t | html %]</label>
+        <input type="radio" name="theme" value="[% t | html %]" id="theme-[% t | html %]" onchange="switchTheme('[% t | html %]')" [% IF cookie_theme && t == cookie_theme %]checked[% END %]><label for="theme-[% t | html %]">[% t | html %]</label>
         [% END %]
       </div>
       [% END %]
-      <button class="iconOnly" onclick="cookieRemove('thruk_theme'); reloadPage(50, true); return false;" title="use system default theme">
-        <i class="uil uil-cloud-times"></i>
-      </button>
     </td>
   </tr>
   [% IF show_sounds %]

thruk.conf

@@ -208,7 +208,8 @@ ssl_verify_hostnames=1
 
 ######################################
 # themes
-default_theme = Light
+default_theme      = Light
+default_theme_dark = Dark
 
 ######################################
 # path used for cookies. Do not change unless you have weird url rewrites which