@allurereport/web-awesome 3.0.0-beta.22 → 3.0.0-beta.23

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-0e422701ed9861ee2c14.js"
+  "main.js": "app-e0a811d47859e51f6510.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.0-beta.22",
+  "version": "3.0.0-beta.23",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -31,11 +31,11 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/charts-api": "3.0.0-beta.22",
-    "@allurereport/core-api": "3.0.0-beta.22",
-    "@allurereport/plugin-api": "3.0.0-beta.22",
-    "@allurereport/web-commons": "3.0.0-beta.22",
-    "@allurereport/web-components": "3.0.0-beta.22",
+    "@allurereport/charts-api": "3.0.0-beta.23",
+    "@allurereport/core-api": "3.0.0-beta.23",
+    "@allurereport/plugin-api": "3.0.0-beta.23",
+    "@allurereport/web-commons": "3.0.0-beta.23",
+    "@allurereport/web-components": "3.0.0-beta.23",
     "@preact/signals": "^1.3.0",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",

package/src/assets/scss/theme.scss

@@ -59,73 +59,76 @@
   color-scheme: light;
 }
 
-:root[data-theme="dark"] {
-  --ad-other-focus: var(--ad-other-focus-night);
-  --ad-other-modal-overlay: var(--ad-other-modal-overlay-night);
-  --bg-alpha-capella-heavy: var(--bg-alpha-capella-heavy-night);
-  --bg-alpha-capella-medium: var(--bg-alpha-capella-medium-night);
-  --bg-alpha-capella: var(--bg-alpha-capella-night);
-  --bg-alpha-castor-heavy: var(--bg-alpha-castor-heavy-night);
-  --bg-base-modal: var(--bg-base-modal-night);
-  --bg-base-neutral: var(--bg-base-neutral-night);
-  --bg-base-primary: var(--bg-base-primary-night);
-  --bg-base-secondary: var(--bg-base-secondary-night);
-  --bg-control-flat-heavy: var(--bg-control-flat-heavy-night);
-  --bg-control-flat-medium: var(--bg-control-flat-medium-night);
-  --bg-control-flat: var(--bg-control-flat-night);
-  --bg-control-secondary-heavy: var(--bg-control-secondary-heavy-night);
-  --bg-control-secondary-medium: var(--bg-control-secondary-medium-night);
-  --bg-control-secondary: var(--bg-control-secondary-night);
-  --bg-support-aldebaran-heavy: var(--bg-support-aldebaran-heavy-night);
-  --bg-support-aldebaran-medium: var(--bg-support-aldebaran-medium-night);
-  --bg-support-aldebaran: var(--bg-support-aldebaran-night);
-  --bg-support-atlas-heavy: var(--bg-support-atlas-heavy-night);
-  --bg-support-atlas-medium: var(--bg-support-atlas-medium-night);
-  --bg-support-atlas: var(--bg-support-atlas-night);
-  --bg-support-capella-heavy: var(--bg-support-capella-heavy-night);
-  --bg-support-capella-medium: var(--bg-support-capella-medium-night);
-  --bg-support-capella: var(--bg-support-capella-night);
-  --bg-support-castor-heavy: var(--bg-support-castor-heavy-night);
-  --bg-support-castor-medium: var(--bg-support-castor-medium-night);
-  --bg-support-castor: var(--bg-support-castor-night);
-  --bg-support-rau: var(--bg-support-rau-night);
-  --bg-support-skat: var(--bg-support-skat-night);
-  --bg-support-sirius: var(--bg-support-sirius-night);
-  --constant-bg-base-modal: var(--constant-bg-base-modal-night);
-  --constant-bg-base-primary: var(--constant-bg-base-primary-night);
-  --constant-on-border-heavy: var(--constant-on-border-heavy-night);
-  --constant-on-icon-primary: var(--constant-on-icon-primary-night);
-  --constant-on-text-primary: var(--constant-on-text-primary-night);
-  --on-border-control: var(--on-border-control-night);
-  --on-border-heavy: var(--on-border-heavy-night);
-  --on-border-medium: var(--on-border-medium-night);
-  --on-border-muted: var(--on-border-muted-night);
-  --on-border-primary: var(--on-border-primary-night);
-  --on-icon-hint: var(--on-icon-hint-night);
-  --on-icon-primary: var(--on-icon-primary-night);
-  --on-icon-secondary: var(--on-icon-secondary-night);
-  --on-support-aldebaran-heavy: var(--on-support-aldebaran-heavy-night);
-  --on-support-aldebaran-medium: var(--on-support-aldebaran-medium-night);
-  --on-support-aldebaran: var(--on-support-aldebaran-night);
-  --on-support-atlas-heavy: var(--on-support-atlas-heavy-night);
-  --on-support-atlas-medium: var(--on-support-atlas-medium-night);
-  --on-support-atlas: var(--on-support-atlas-night);
-  --on-support-capella-heavy: var(--on-support-capella-heavy-night);
-  --on-support-capella-medium: var(--on-support-capella-medium-night);
-  --on-support-capella: var(--on-support-capella-night);
-  --on-support-castor-heavy: var(--on-support-castor-heavy-night);
-  --on-support-castor-medium: var(--on-support-castor-medium-night);
-  --on-support-castor: var(--on-support-castor-night);
-  --on-support-sirius: var(--on-support-sirius-night);
-  --on-text-hint: var(--on-text-hint-night);
-  --on-text-primary: var(--on-text-primary-night);
-  --on-text-secondary: var(--on-text-secondary-night);
-  --on-text-universal-primary: var(--on-text-universal-primary-night);
+@media (prefers-color-scheme: dark) {
+  :root[data-theme="auto"],
+  :root[data-theme="dark"] {
+    --ad-other-focus: var(--ad-other-focus-night);
+    --ad-other-modal-overlay: var(--ad-other-modal-overlay-night);
+    --bg-alpha-capella-heavy: var(--bg-alpha-capella-heavy-night);
+    --bg-alpha-capella-medium: var(--bg-alpha-capella-medium-night);
+    --bg-alpha-capella: var(--bg-alpha-capella-night);
+    --bg-alpha-castor-heavy: var(--bg-alpha-castor-heavy-night);
+    --bg-base-modal: var(--bg-base-modal-night);
+    --bg-base-neutral: var(--bg-base-neutral-night);
+    --bg-base-primary: var(--bg-base-primary-night);
+    --bg-base-secondary: var(--bg-base-secondary-night);
+    --bg-control-flat-heavy: var(--bg-control-flat-heavy-night);
+    --bg-control-flat-medium: var(--bg-control-flat-medium-night);
+    --bg-control-flat: var(--bg-control-flat-night);
+    --bg-control-secondary-heavy: var(--bg-control-secondary-heavy-night);
+    --bg-control-secondary-medium: var(--bg-control-secondary-medium-night);
+    --bg-control-secondary: var(--bg-control-secondary-night);
+    --bg-support-aldebaran-heavy: var(--bg-support-aldebaran-heavy-night);
+    --bg-support-aldebaran-medium: var(--bg-support-aldebaran-medium-night);
+    --bg-support-aldebaran: var(--bg-support-aldebaran-night);
+    --bg-support-atlas-heavy: var(--bg-support-atlas-heavy-night);
+    --bg-support-atlas-medium: var(--bg-support-atlas-medium-night);
+    --bg-support-atlas: var(--bg-support-atlas-night);
+    --bg-support-capella-heavy: var(--bg-support-capella-heavy-night);
+    --bg-support-capella-medium: var(--bg-support-capella-medium-night);
+    --bg-support-capella: var(--bg-support-capella-night);
+    --bg-support-castor-heavy: var(--bg-support-castor-heavy-night);
+    --bg-support-castor-medium: var(--bg-support-castor-medium-night);
+    --bg-support-castor: var(--bg-support-castor-night);
+    --bg-support-rau: var(--bg-support-rau-night);
+    --bg-support-skat: var(--bg-support-skat-night);
+    --bg-support-sirius: var(--bg-support-sirius-night);
+    --constant-bg-base-modal: var(--constant-bg-base-modal-night);
+    --constant-bg-base-primary: var(--constant-bg-base-primary-night);
+    --constant-on-border-heavy: var(--constant-on-border-heavy-night);
+    --constant-on-icon-primary: var(--constant-on-icon-primary-night);
+    --constant-on-text-primary: var(--constant-on-text-primary-night);
+    --on-border-control: var(--on-border-control-night);
+    --on-border-heavy: var(--on-border-heavy-night);
+    --on-border-medium: var(--on-border-medium-night);
+    --on-border-muted: var(--on-border-muted-night);
+    --on-border-primary: var(--on-border-primary-night);
+    --on-icon-hint: var(--on-icon-hint-night);
+    --on-icon-primary: var(--on-icon-primary-night);
+    --on-icon-secondary: var(--on-icon-secondary-night);
+    --on-support-aldebaran-heavy: var(--on-support-aldebaran-heavy-night);
+    --on-support-aldebaran-medium: var(--on-support-aldebaran-medium-night);
+    --on-support-aldebaran: var(--on-support-aldebaran-night);
+    --on-support-atlas-heavy: var(--on-support-atlas-heavy-night);
+    --on-support-atlas-medium: var(--on-support-atlas-medium-night);
+    --on-support-atlas: var(--on-support-atlas-night);
+    --on-support-capella-heavy: var(--on-support-capella-heavy-night);
+    --on-support-capella-medium: var(--on-support-capella-medium-night);
+    --on-support-capella: var(--on-support-capella-night);
+    --on-support-castor-heavy: var(--on-support-castor-heavy-night);
+    --on-support-castor-medium: var(--on-support-castor-medium-night);
+    --on-support-castor: var(--on-support-castor-night);
+    --on-support-sirius: var(--on-support-sirius-night);
+    --on-text-hint: var(--on-text-hint-night);
+    --on-text-primary: var(--on-text-primary-night);
+    --on-text-secondary: var(--on-text-secondary-night);
+    --on-text-universal-primary: var(--on-text-universal-primary-night);
 
-  --scrollbar-color: var(--gray-400);
-  --bg-alpha-atlas: var(--atlas-night-darken-5-12);
-  --bg-alpha-rau: var(--rau-night-darken-5-12);
-  --bg-alpha-castor: var(--castor-night-darken-5-20);
-  --bg-alpha-skat: var(--skat-night-darken-5-12);
-  color-scheme: dark;
+    --scrollbar-color: var(--gray-400);
+    --bg-alpha-atlas: var(--atlas-night-darken-5-12);
+    --bg-alpha-rau: var(--rau-night-darken-5-12);
+    --bg-alpha-castor: var(--castor-night-darken-5-20);
+    --bg-alpha-skat: var(--skat-night-darken-5-12);
+    color-scheme: dark;
+  }
 }

package/src/stores/theme.ts

@@ -1,32 +1,30 @@
 import { getReportOptions } from "@allurereport/web-commons";
+import type { Theme } from "@allurereport/web-components";
 import { signal } from "@preact/signals";
 import type { AwesomeReportOptions } from "../../types.js";
 
-type Theme = "light" | "dark";
+export const themeStore = signal<Theme>("auto");
 
-export const themeStore = signal<Theme>("light");
+export const setTheme = (mode: "light" | "dark" | "auto") => {
+  themeStore.value = mode;
 
-export const setTheme = (newTheme: Theme): void => {
-  themeStore.value = newTheme;
-  document.documentElement.setAttribute("data-theme", newTheme);
-  window.localStorage.setItem("theme", newTheme);
+  try {
+    window.localStorage.setItem("theme", mode);
+  } catch {}
+
+  document.documentElement.setAttribute("data-theme", mode);
 };
 
 export const toggleTheme = () => {
-  setTheme(themeStore.value === "light" ? "dark" : "light");
+  const order = ["light", "dark", "auto"];
+  const current = themeStore.value;
+  const next = order[(order.indexOf(current) + 1) % order.length] as Theme;
+  setTheme(next);
 };
 
 export const getTheme = () => {
   const { theme } = getReportOptions<AwesomeReportOptions>() ?? {};
   const themeFromLS = (window.localStorage.getItem("theme") as Theme | null) || (theme as Theme);
 
-  if (themeFromLS) {
-    setTheme(themeFromLS);
-    return;
-  }
-
-  const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
-  const initialTheme = prefersDarkScheme ? "dark" : "light";
-
-  setTheme(initialTheme);
+  setTheme(themeFromLS);
 };

package/types.d.ts

@@ -1,6 +1,6 @@
 import type {
-  CiDescriptor,
   AttachmentTestStepResult,
+  CiDescriptor,
   DefaultTreeGroup,
   HistoryTestResult,
   TestFixtureResult,
@@ -17,9 +17,9 @@ export type AwesomeReportOptions = {
   allureVersion: string;
   reportName?: string;
   logo?: string;
-  theme?: "light" | "dark";
+  theme?: "light" | "dark" | "auto";
   groupBy?: string[];
-  reportLanguage?: "en" | "ru";
+  reportLanguage?: "en";
   createdAt: number;
   reportUuid: string;
   layout?: Layout;