@oneuptime/common 11.4.0 → 11.5.0

package/UI/Components/Workflow/Component.tsx

@@ -36,8 +36,9 @@ const getCategoryColors: (
 ): CategoryColorScheme => {
   if (componentType === ComponentType.Trigger) {
     return {
-      bg: "#fefce8",
-      border: "#fde68a",
+      bg: "color-mix(in srgb, #f59e0b 12%, var(--ou-surface-primary, #ffffff))",
+      border:
+        "color-mix(in srgb, #f59e0b 38%, var(--ou-border-default, #e5e7eb))",
       headerBg: "linear-gradient(135deg, #f59e0b, #d97706)",
       headerText: "#ffffff",
       iconColor: "#ffffff",
@@ -52,8 +53,9 @@ const getCategoryColors: (
 
   if (lowerCategory.includes("condition") || lowerCategory.includes("logic")) {
     return {
-      bg: "#faf5ff",
-      border: "#e9d5ff",
+      bg: "color-mix(in srgb, #a855f7 12%, var(--ou-surface-primary, #ffffff))",
+      border:
+        "color-mix(in srgb, #a855f7 38%, var(--ou-border-default, #e5e7eb))",
       headerBg: "linear-gradient(135deg, #a855f7, #7c3aed)",
       headerText: "#ffffff",
       iconColor: "#ffffff",
@@ -66,8 +68,9 @@ const getCategoryColors: (
 
   if (lowerCategory.includes("api") || lowerCategory.includes("webhook")) {
     return {
-      bg: "#eff6ff",
-      border: "#bfdbfe",
+      bg: "color-mix(in srgb, #3b82f6 12%, var(--ou-surface-primary, #ffffff))",
+      border:
+        "color-mix(in srgb, #3b82f6 38%, var(--ou-border-default, #e5e7eb))",
       headerBg: "linear-gradient(135deg, #3b82f6, #2563eb)",
       headerText: "#ffffff",
       iconColor: "#ffffff",
@@ -87,8 +90,9 @@ const getCategoryColors: (
     lowerCategory.includes("notification")
   ) {
     return {
-      bg: "#ecfdf5",
-      border: "#a7f3d0",
+      bg: "color-mix(in srgb, #10b981 12%, var(--ou-surface-primary, #ffffff))",
+      border:
+        "color-mix(in srgb, #10b981 38%, var(--ou-border-default, #e5e7eb))",
       headerBg: "linear-gradient(135deg, #10b981, #059669)",
       headerText: "#ffffff",
       iconColor: "#ffffff",
@@ -105,8 +109,9 @@ const getCategoryColors: (
     lowerCategory.includes("custom")
   ) {
     return {
-      bg: "#fef2f2",
-      border: "#fecaca",
+      bg: "color-mix(in srgb, #ef4444 12%, var(--ou-surface-primary, #ffffff))",
+      border:
+        "color-mix(in srgb, #ef4444 38%, var(--ou-border-default, #e5e7eb))",
       headerBg: "linear-gradient(135deg, #ef4444, #dc2626)",
       headerText: "#ffffff",
       iconColor: "#ffffff",
@@ -119,8 +124,9 @@ const getCategoryColors: (
 
   if (lowerCategory.includes("json") || lowerCategory.includes("util")) {
     return {
-      bg: "#f0fdf4",
-      border: "#bbf7d0",
+      bg: "color-mix(in srgb, #22c55e 12%, var(--ou-surface-primary, #ffffff))",
+      border:
+        "color-mix(in srgb, #22c55e 38%, var(--ou-border-default, #e5e7eb))",
       headerBg: "linear-gradient(135deg, #22c55e, #16a34a)",
       headerText: "#ffffff",
       iconColor: "#ffffff",
@@ -137,8 +143,9 @@ const getCategoryColors: (
     lowerCategory.includes("timer")
   ) {
     return {
-      bg: "#fff7ed",
-      border: "#fed7aa",
+      bg: "color-mix(in srgb, #f97316 12%, var(--ou-surface-primary, #ffffff))",
+      border:
+        "color-mix(in srgb, #f97316 38%, var(--ou-border-default, #e5e7eb))",
       headerBg: "linear-gradient(135deg, #f97316, #ea580c)",
       headerText: "#ffffff",
       iconColor: "#ffffff",
@@ -151,8 +158,8 @@ const getCategoryColors: (
 
   // Default / database models
   return {
-    bg: "#f8fafc",
-    border: "#e2e8f0",
+    bg: "var(--ou-surface-secondary, #f8fafc)",
+    border: "var(--ou-border-default, #e2e8f0)",
     headerBg: "linear-gradient(135deg, #6366f1, #4f46e5)",
     headerText: "#ffffff",
     iconColor: "#ffffff",
@@ -223,8 +230,14 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         style={{
           width: "16rem",
           borderRadius: "12px",
-          border: `2px dashed ${isHovering ? "#94a3b8" : "#cbd5e1"}`,
-          backgroundColor: isHovering ? "#f8fafc" : "#ffffff",
+          border: `2px dashed ${
+            isHovering
+              ? "var(--ou-text-subtle, #94a3b8)"
+              : "var(--ou-border-strong, #cbd5e1)"
+          }`,
+          backgroundColor: isHovering
+            ? "var(--ou-surface-secondary, #f8fafc)"
+            : "var(--ou-surface-primary, #ffffff)",
           padding: "1.5rem",
           display: "flex",
           flexDirection: "column",
@@ -245,7 +258,9 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             width: "2.5rem",
             height: "2.5rem",
             borderRadius: "50%",
-            backgroundColor: isHovering ? "#e2e8f0" : "#f1f5f9",
+            backgroundColor: isHovering
+              ? "var(--ou-border-default, #e2e8f0)"
+              : "var(--ou-surface-tertiary, #f1f5f9)",
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
@@ -255,7 +270,9 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
           <Icon
             icon={IconProp.Add}
             style={{
-              color: isHovering ? "#64748b" : "#94a3b8",
+              color: isHovering
+                ? "var(--ou-text-muted, #64748b)"
+                : "var(--ou-text-subtle, #94a3b8)",
               width: "1.25rem",
               height: "1.25rem",
               transition: "all 0.2s ease",
@@ -264,7 +281,9 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         </div>
         <p
           style={{
-            color: isHovering ? "#64748b" : "#94a3b8",
+            color: isHovering
+              ? "var(--ou-text-muted, #64748b)"
+              : "var(--ou-text-subtle, #94a3b8)",
             fontSize: "0.8125rem",
             fontWeight: 500,
             textAlign: "center",
@@ -302,13 +321,13 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
                 ? colors.selectedBorder
                 : colors.border
         }`,
-        backgroundColor: "#ffffff",
+        backgroundColor: "var(--ou-surface-primary, #ffffff)",
         overflow: "visible",
         boxShadow: props.selected
-          ? colors.selectedShadow
+          ? `var(--ou-card-shadow-selected, ${colors.selectedShadow})`
           : isHovering
-            ? `0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -6px rgba(0, 0, 0, 0.05)`
-            : `0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.05)`,
+            ? "var(--ou-card-shadow-hover, 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -6px rgba(0, 0, 0, 0.05))"
+            : "var(--ou-card-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.05))",
         transition: "all 0.2s ease",
         transform: isHovering ? "translateY(-1px)" : "none",
         position: "relative",
@@ -364,11 +383,12 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             width: "22px",
             height: "22px",
             borderRadius: "50%",
-            backgroundColor: "#fef2f2",
+            backgroundColor:
+              "color-mix(in srgb, #ef4444 15%, var(--ou-surface-primary, #ffffff))",
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            border: "1px solid #fecaca",
+            border: "1px solid rgb(248 113 113 / 45%)",
           }}
         >
           <Icon
@@ -451,8 +471,8 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             style={{
               display: "inline-flex",
               alignItems: "center",
-              backgroundColor: "#ffffff",
-              border: "1px solid #e2e8f0",
+              backgroundColor: "var(--ou-surface-primary, #ffffff)",
+              border: "1px solid var(--ou-border-default, #e2e8f0)",
               borderRadius: "6px",
               padding: "0.125rem 0.5rem",
               marginBottom: "0.5rem",
@@ -460,7 +480,7 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
           >
             <span
               style={{
-                color: "#64748b",
+                color: "var(--ou-text-muted, #64748b)",
                 fontSize: "0.6875rem",
                 fontWeight: 500,
                 fontFamily:
@@ -475,7 +495,7 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         {/* Description */}
         <p
           style={{
-            color: "#64748b",
+            color: "var(--ou-text-muted, #64748b)",
             fontSize: "0.75rem",
             lineHeight: "1.125rem",
             margin: 0,
@@ -504,7 +524,7 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
                   props.data.metadata.outPorts.length === 1
                     ? "center"
                     : "space-between",
-                backgroundColor: "#ffffff",
+                backgroundColor: "var(--ou-surface-primary, #ffffff)",
                 borderRadius: "0 0 10px 10px",
               }}
             >
@@ -513,7 +533,7 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
                   <Tooltip key={i} text={port.description || ""}>
                     <span
                       style={{
-                        color: "#94a3b8",
+                        color: "var(--ou-text-subtle, #94a3b8)",
                         fontSize: "0.6875rem",
                         fontWeight: 500,
                       }}

package/UI/Components/Workflow/ComponentPortViewer.tsx

@@ -34,8 +34,8 @@ const ComponentPortViewer: FunctionComponent<ComponentProps> = (
                   gap: "0.625rem",
                   padding: "0.5rem 0.75rem",
                   borderRadius: "8px",
-                  backgroundColor: "#f8fafc",
-                  border: "1px solid #f1f5f9",
+                  backgroundColor: "var(--ou-surface-secondary, #f8fafc)",
+                  border: "1px solid var(--ou-border-subtle, #f1f5f9)",
                   marginBottom: "0.375rem",
                 }}
               >
@@ -44,7 +44,7 @@ const ComponentPortViewer: FunctionComponent<ComponentProps> = (
                     width: "8px",
                     height: "8px",
                     borderRadius: "50%",
-                    backgroundColor: "#94a3b8",
+                    backgroundColor: "var(--ou-text-subtle, #94a3b8)",
                     flexShrink: 0,
                   }}
                 />
@@ -53,7 +53,7 @@ const ComponentPortViewer: FunctionComponent<ComponentProps> = (
                     style={{
                       fontSize: "0.8125rem",
                       fontWeight: 500,
-                      color: "#334155",
+                      color: "var(--ou-text-secondary, #334155)",
                       margin: 0,
                       lineHeight: "1.25rem",
                     }}
@@ -61,7 +61,7 @@ const ComponentPortViewer: FunctionComponent<ComponentProps> = (
                     {port.title}
                     <span
                       style={{
-                        color: "#94a3b8",
+                        color: "var(--ou-text-subtle, #94a3b8)",
                         fontWeight: 400,
                         fontSize: "0.6875rem",
                         marginLeft: "0.375rem",
@@ -76,7 +76,7 @@ const ComponentPortViewer: FunctionComponent<ComponentProps> = (
                     <p
                       style={{
                         fontSize: "0.75rem",
-                        color: "#94a3b8",
+                        color: "var(--ou-text-subtle, #94a3b8)",
                         margin: 0,
                         lineHeight: "1rem",
                       }}

package/UI/Components/Workflow/ComponentReturnValueViewer.tsx

@@ -37,8 +37,8 @@ const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
                   gap: "0.625rem",
                   padding: "0.5rem 0.75rem",
                   borderRadius: "8px",
-                  backgroundColor: "#f8fafc",
-                  border: "1px solid #f1f5f9",
+                  backgroundColor: "var(--ou-surface-secondary, #f8fafc)",
+                  border: "1px solid var(--ou-border-subtle, #f1f5f9)",
                   marginBottom: "0.375rem",
                 }}
               >
@@ -47,7 +47,7 @@ const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
                     style={{
                       fontSize: "0.8125rem",
                       fontWeight: 500,
-                      color: "#334155",
+                      color: "var(--ou-text-secondary, #334155)",
                       margin: 0,
                       lineHeight: "1.25rem",
                     }}
@@ -55,7 +55,7 @@ const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
                     {returnValue.name}
                     <span
                       style={{
-                        color: "#94a3b8",
+                        color: "var(--ou-text-subtle, #94a3b8)",
                         fontWeight: 400,
                         fontSize: "0.6875rem",
                         marginLeft: "0.375rem",
@@ -70,7 +70,7 @@ const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
                     <p
                       style={{
                         fontSize: "0.75rem",
-                        color: "#94a3b8",
+                        color: "var(--ou-text-subtle, #94a3b8)",
                         margin: 0,
                         lineHeight: "1rem",
                       }}
@@ -83,12 +83,12 @@ const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
                   style={{
                     fontSize: "0.6875rem",
                     fontWeight: 500,
-                    color: "#6366f1",
-                    backgroundColor: "#eef2ff",
+                    color: "var(--ou-link, #6366f1)",
+                    backgroundColor: "var(--ou-accent-soft, #eef2ff)",
                     padding: "0.125rem 0.5rem",
                     borderRadius: "100px",
                     whiteSpace: "nowrap",
-                    border: "1px solid #e0e7ff",
+                    border: "1px solid var(--ou-accent-muted, #e0e7ff)",
                   }}
                 >
                   {returnValue.type}

package/UI/Components/Workflow/ComponentsModal.tsx

@@ -404,7 +404,8 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                         style={{
                           width: "28px",
                           height: "28px",
-                          backgroundColor: "#f1f5f9",
+                          backgroundColor:
+                            "var(--ou-surface-tertiary, #f1f5f9)",
                         }}
                       >
                         <Icon
@@ -443,16 +444,16 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                                 borderRadius: "10px",
                                 border: isSelected
                                   ? "2px solid #6366f1"
-                                  : "1px solid #e2e8f0",
+                                  : "1px solid var(--ou-border-default, #e2e8f0)",
                                 backgroundColor: isSelected
-                                  ? "#eef2ff"
-                                  : "#ffffff",
+                                  ? "var(--ou-accent-soft, #eef2ff)"
+                                  : "var(--ou-surface-primary, #ffffff)",
                                 display: "flex",
                                 alignItems: "flex-start",
                                 gap: "0.75rem",
                                 boxShadow: isSelected
                                   ? "0 0 0 3px rgba(99, 102, 241, 0.1)"
-                                  : "0 1px 2px 0 rgba(0, 0, 0, 0.03)",
+                                  : "var(--ou-card-shadow, 0 1px 2px 0 rgba(0, 0, 0, 0.03))",
                               }}
                             >
                               {/* Icon */}
@@ -463,7 +464,7 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                                   borderRadius: "8px",
                                   backgroundColor: isSelected
                                     ? "#6366f1"
-                                    : "#f1f5f9",
+                                    : "var(--ou-surface-tertiary, #f1f5f9)",
                                   display: "flex",
                                   alignItems: "center",
                                   justifyContent: "center",
@@ -474,7 +475,9 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                                 <Icon
                                   icon={componentMetadata.iconProp}
                                   style={{
-                                    color: isSelected ? "#ffffff" : "#64748b",
+                                    color: isSelected
+                                      ? "#ffffff"
+                                      : "var(--ou-text-muted, #64748b)",
                                     width: "1rem",
                                     height: "1rem",
                                   }}
@@ -488,7 +491,9 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                                     style={{
                                       fontSize: "0.8125rem",
                                       fontWeight: 600,
-                                      color: isSelected ? "#4338ca" : "#1e293b",
+                                      color: isSelected
+                                        ? "var(--ou-accent-text, #4338ca)"
+                                        : "var(--ou-text-primary, #1e293b)",
                                       margin: 0,
                                       lineHeight: "1.25rem",
                                     }}
@@ -521,7 +526,9 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                                 <p
                                   style={{
                                     fontSize: "0.75rem",
-                                    color: isSelected ? "#6366f1" : "#94a3b8",
+                                    color: isSelected
+                                      ? "var(--ou-link, #6366f1)"
+                                      : "var(--ou-text-subtle, #94a3b8)",
                                     margin: 0,
                                     marginTop: "2px",
                                     lineHeight: "1rem",

package/UI/Components/Workflow/Workflow.tsx

@@ -71,8 +71,8 @@ const nodeTypes: NodeTypes = {
 
 const edgeStyle: React.CSSProperties = {
   strokeWidth: "2px",
-  stroke: "#94a3b8",
-  color: "#94a3b8",
+  stroke: "var(--ou-chart-tick, #94a3b8)",
+  color: "var(--ou-chart-tick, #94a3b8)",
 };
 
 const selectedEdgeStyle: React.CSSProperties = {
@@ -411,31 +411,33 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         minHeight: "600px",
         borderRadius: "8px",
         overflow: "hidden",
-        border: "1px solid #e2e8f0",
+        border: "1px solid var(--ou-border-default, #e2e8f0)",
       }}
     >
       <style>
         {`
           .react-flow__minimap {
             border-radius: 8px !important;
-            border: 1px solid #e2e8f0 !important;
+            border: 1px solid var(--ou-border-default, #e2e8f0) !important;
             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07) !important;
             overflow: hidden !important;
-            background: #ffffff !important;
+            background: var(--ou-surface-primary, #ffffff) !important;
           }
           .react-flow__controls {
             border-radius: 8px !important;
-            border: 1px solid #e2e8f0 !important;
+            border: 1px solid var(--ou-border-default, #e2e8f0) !important;
             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07) !important;
             overflow: hidden !important;
           }
           .react-flow__controls-button {
-            border-bottom: 1px solid #f1f5f9 !important;
+            border-bottom: 1px solid var(--ou-border-subtle, #f1f5f9) !important;
+            background: var(--ou-surface-primary, #ffffff) !important;
+            color: var(--ou-text-secondary, #475569) !important;
             width: 32px !important;
             height: 32px !important;
           }
           .react-flow__controls-button:hover {
-            background: #f8fafc !important;
+            background: var(--ou-surface-secondary, #f8fafc) !important;
           }
           .react-flow__controls-button svg {
             max-width: 14px !important;
@@ -507,9 +509,9 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             }
             return "#6366f1";
           }}
-          maskColor="rgba(241, 245, 249, 0.7)"
+          maskColor="var(--ou-flow-mask, rgba(241, 245, 249, 0.7))"
           style={{
-            backgroundColor: "#ffffff",
+            backgroundColor: "var(--ou-surface-primary, #ffffff)",
           }}
         />
         <Controls />
@@ -517,7 +519,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
           variant={BackgroundVariant.Dots}
           gap={20}
           size={1}
-          color="#cbd5e1"
+          color="var(--ou-chart-grid, #cbd5e1)"
         />
       </ReactFlow>
 

package/UI/Utils/Navigation.ts

@@ -102,7 +102,16 @@ abstract class Navigation {
       (queryString ? `?${queryString}` : "") +
       window.location.hash;
 
-    window.history.replaceState(window.history.state, "", newRelativeUrl);
+    try {
+      window.history.replaceState(window.history.state, "", newRelativeUrl);
+    } catch {
+      /*
+       * Safari throws SecurityError when replaceState is called >100
+       * times / 30s (e.g. fast typing into a URL-synced search box).
+       * React state stays authoritative; the URL re-syncs on the next
+       * successful write.
+       */
+    }
   }
 
   public static getParamByName(

package/UI/Utils/Theme.ts

@@ -0,0 +1,140 @@
+import React from "react";
+
+export enum Theme {
+  Light = "light",
+  Dark = "dark",
+}
+
+export const THEME_STORAGE_KEY: string = "oneuptime-dashboard-theme";
+export const THEME_CHANGE_EVENT: string = "oneuptime:theme-change";
+
+const LIGHT_THEME_COLOR: string = "#f9fafb";
+const DARK_THEME_COLOR: string = "#0f172a";
+
+/**
+ * Owns the dashboard theme at the document boundary. The saved preference is
+ * deliberately opt-in: a missing, invalid, or inaccessible value is light.
+ */
+export default class ThemeUtil {
+  private static hasStorageListener: boolean = false;
+
+  public static getStoredTheme(): Theme {
+    if (typeof window === "undefined") {
+      return Theme.Light;
+    }
+
+    try {
+      return window.localStorage.getItem(THEME_STORAGE_KEY) === Theme.Dark
+        ? Theme.Dark
+        : Theme.Light;
+    } catch {
+      return Theme.Light;
+    }
+  }
+
+  public static getAppliedTheme(): Theme {
+    if (typeof document === "undefined") {
+      return Theme.Light;
+    }
+
+    return document.documentElement.classList.contains(Theme.Dark)
+      ? Theme.Dark
+      : Theme.Light;
+  }
+
+  public static initialize(): void {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+
+    ThemeUtil.applyTheme(ThemeUtil.getStoredTheme(), false);
+
+    if (ThemeUtil.hasStorageListener) {
+      return;
+    }
+
+    window.addEventListener("storage", (event: StorageEvent): void => {
+      if (event.key !== THEME_STORAGE_KEY && event.key !== null) {
+        return;
+      }
+
+      ThemeUtil.applyTheme(
+        event.key === THEME_STORAGE_KEY && event.newValue === Theme.Dark
+          ? Theme.Dark
+          : Theme.Light,
+      );
+    });
+    ThemeUtil.hasStorageListener = true;
+  }
+
+  public static setTheme(theme: Theme): void {
+    if (typeof window !== "undefined") {
+      try {
+        window.localStorage.setItem(THEME_STORAGE_KEY, theme);
+      } catch {
+        // The visual theme still works when storage is unavailable.
+      }
+    }
+
+    ThemeUtil.applyTheme(theme);
+  }
+
+  public static toggleTheme(): Theme {
+    const theme: Theme =
+      ThemeUtil.getAppliedTheme() === Theme.Dark ? Theme.Light : Theme.Dark;
+    ThemeUtil.setTheme(theme);
+    return theme;
+  }
+
+  private static applyTheme(theme: Theme, notify: boolean = true): void {
+    if (typeof document === "undefined") {
+      return;
+    }
+
+    const isDark: boolean = theme === Theme.Dark;
+    const root: HTMLElement = document.documentElement;
+    root.classList.toggle(Theme.Dark, isDark);
+    root.dataset["theme"] = theme;
+    root.style.colorScheme = theme;
+
+    const themeColor: HTMLMetaElement | null = document.querySelector(
+      'meta[name="theme-color"]:not([media])',
+    );
+    themeColor?.setAttribute(
+      "content",
+      isDark ? DARK_THEME_COLOR : LIGHT_THEME_COLOR,
+    );
+
+    if (notify && typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent(THEME_CHANGE_EVENT, {
+          detail: { theme },
+        }),
+      );
+    }
+  }
+}
+
+const subscribeToTheme: (onStoreChange: () => void) => () => void = (
+  onStoreChange: () => void,
+): (() => void) => {
+  if (typeof window === "undefined") {
+    return (): void => {};
+  }
+
+  window.addEventListener(THEME_CHANGE_EVENT, onStoreChange);
+  return (): void => {
+    window.removeEventListener(THEME_CHANGE_EVENT, onStoreChange);
+  };
+};
+
+/** Reactively reads the theme applied to the document root. */
+export const useTheme: () => Theme = (): Theme => {
+  return React.useSyncExternalStore(
+    subscribeToTheme,
+    ThemeUtil.getAppliedTheme,
+    (): Theme => {
+      return Theme.Light;
+    },
+  );
+};