Added option to set default theme (light/dark/auto) GH-241

changelog.md

@@ -764,3 +764,4 @@ See https://github.com/Daveiano/weewx-wdc/compare/v3.3.0...580071ca175a03fe4924b
 - Updated windGust display in forecast table GH-240
 - Updated sorting of min/max graphs in the `temp_min_max_avg` graph GH-247
 - Added new property for charts: `legendPosition` - Change legend position GH-228
+- Added option to set default theme (light/dark/auto) GH-241

skins/weewx-wdc/includes/html-head.inc

@@ -84,7 +84,8 @@
       "Format_is": "$gettext('Format is')",
     },
     locale: "$get_locale()",
-    time: $datetime.datetime.now().timestamp()
+    time: $datetime.datetime.now().timestamp(),
+    defaultTheme: '$DisplayOptions.get("default_theme", "auto")'
   };
 </script>
 

skins/weewx-wdc/includes/ui-shell.inc

@@ -383,6 +383,13 @@
 </script>
 
 <script>
+  // Default theme.
+  const defaultTheme = window.weewxWdcConfig.defaultTheme;
+
+  if (!("weewx.weewx_wdc.color-theme" in localStorage) && defaultTheme !== "auto") {
+    localStorage.setItem("weewx.weewx_wdc.color-theme", defaultTheme);
+  }
+
   var themeToggleDarkIcon = document.querySelectorAll(
     '[data-id="theme-toggle-dark-icon"]'
   );

skins/weewx-wdc/skin.conf

@@ -117,6 +117,9 @@ SKIN_VERSION = 3.5.0-alpha1
     # 'alternative' or 'classic'.
     layout = 'alternative'
 
+    # 'auto', 'light' or 'dark'.
+    default_theme = 'auto'
+
     # Date/Time localization for charts. Available locales: de-DE, en-US, en-GB, it-IT, nl-NL.
     # If not set, the value from weewx.conf (reports section) will be used. If lang = en, then en-US will be used (sorry GB!).
     #date_time_locale = en-US

test/e2e-tests/basic/basic.test.ts

@@ -103,6 +103,8 @@ test.describe("Basic pages display", () => {
 test("Dark mode", async ({ page }) => {
   await page.goto("artifacts-alternative-weewx-html/public_html/index.html");
 
+  await expect(page).toHaveScreenshot({ fullPage: true });
+
   // Switch to dark theme.
   await page.locator("bx-header #header-global bx-btn").click();
   await expect(page).toHaveScreenshot({ fullPage: true });
@@ -128,3 +130,15 @@ test("Dark mode", async ({ page }) => {
   ).toBeVisible();
   await expect(page).toHaveScreenshot({ fullPage: true });
 });
+
+test("Default theme dark", async ({ page }) => {
+  await page.goto("artifacts-mqtt-weewx-html/public_html/index.html");
+  await expect(page.locator("html")).toHaveClass(/dark/);
+  await expect(page).toHaveScreenshot({ fullPage: true });
+});
+
+test("Default theme light", async ({ page }) => {
+  await page.goto("artifacts-sensor-status-weewx-html/public_html/index.html");
+  await expect(page.locator("html")).not.toHaveClass(/dark/);
+  await expect(page).toHaveScreenshot({ fullPage: true });
+});

test/test_install_report/src/skin-mqtt.conf

@@ -74,6 +74,7 @@ SKIN_VERSION = 2.3.0
 
 [DisplayOptions]
     layout = 'alternative'
+    default_theme = 'dark'
     climatological_days = rainDays, summerDays, hotDays, desertDays, tropicalNights, stormDays, iceDays, frostDays
     climatological_days_per_month = True
     table_tile_observations = outTemp, outHumidity, barometer, windSpeed, windGust, windDir, rain, rainRate, snowDepth, dewpoint, windchill, heatindex, UV, ET, radiation, appTemp, cloudbase, extraTemp1, extraHumid1, extraTemp2, extraHumid2, extraTemp3, extraHumid3, extraTemp4, extraHumid4, extraTemp5, extraHumid5, extraTemp6, extraHumid6, extraTemp7, extraHumid7, extraTemp8, extraHumid8

test/test_install_report/src/skin-sensor-status.conf

@@ -111,6 +111,8 @@ SKIN_VERSION = 3.1.1
     # 'alternative' or 'classic'.
     layout = 'alternative'
 
+    default_theme = 'light'
+
     # These days will be shown on the year and statistics pages.
     climatological_days = rainDays, summerDays, hotDays, desertDays, tropicalNights, stormDays, iceDays, frostDays
     climatological_days_per_month = True