Remove useless code and fix dark mode screenshots

Author: tzi

plugins/CoreHome/CoreHome.php

@@ -25,7 +25,6 @@
 use Piwik\Plugins\FeatureFlags\FeatureFlagManager;
 use Piwik\Plugins\PrivacyManager\FeatureFlags\PrivacyCompliance;
 use Piwik\Plugins\SegmentEditor\Settings\LimitSegments;
-use Piwik\Plugins\UsersManager\UserPreferences;
 use Piwik\Segment\SegmentsList;
 use Piwik\SettingsPiwik;
 use Piwik\SettingsServer;
@@ -76,17 +75,7 @@ public function setTrackerCacheGeneral(&$cacheGeneral)
 
     public function addStylesheets(&$mergedContent)
     {
-        $themeMode = ThemeStyles::LIGHT_MODE;
-        // During installation (no local config / no DB yet), resolving user preferences can fail.
-        // Keep stylesheet generation DB-independent in that case by falling back to light mode.
-        if (SettingsPiwik::isMatomoInstalled()) {
-            try {
-                $themeMode = (new UserPreferences())->getThemeMode();
-            } catch (\Throwable $e) {
-                $themeMode = ThemeStyles::LIGHT_MODE;
-            }
-        }
-        $themeStyles = ThemeStyles::get($themeMode);
+        $themeStyles = ThemeStyles::get();
         $mergedContent = $themeStyles->toLessCode() . "\n" . $mergedContent;
     }
 

plugins/CoreHome/tests/Unit/CoreHomeTest.php

@@ -9,6 +9,7 @@
 
 namespace Piwik\Plugins\CoreHome\tests\Unit;
 
+use Piwik\Plugin\ThemeStyles;
 use Piwik\Plugins\CoreHome\CoreHome;
 
 /**
@@ -73,6 +74,15 @@ public function testFilterMergedJavaScriptsShouldRemoveMultipleSourceMapDefiniti
         $this->assertSame($expected, $content);
     }
 
+    public function testAddStylesheetsPrependsModeAgnosticThemeStyles()
+    {
+        $content = '.existing { color: red; }';
+
+        $this->coreHome->addStylesheets($content);
+
+        $this->assertSame(ThemeStyles::get()->toLessCode() . "\n" . '.existing { color: red; }', $content);
+    }
+
     public function getJavaScriptsContainingNoSourceMapDefinition()
     {
         $js = array();

plugins/ExampleTheme/ExampleTheme.php

@@ -23,5 +23,15 @@ public function registerEvents()
     public function configureThemeVariables(Plugin\ThemeStyles $vars)
     {
         $vars->fontFamilyBase = 'Verdana, sans-serif';
+        $vars->colorBrand = ['#5793d4', '#5793d4'];
+        $vars->colorBackgroundBase = ['#d9e0e3', '#151819'];
+        $vars->colorHeaderBackground = ['#0091ea', '#2b3138'];
+        $vars->colorHeaderText = ['#0d0d0d', '#ccc'];
+        $vars->colorWidgetTitleBackground = ['#80d8ff', '#202329'];
+        $vars->colorWidgetTitleText = ['#01579b', '#ccc'];
+        $vars->colorMenuContrastText = ['#0091ea', '#ccc'];
+        $vars->colorMenuContrastTextActive = ['#006064', '#fff'];
+        $vars->colorMenuContrastTextSelected = ['#00838f', '#ccc'];
+        $vars->colorMenuContrastBackground = ['#e1f5fe', '#202329'];
     }
 }

plugins/ExampleTheme/stylesheets/theme.less

@@ -1,48 +1,2 @@
-@theme-fontFamily-base: Arial, Verdana, sans-serif;
-
-@theme-color-brand: #5793d4;
-@theme-color-background-base: #d9e0e3;
-@theme-color-header-background: #0091ea;
-@theme-color-header-text: #0d0d0d;
-
-@theme-color-widget-title-background: #80d8ff;
-@theme-color-widget-title-text: #01579b;
-
-@theme-color-menu-contrast-text: #0091ea;
-@theme-color-menu-contrast-textActive: #006064;
-@theme-color-menu-contrast-textSelected: #00838f;
-@theme-color-menu-contrast-background: #e1f5fe;
-
-/*
-@theme-color-brand:                    #d2312d;
-@theme-color-brand-contrast:           #ffffff;
-
-@theme-color-widget-title-text:        #0d0d0d;
-@theme-color-widget-title-background:  #f2f2f2;
-
-@theme-color-menu-contrast-text:       #666666;
-@theme-color-menu-contrast-textActive: #0d0d0d;
-@theme-color-menu-contrast-textSelected: @theme-color-menu-contrast-text;
-@theme-color-menu-contrast-background: #f2f2f2;
-
-@theme-color-text:                     #0d0d0d;
-@theme-color-text-light:               #444444;
-@theme-color-text-lighter:             #666666;
-@theme-color-link:                     #1e93d1;
-
-@theme-color-background-base:          #fff;
-@theme-color-background-tinyContrast:  #f2f2f2;
-@theme-color-background-lowContrast:   #cccccc;
-@theme-color-background-contrast:      #5F5A60;
-@theme-color-background-highContrast:  #202020;
-@theme-color-base-series:              #ee3024;
-
-@graph-colors-data-series1: #d2312d;
-@graph-colors-data-series2: #1f78b4;
-@graph-colors-data-series3: #ff7f00;
-@graph-colors-data-series4: #33a02c;
-@graph-colors-data-series5: #6a3d9a;
-@graph-colors-data-series6: #b15928;
-@graph-colors-data-series7: #fdbf6f;
-@graph-colors-data-series8: #cab2d6;
-*/
+// Theme colors are defined through Theme.configureThemeVariables so they can
+// switch at runtime between light and dark mode.

plugins/Morpheus/templates/demo.twig

@@ -13,20 +13,20 @@
         .grid-demo [class^=col-] {
             padding-top: 10px;
             padding-bottom: 10px;
-            background-color: #eee;
-            border: 1px solid #ddd;
+            background-color: var(--theme-color-background-lowContrast);
+            border: 1px solid var(--theme-color-border);
         }
         .demo {
             margin: 0 0 15px 0;
-            background-color: #fff;
-            border: solid 1px #ddd;
+            background-color: var(--theme-color-background-contrast);
+            border: solid 1px var(--theme-color-border);
             border-radius: 4px 4px 0 0;
             padding: 25px;
         }
         .demo-code {
             padding: 9px 14px;
-            background-color: #f7f7f9;
-            border: 1px solid #e1e1e8;
+            background-color: var(--theme-color-background-tinyContrast);
+            border: 1px solid var(--theme-color-border);
             margin: -16px 0 15px;
             border-bottom-right-radius: 4px;
             border-bottom-left-radius: 4px;
@@ -44,8 +44,8 @@
             margin-left: auto;
             min-height: 20px;
             padding: 19px;
-            background-color: #f5f5f5;
-            border: 1px solid #e3e3e3;
+            background-color: var(--theme-color-background-tinyContrast);
+            border: 1px solid var(--theme-color-border);
             border-radius: 4px;
         }
         .demo .form-group > h3 {