feat: Color scheme util

novuhq · May 15, 2024 · 8bc533d · 8bc533d
1 parent 40a3d8f
commit 8bc533d
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 3 deletions.
diff --git a/libs/design-system/src/color-scheme/getColorScheme.ts b/libs/design-system/src/color-scheme/getColorScheme.ts
@@ -0,0 +1,31 @@
+import { ColorScheme } from './ColorScheme';
+import { getColorSchemeHtmlElement } from './getColorSchemeHtmlElement';
+
+const DEFAULT_COLOR_SCHEME: ColorScheme = 'light';
+
+/**
+ * Gets the user's preferred color scheme according to their browser settings.
+ * @returns ColorScheme
+ */
+export const getBrowserColorScheme = (): ColorScheme => {
+  return window?.matchMedia?.(`(prefers-color-scheme: dark)`)?.matches ? 'dark' : DEFAULT_COLOR_SCHEME;
+};
+
+/**
+ * Get the current color scheme of the application based on the application html.
+ * @returns ColorScheme
+ */
+export const getCurrentColorScheme = (): ColorScheme => {
+  const htmlElem = getColorSchemeHtmlElement();
+
+  // fallback to browser preferences if there isn't an html element
+  if (!htmlElem?.classList) {
+    return getBrowserColorScheme();
+  }
+
+  return htmlElem.classList.contains('dark')
+    ? 'dark'
+    : htmlElem.classList.contains('light')
+    ? 'light'
+    : DEFAULT_COLOR_SCHEME;
+};
diff --git a/libs/design-system/src/color-scheme/getColorSchemeHtmlElement.ts b/libs/design-system/src/color-scheme/getColorSchemeHtmlElement.ts
@@ -0,0 +1,14 @@
+/** Get the innermost <html> element that serves as the basis for our theme */
+export const getColorSchemeHtmlElement = (): HTMLHtmlElement | null => {
+  /**
+   * Avoid issues with multiple `html` elements (like in Storybook) by getting all html elements
+   * and taking the innermost one
+   */
+  const htmlElements = document.querySelectorAll('html');
+
+  if (!htmlElements?.length) {
+    return null;
+  }
+
+  return htmlElements.item(htmlElements.length - 1);
+};
diff --git a/libs/design-system/src/color-scheme/index.ts b/libs/design-system/src/color-scheme/index.ts
@@ -1,3 +1,4 @@
 export * from './ColorScheme';
 export * from './mapThemeStatusToColorScheme';
 export * from './useColorScheme';
+export * from './getColorScheme';
diff --git a/libs/design-system/src/color-scheme/useColorScheme.ts b/libs/design-system/src/color-scheme/useColorScheme.ts
@@ -3,6 +3,7 @@ import { useLocalThemePreference, ColorSchemePreferenceEnum } from '@novu/shared
 import { useColorScheme as useMantineColorScheme } from '@mantine/hooks';
 import { ColorScheme } from './ColorScheme';
 import { mapThemeStatusToColorScheme } from './mapThemeStatusToColorScheme';
+import { getColorSchemeHtmlElement } from './getColorSchemeHtmlElement';
 
 /**
  * Handle behavior for changing ColorSchemes or ThemeStatuses
@@ -14,9 +15,10 @@ export const useColorScheme = () => {
 
   const setColorScheme = useCallback(
     (newColorScheme: ColorScheme) => {
-      // avoid issues with multiple `html` elements (like in Storybook)
-      const htmlElements = document.querySelectorAll('html');
-      const htmlElem = htmlElements.item(htmlElements.length - 1);
+      const htmlElem = getColorSchemeHtmlElement();
+      if (!htmlElem) {
+        return;
+      }
 
       htmlElem.className = newColorScheme;
       _setColorScheme(newColorScheme);