@wise/components-theming 0.0.0-experimental-88166ac → 0.0.0-experimental-12c107f

package/dist/cjs/index.d.ts

@@ -27,6 +27,8 @@ declare const isThemeModern: (theme: ComponentTheme | BaseTheme | ExtraTheme) =>
 declare const isExtraTheme: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "forest-green" | "bright-green";
 declare const isForestGreenTheme: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "forest-green";
 declare const isScreenModeDark: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => screenMode is "dark";
+declare const isScreenModeSystem: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => screenMode is "system";
+declare const getScreenMode: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => ScreenMode;
 declare const getThemeClassName: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => string;
 type ThemeProviderProps = PropsWithChildren<Theming> & {
     className?: string;
@@ -38,8 +40,9 @@ interface ThemeHookValue {
     isModern: boolean;
     isForestGreenTheme: boolean;
     isScreenModeDark: boolean;
+    getScreenMode: ScreenMode;
     className: string;
 }
 declare const useTheme: () => ThemeHookValue;
 export type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming };
-export { isThemeModern, isExtraTheme, isForestGreenTheme, isScreenModeDark, getThemeClassName, ThemeProvider, useTheme };
+export { isThemeModern, isExtraTheme, isForestGreenTheme, isScreenModeDark, isScreenModeSystem, getScreenMode, getThemeClassName, ThemeProvider, useTheme };

package/dist/cjs/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var classNames = require('classnames');
@@ -7,7 +8,6 @@ var classNames = require('classnames');
 // TODO: Change 'light' with 'legacy' in the future
 var baseThemes = ['light', 'personal'];
 var extraThemes = ['forest-green', 'bright-green'];
-var screenModes = ['light', 'dark', 'system'];
 var modernThemes = [baseThemes[1]].concat(extraThemes);
 var DEFAULT_BASE_THEME = 'light';
 var DEFAULT_SCREEN_MODE = 'light';
@@ -22,7 +22,20 @@ var isForestGreenTheme = function isForestGreenTheme(theme) {
   return theme === extraThemes[0];
 };
 var isScreenModeDark = function isScreenModeDark(theme, screenMode) {
-  return isThemeModern(theme) && screenModes[1] === screenMode;
+  return isThemeModern(theme) && screenMode === 'dark';
+};
+var isScreenModeSystem = function isScreenModeSystem(theme, screenMode) {
+  return isThemeModern(theme) && screenMode === 'system';
+};
+var getScreenMode = function getScreenMode(theme, screenMode) {
+  if (isScreenModeSystem(theme, screenMode)) {
+    if (typeof window === 'undefined') {
+      return 'light';
+    }
+    var matchesDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    return matchesDarkScheme ? 'dark' : 'light';
+  }
+  return screenMode;
 };
 var getThemeClassName = function getThemeClassName(theme, screenMode) {
   if (!isThemeModern(theme)) {
@@ -31,7 +44,7 @@ var getThemeClassName = function getThemeClassName(theme, screenMode) {
   var classes = "np-theme-personal";
   if (isExtraTheme(theme)) {
     classes += " ".concat(classes, "--").concat(theme);
-  } else if (screenModes[1] === screenMode) {
+  } else if (screenMode === 'dark') {
     classes += " ".concat(classes, "--").concat(screenMode);
   }
   return classes;
@@ -57,7 +70,7 @@ var useTheme = function useTheme() {
   var _ref = theming !== null && theming !== void 0 ? theming : FALLBACK_VALUES,
     theme = _ref.theme,
     contextScreenMode = _ref.screenMode;
-  var screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
+  var screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : getScreenMode(theme, contextScreenMode);
   return react.useMemo(function () {
     return {
       theme: theme,
@@ -65,6 +78,7 @@ var useTheme = function useTheme() {
       isModern: isThemeModern(theme),
       isForestGreenTheme: isForestGreenTheme(theme),
       isScreenModeDark: isScreenModeDark(theme, screenMode),
+      getScreenMode: getScreenMode(theme, screenMode),
       className: getThemeClassName(theme, screenMode)
     };
   }, [theme, screenMode]);
@@ -94,9 +108,16 @@ var ThemeProvider = function ThemeProvider(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? undefined : _ref$className;
   var isContextRoot = react.useContext(ThemeContext) === undefined;
+  var _useState = react.useState(getScreenMode(theme, screenMode)),
+    _useState2 = _slicedToArray.default(_useState, 2),
+    currentScreenMode = _useState2[0],
+    setCurrentScreenMode = _useState2[1];
   // RegEx to check for `np-theme-` class name
   // eslint-disable-next-line react-hooks/exhaustive-deps
   var themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g');
+  react.useEffect(function () {
+    setCurrentScreenMode(getScreenMode(theme, screenMode));
+  }, [theme, screenMode]);
   // useEffect hook used to apply the theme class to the HTML element
   react.useEffect(function () {
     if (!isNotRootProvider && isContextRoot) {
@@ -105,11 +126,11 @@ var ThemeProvider = function ThemeProvider(_ref) {
       (_document$documentEle = document.documentElement.className.match(themeClass)) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.forEach(function (item) {
         document.documentElement.classList.remove(item);
       });
-      getThemeClassName(theme, screenMode).split(' ').forEach(function (item) {
+      getThemeClassName(theme, currentScreenMode).split(' ').forEach(function (item) {
         document.documentElement.classList.add(item);
       });
     }
-  }, [isNotRootProvider, isContextRoot, theme, screenMode, themeClass]);
+  }, [isNotRootProvider, isContextRoot, theme, currentScreenMode, themeClass]);
   var contextValue = react.useMemo(function () {
     return {
       theme: theme,
@@ -126,10 +147,12 @@ var ThemeProvider = function ThemeProvider(_ref) {
 };
 
 exports.ThemeProvider = ThemeProvider;
+exports.getScreenMode = getScreenMode;
 exports.getThemeClassName = getThemeClassName;
 exports.isExtraTheme = isExtraTheme;
 exports.isForestGreenTheme = isForestGreenTheme;
 exports.isScreenModeDark = isScreenModeDark;
+exports.isScreenModeSystem = isScreenModeSystem;
 exports.isThemeModern = isThemeModern;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/helpers.ts","../../src/useTheme.ts","../../src/ThemedChildren.tsx","../../src/ThemeProvider.tsx"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark', 'system'] as const;\nexport const modernThemes = [baseThemes[1], ...extraThemes] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = (typeof baseThemes)[number];\nexport type ModernTheme = (typeof modernThemes)[number];\nexport type BaseTheme = (typeof baseThemes)[number];\nexport type ExtraTheme = (typeof extraThemes)[number];\nexport type ForestGreenTheme = (typeof extraThemes)[0];\nexport type ScreenMode = (typeof screenModes)[number];\nexport type ScreenModeDark = (typeof screenModes)[1];\nexport type ScreenModeSystem = (typeof screenModes)[2];\n\nexport const DEFAULT_BASE_THEME = 'light' as const;\nexport const DEFAULT_SCREEN_MODE = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n","import type {\n  ComponentTheme,\n  ModernTheme,\n  BaseTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  ScreenModeSystem,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ModernTheme => modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: ComponentTheme | BaseTheme | ExtraTheme): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const isScreenModeSystem = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeSystem =>\n  isThemeModern(theme as ModernTheme) && screenModes[2] === screenMode;\n\nexport const getThemeClassName = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme}`;\n  }\n\n  let classes = `np-theme-personal`;\n\n  if (isExtraTheme(theme)) {\n    classes += ` ${classes}--${theme}`;\n  } else if (screenModes[1] === screenMode) {\n    classes += ` ${classes}--${screenMode}`;\n  }\n\n  return classes;\n};\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport type { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isForestGreenTheme: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n};\n\nconst isNotProduction = () => {\n  try {\n    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n  } catch {\n    return false;\n  }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n  const theming = useContext(ThemeContext);\n\n  if (!theming && isNotProduction()) {\n    // eslint-disable-next-line no-console\n    console.warn('Call to useTheme outside a ThemeProvider');\n  }\n\n  const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;\n\n  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      isModern: isThemeModern(theme),\n      isForestGreenTheme: isForestGreenTheme(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n    }),\n    [theme, screenMode],\n  );\n};\n","import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { className?: string; children: ReactNode };\n\nexport const ThemedChildren = ({ className = undefined, children }: ThemedChildrenProps) => {\n  const { className: themeClass } = useTheme();\n\n  return <div className={classNames(themeClass, className)}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: ComponentTheme | BaseTheme | ExtraTheme;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n\n  // RegEx to check for `np-theme-` class name\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const themeClass = new RegExp(/\\bnp-theme-[a-z-]+\\b/, 'g');\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (!isNotRootProvider && isContextRoot) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.forEach((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      getThemeClassName(theme, screenMode)\n        .split(' ')\n        .forEach((item) => {\n          document.documentElement.classList.add(item);\n        });\n    }\n  }, [isNotRootProvider, isContextRoot, theme, screenMode, themeClass]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [theme, screenMode]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","concat","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","window","location","hostname","_unused","useTheme","theming","useContext","ThemeContext","console","warn","_ref","contextScreenMode","useMemo","isModern","className","ThemedChildren","_ref$className","undefined","children","_useTheme","themeClass","_jsx","classNames","createContext","ThemeProvider","_ref$theme","_ref$screenMode","_ref$isNotRootProvide","isNotRootProvider","isContextRoot","RegExp","useEffect","_document$documentEle","document","documentElement","match","forEach","item","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/helpers.ts","../../src/useTheme.ts","../../src/ThemedChildren.tsx","../../src/ThemeProvider.tsx"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark', 'system'] as const;\nexport const modernThemes = [baseThemes[1], ...extraThemes] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = (typeof baseThemes)[number];\nexport type ModernTheme = (typeof modernThemes)[number];\nexport type BaseTheme = (typeof baseThemes)[number];\nexport type ExtraTheme = (typeof extraThemes)[number];\nexport type ForestGreenTheme = (typeof extraThemes)[0];\nexport type ScreenMode = (typeof screenModes)[number];\nexport type ScreenModeDark = (typeof screenModes)[1];\nexport type ScreenModeSystem = (typeof screenModes)[2];\n\nexport const DEFAULT_BASE_THEME = 'light' as const;\nexport const DEFAULT_SCREEN_MODE = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n","import type {\n  ComponentTheme,\n  ModernTheme,\n  BaseTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  ScreenModeSystem,\n} from './const';\nimport { extraThemes, modernThemes } from './const';\n\nexport const isThemeModern = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ModernTheme => modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: ComponentTheme | BaseTheme | ExtraTheme): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark => isThemeModern(theme as ModernTheme) && screenMode === 'dark';\n\nexport const isScreenModeSystem = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeSystem => isThemeModern(theme as ModernTheme) && screenMode === 'system';\n\nexport const getScreenMode = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): ScreenMode => {\n  if (isScreenModeSystem(theme, screenMode)) {\n    if (typeof window === 'undefined') {\n      return 'light';\n    }\n    const matchesDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;\n    return matchesDarkScheme ? 'dark' : 'light';\n  }\n  return screenMode;\n};\n\nexport const getThemeClassName = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme}`;\n  }\n\n  let classes = `np-theme-personal`;\n\n  if (isExtraTheme(theme)) {\n    classes += ` ${classes}--${theme}`;\n  } else if (screenMode === 'dark') {\n    classes += ` ${classes}--${screenMode}`;\n  }\n\n  return classes;\n};\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport type { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport {\n  isThemeModern,\n  isForestGreenTheme,\n  isScreenModeDark,\n  getScreenMode,\n  getThemeClassName,\n} from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isForestGreenTheme: boolean;\n  isScreenModeDark: boolean;\n  getScreenMode: ScreenMode;\n  className: string;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n};\n\nconst isNotProduction = () => {\n  try {\n    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n  } catch {\n    return false;\n  }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n  const theming = useContext(ThemeContext);\n\n  if (!theming && isNotProduction()) {\n    // eslint-disable-next-line no-console\n    console.warn('Call to useTheme outside a ThemeProvider');\n  }\n\n  const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;\n  const screenMode =\n    theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : getScreenMode(theme, contextScreenMode);\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      isModern: isThemeModern(theme),\n      isForestGreenTheme: isForestGreenTheme(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      getScreenMode: getScreenMode(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n    }),\n    [theme, screenMode],\n  );\n};\n","import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { className?: string; children: ReactNode };\n\nexport const ThemedChildren = ({ className = undefined, children }: ThemedChildrenProps) => {\n  const { className: themeClass } = useTheme();\n\n  return <div className={classNames(themeClass, className)}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useState, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getScreenMode, getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: ComponentTheme | BaseTheme | ExtraTheme;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n  const [currentScreenMode, setCurrentScreenMode] = useState(getScreenMode(theme, screenMode));\n\n  // RegEx to check for `np-theme-` class name\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const themeClass = new RegExp(/\\bnp-theme-[a-z-]+\\b/, 'g');\n\n  useEffect(() => {\n    setCurrentScreenMode(getScreenMode(theme, screenMode));\n  }, [theme, screenMode]);\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (!isNotRootProvider && isContextRoot) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.forEach((item) => {\n        document.documentElement.classList.remove(item);\n      });\n\n      getThemeClassName(theme, currentScreenMode)\n        .split(' ')\n        .forEach((item) => {\n          document.documentElement.classList.add(item);\n        });\n    }\n  }, [isNotRootProvider, isContextRoot, theme, currentScreenMode, themeClass]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [theme, screenMode]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["baseThemes","extraThemes","modernThemes","concat","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","isScreenModeSystem","getScreenMode","window","matchesDarkScheme","matchMedia","matches","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","location","hostname","_unused","useTheme","theming","useContext","ThemeContext","console","warn","_ref","contextScreenMode","useMemo","isModern","className","ThemedChildren","_ref$className","undefined","children","_useTheme","themeClass","_jsx","classNames","createContext","ThemeProvider","_ref$theme","_ref$screenMode","_ref$isNotRootProvide","isNotRootProvider","isContextRoot","_useState","useState","_useState2","_slicedToArray","currentScreenMode","setCurrentScreenMode","RegExp","useEffect","_document$documentEle","document","documentElement","match","forEach","item","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}

package/dist/es/index.d.ts

@@ -27,6 +27,8 @@ declare const isThemeModern: (theme: ComponentTheme | BaseTheme | ExtraTheme) =>
 declare const isExtraTheme: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "forest-green" | "bright-green";
 declare const isForestGreenTheme: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "forest-green";
 declare const isScreenModeDark: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => screenMode is "dark";
+declare const isScreenModeSystem: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => screenMode is "system";
+declare const getScreenMode: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => ScreenMode;
 declare const getThemeClassName: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => string;
 type ThemeProviderProps = PropsWithChildren<Theming> & {
     className?: string;
@@ -38,8 +40,9 @@ interface ThemeHookValue {
     isModern: boolean;
     isForestGreenTheme: boolean;
     isScreenModeDark: boolean;
+    getScreenMode: ScreenMode;
     className: string;
 }
 declare const useTheme: () => ThemeHookValue;
 export type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming };
-export { isThemeModern, isExtraTheme, isForestGreenTheme, isScreenModeDark, getThemeClassName, ThemeProvider, useTheme };
+export { isThemeModern, isExtraTheme, isForestGreenTheme, isScreenModeDark, isScreenModeSystem, getScreenMode, getThemeClassName, ThemeProvider, useTheme };

package/dist/es/index.js

@@ -1,11 +1,11 @@
+import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
 import { jsx } from 'react/jsx-runtime';
-import { useContext, useMemo, createContext, useEffect } from 'react';
+import { useContext, useMemo, createContext, useState, useEffect } from 'react';
 import classNames from 'classnames';
 
 // TODO: Change 'light' with 'legacy' in the future
 var baseThemes = ['light', 'personal'];
 var extraThemes = ['forest-green', 'bright-green'];
-var screenModes = ['light', 'dark', 'system'];
 var modernThemes = [baseThemes[1]].concat(extraThemes);
 var DEFAULT_BASE_THEME = 'light';
 var DEFAULT_SCREEN_MODE = 'light';
@@ -20,7 +20,20 @@ var isForestGreenTheme = function isForestGreenTheme(theme) {
   return theme === extraThemes[0];
 };
 var isScreenModeDark = function isScreenModeDark(theme, screenMode) {
-  return isThemeModern(theme) && screenModes[1] === screenMode;
+  return isThemeModern(theme) && screenMode === 'dark';
+};
+var isScreenModeSystem = function isScreenModeSystem(theme, screenMode) {
+  return isThemeModern(theme) && screenMode === 'system';
+};
+var getScreenMode = function getScreenMode(theme, screenMode) {
+  if (isScreenModeSystem(theme, screenMode)) {
+    if (typeof window === 'undefined') {
+      return 'light';
+    }
+    var matchesDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    return matchesDarkScheme ? 'dark' : 'light';
+  }
+  return screenMode;
 };
 var getThemeClassName = function getThemeClassName(theme, screenMode) {
   if (!isThemeModern(theme)) {
@@ -29,7 +42,7 @@ var getThemeClassName = function getThemeClassName(theme, screenMode) {
   var classes = "np-theme-personal";
   if (isExtraTheme(theme)) {
     classes += " ".concat(classes, "--").concat(theme);
-  } else if (screenModes[1] === screenMode) {
+  } else if (screenMode === 'dark') {
     classes += " ".concat(classes, "--").concat(screenMode);
   }
   return classes;
@@ -55,7 +68,7 @@ var useTheme = function useTheme() {
   var _ref = theming !== null && theming !== void 0 ? theming : FALLBACK_VALUES,
     theme = _ref.theme,
     contextScreenMode = _ref.screenMode;
-  var screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
+  var screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : getScreenMode(theme, contextScreenMode);
   return useMemo(function () {
     return {
       theme: theme,
@@ -63,6 +76,7 @@ var useTheme = function useTheme() {
       isModern: isThemeModern(theme),
       isForestGreenTheme: isForestGreenTheme(theme),
       isScreenModeDark: isScreenModeDark(theme, screenMode),
+      getScreenMode: getScreenMode(theme, screenMode),
       className: getThemeClassName(theme, screenMode)
     };
   }, [theme, screenMode]);
@@ -92,9 +106,16 @@ var ThemeProvider = function ThemeProvider(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? undefined : _ref$className;
   var isContextRoot = useContext(ThemeContext) === undefined;
+  var _useState = useState(getScreenMode(theme, screenMode)),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentScreenMode = _useState2[0],
+    setCurrentScreenMode = _useState2[1];
   // RegEx to check for `np-theme-` class name
   // eslint-disable-next-line react-hooks/exhaustive-deps
   var themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g');
+  useEffect(function () {
+    setCurrentScreenMode(getScreenMode(theme, screenMode));
+  }, [theme, screenMode]);
   // useEffect hook used to apply the theme class to the HTML element
   useEffect(function () {
     if (!isNotRootProvider && isContextRoot) {
@@ -103,11 +124,11 @@ var ThemeProvider = function ThemeProvider(_ref) {
       (_document$documentEle = document.documentElement.className.match(themeClass)) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.forEach(function (item) {
         document.documentElement.classList.remove(item);
       });
-      getThemeClassName(theme, screenMode).split(' ').forEach(function (item) {
+      getThemeClassName(theme, currentScreenMode).split(' ').forEach(function (item) {
         document.documentElement.classList.add(item);
       });
     }
-  }, [isNotRootProvider, isContextRoot, theme, screenMode, themeClass]);
+  }, [isNotRootProvider, isContextRoot, theme, currentScreenMode, themeClass]);
   var contextValue = useMemo(function () {
     return {
       theme: theme,
@@ -123,5 +144,5 @@ var ThemeProvider = function ThemeProvider(_ref) {
   });
 };
 
-export { ThemeProvider, getThemeClassName, isExtraTheme, isForestGreenTheme, isScreenModeDark, isThemeModern, useTheme };
+export { ThemeProvider, getScreenMode, getThemeClassName, isExtraTheme, isForestGreenTheme, isScreenModeDark, isScreenModeSystem, isThemeModern, useTheme };
 //# sourceMappingURL=index.js.map

package/dist/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/helpers.ts","../../src/useTheme.ts","../../src/ThemedChildren.tsx","../../src/ThemeProvider.tsx"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark', 'system'] as const;\nexport const modernThemes = [baseThemes[1], ...extraThemes] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = (typeof baseThemes)[number];\nexport type ModernTheme = (typeof modernThemes)[number];\nexport type BaseTheme = (typeof baseThemes)[number];\nexport type ExtraTheme = (typeof extraThemes)[number];\nexport type ForestGreenTheme = (typeof extraThemes)[0];\nexport type ScreenMode = (typeof screenModes)[number];\nexport type ScreenModeDark = (typeof screenModes)[1];\nexport type ScreenModeSystem = (typeof screenModes)[2];\n\nexport const DEFAULT_BASE_THEME = 'light' as const;\nexport const DEFAULT_SCREEN_MODE = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n","import type {\n  ComponentTheme,\n  ModernTheme,\n  BaseTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  ScreenModeSystem,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ModernTheme => modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: ComponentTheme | BaseTheme | ExtraTheme): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const isScreenModeSystem = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeSystem =>\n  isThemeModern(theme as ModernTheme) && screenModes[2] === screenMode;\n\nexport const getThemeClassName = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme}`;\n  }\n\n  let classes = `np-theme-personal`;\n\n  if (isExtraTheme(theme)) {\n    classes += ` ${classes}--${theme}`;\n  } else if (screenModes[1] === screenMode) {\n    classes += ` ${classes}--${screenMode}`;\n  }\n\n  return classes;\n};\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport type { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isForestGreenTheme: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n};\n\nconst isNotProduction = () => {\n  try {\n    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n  } catch {\n    return false;\n  }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n  const theming = useContext(ThemeContext);\n\n  if (!theming && isNotProduction()) {\n    // eslint-disable-next-line no-console\n    console.warn('Call to useTheme outside a ThemeProvider');\n  }\n\n  const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;\n\n  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      isModern: isThemeModern(theme),\n      isForestGreenTheme: isForestGreenTheme(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n    }),\n    [theme, screenMode],\n  );\n};\n","import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { className?: string; children: ReactNode };\n\nexport const ThemedChildren = ({ className = undefined, children }: ThemedChildrenProps) => {\n  const { className: themeClass } = useTheme();\n\n  return <div className={classNames(themeClass, className)}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: ComponentTheme | BaseTheme | ExtraTheme;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n\n  // RegEx to check for `np-theme-` class name\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const themeClass = new RegExp(/\\bnp-theme-[a-z-]+\\b/, 'g');\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (!isNotRootProvider && isContextRoot) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.forEach((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      getThemeClassName(theme, screenMode)\n        .split(' ')\n        .forEach((item) => {\n          document.documentElement.classList.add(item);\n        });\n    }\n  }, [isNotRootProvider, isContextRoot, theme, screenMode, themeClass]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [theme, screenMode]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","concat","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","window","location","hostname","_unused","useTheme","theming","useContext","ThemeContext","console","warn","_ref","contextScreenMode","useMemo","isModern","className","ThemedChildren","_ref$className","undefined","children","_useTheme","themeClass","_jsx","classNames","createContext","ThemeProvider","_ref$theme","_ref$screenMode","_ref$isNotRootProvide","isNotRootProvider","isContextRoot","RegExp","useEffect","_document$documentEle","document","documentElement","match","forEach","item","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/helpers.ts","../../src/useTheme.ts","../../src/ThemedChildren.tsx","../../src/ThemeProvider.tsx"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark', 'system'] as const;\nexport const modernThemes = [baseThemes[1], ...extraThemes] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = (typeof baseThemes)[number];\nexport type ModernTheme = (typeof modernThemes)[number];\nexport type BaseTheme = (typeof baseThemes)[number];\nexport type ExtraTheme = (typeof extraThemes)[number];\nexport type ForestGreenTheme = (typeof extraThemes)[0];\nexport type ScreenMode = (typeof screenModes)[number];\nexport type ScreenModeDark = (typeof screenModes)[1];\nexport type ScreenModeSystem = (typeof screenModes)[2];\n\nexport const DEFAULT_BASE_THEME = 'light' as const;\nexport const DEFAULT_SCREEN_MODE = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n","import type {\n  ComponentTheme,\n  ModernTheme,\n  BaseTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  ScreenModeSystem,\n} from './const';\nimport { extraThemes, modernThemes } from './const';\n\nexport const isThemeModern = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ModernTheme => modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: ComponentTheme | BaseTheme | ExtraTheme): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark => isThemeModern(theme as ModernTheme) && screenMode === 'dark';\n\nexport const isScreenModeSystem = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeSystem => isThemeModern(theme as ModernTheme) && screenMode === 'system';\n\nexport const getScreenMode = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): ScreenMode => {\n  if (isScreenModeSystem(theme, screenMode)) {\n    if (typeof window === 'undefined') {\n      return 'light';\n    }\n    const matchesDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;\n    return matchesDarkScheme ? 'dark' : 'light';\n  }\n  return screenMode;\n};\n\nexport const getThemeClassName = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme}`;\n  }\n\n  let classes = `np-theme-personal`;\n\n  if (isExtraTheme(theme)) {\n    classes += ` ${classes}--${theme}`;\n  } else if (screenMode === 'dark') {\n    classes += ` ${classes}--${screenMode}`;\n  }\n\n  return classes;\n};\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport type { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport {\n  isThemeModern,\n  isForestGreenTheme,\n  isScreenModeDark,\n  getScreenMode,\n  getThemeClassName,\n} from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isForestGreenTheme: boolean;\n  isScreenModeDark: boolean;\n  getScreenMode: ScreenMode;\n  className: string;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n};\n\nconst isNotProduction = () => {\n  try {\n    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n  } catch {\n    return false;\n  }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n  const theming = useContext(ThemeContext);\n\n  if (!theming && isNotProduction()) {\n    // eslint-disable-next-line no-console\n    console.warn('Call to useTheme outside a ThemeProvider');\n  }\n\n  const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;\n  const screenMode =\n    theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : getScreenMode(theme, contextScreenMode);\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      isModern: isThemeModern(theme),\n      isForestGreenTheme: isForestGreenTheme(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      getScreenMode: getScreenMode(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n    }),\n    [theme, screenMode],\n  );\n};\n","import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { className?: string; children: ReactNode };\n\nexport const ThemedChildren = ({ className = undefined, children }: ThemedChildrenProps) => {\n  const { className: themeClass } = useTheme();\n\n  return <div className={classNames(themeClass, className)}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useState, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getScreenMode, getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: ComponentTheme | BaseTheme | ExtraTheme;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n  const [currentScreenMode, setCurrentScreenMode] = useState(getScreenMode(theme, screenMode));\n\n  // RegEx to check for `np-theme-` class name\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const themeClass = new RegExp(/\\bnp-theme-[a-z-]+\\b/, 'g');\n\n  useEffect(() => {\n    setCurrentScreenMode(getScreenMode(theme, screenMode));\n  }, [theme, screenMode]);\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (!isNotRootProvider && isContextRoot) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.forEach((item) => {\n        document.documentElement.classList.remove(item);\n      });\n\n      getThemeClassName(theme, currentScreenMode)\n        .split(' ')\n        .forEach((item) => {\n          document.documentElement.classList.add(item);\n        });\n    }\n  }, [isNotRootProvider, isContextRoot, theme, currentScreenMode, themeClass]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [theme, screenMode]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["baseThemes","extraThemes","modernThemes","concat","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","isScreenModeSystem","getScreenMode","window","matchesDarkScheme","matchMedia","matches","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","location","hostname","_unused","useTheme","theming","useContext","ThemeContext","console","warn","_ref","contextScreenMode","useMemo","isModern","className","ThemedChildren","_ref$className","undefined","children","_useTheme","themeClass","_jsx","classNames","createContext","ThemeProvider","_ref$theme","_ref$screenMode","_ref$isNotRootProvide","isNotRootProvider","isContextRoot","_useState","useState","_useState2","_slicedToArray","currentScreenMode","setCurrentScreenMode","RegExp","useEffect","_document$documentEle","document","documentElement","match","forEach","item","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/components-theming",
-  "version": "0.0.0-experimental-88166ac",
+  "version": "0.0.0-experimental-12c107f",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [

package/src/ThemeProvider.tsx

@@ -1,9 +1,9 @@
-import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';
+import { createContext, PropsWithChildren, useContext, useState, useEffect, useMemo } from 'react';
 
 import { ThemedChildren } from './ThemedChildren';
 import type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';
 import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';
-import { getThemeClassName } from './helpers';
+import { getScreenMode, getThemeClassName } from './helpers';
 
 export const ThemeContext = createContext<
   | {
@@ -23,11 +23,16 @@ export const ThemeProvider = ({
   className = undefined,
 }: ThemeProviderProps) => {
   const isContextRoot = useContext(ThemeContext) === undefined;
+  const [currentScreenMode, setCurrentScreenMode] = useState(getScreenMode(theme, screenMode));
 
   // RegEx to check for `np-theme-` class name
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g');
 
+  useEffect(() => {
+    setCurrentScreenMode(getScreenMode(theme, screenMode));
+  }, [theme, screenMode]);
+
   // useEffect hook used to apply the theme class to the HTML element
   useEffect(() => {
     if (!isNotRootProvider && isContextRoot) {
@@ -35,13 +40,14 @@ export const ThemeProvider = ({
       document.documentElement.className.match(themeClass)?.forEach((item) => {
         document.documentElement.classList.remove(item);
       });
-      getThemeClassName(theme, screenMode)
+
+      getThemeClassName(theme, currentScreenMode)
         .split(' ')
         .forEach((item) => {
           document.documentElement.classList.add(item);
         });
     }
-  }, [isNotRootProvider, isContextRoot, theme, screenMode, themeClass]);
+  }, [isNotRootProvider, isContextRoot, theme, currentScreenMode, themeClass]);
 
   const contextValue = useMemo(() => ({ theme, screenMode }), [theme, screenMode]);
 

package/src/helpers.ts

@@ -8,7 +8,7 @@ import type {
   ScreenModeDark,
   ScreenModeSystem,
 } from './const';
-import { extraThemes, screenModes, modernThemes } from './const';
+import { extraThemes, modernThemes } from './const';
 
 export const isThemeModern = (
   theme: ComponentTheme | BaseTheme | ExtraTheme,
@@ -24,14 +24,26 @@ export const isForestGreenTheme = (
 export const isScreenModeDark = (
   theme: ComponentTheme | BaseTheme | ExtraTheme,
   screenMode: ScreenMode,
-): screenMode is ScreenModeDark =>
-  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;
+): screenMode is ScreenModeDark => isThemeModern(theme as ModernTheme) && screenMode === 'dark';
 
 export const isScreenModeSystem = (
   theme: ComponentTheme | BaseTheme | ExtraTheme,
   screenMode: ScreenMode,
-): screenMode is ScreenModeSystem =>
-  isThemeModern(theme as ModernTheme) && screenModes[2] === screenMode;
+): screenMode is ScreenModeSystem => isThemeModern(theme as ModernTheme) && screenMode === 'system';
+
+export const getScreenMode = (
+  theme: ComponentTheme | BaseTheme | ExtraTheme,
+  screenMode: ScreenMode,
+): ScreenMode => {
+  if (isScreenModeSystem(theme, screenMode)) {
+    if (typeof window === 'undefined') {
+      return 'light';
+    }
+    const matchesDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    return matchesDarkScheme ? 'dark' : 'light';
+  }
+  return screenMode;
+};
 
 export const getThemeClassName = (
   theme: ComponentTheme | BaseTheme | ExtraTheme,
@@ -45,7 +57,7 @@ export const getThemeClassName = (
 
   if (isExtraTheme(theme)) {
     classes += ` ${classes}--${theme}`;
-  } else if (screenModes[1] === screenMode) {
+  } else if (screenMode === 'dark') {
     classes += ` ${classes}--${screenMode}`;
   }
 

package/src/index.ts

@@ -4,6 +4,8 @@ export {
   isExtraTheme,
   isForestGreenTheme,
   isScreenModeDark,
+  isScreenModeSystem,
+  getScreenMode,
   getThemeClassName,
 } from './helpers';
 

package/src/useTheme.spec.tsx

@@ -18,6 +18,7 @@ describe('useTheme', () => {
       isModern: false,
       isForestGreenTheme: false,
       isScreenModeDark: false,
+      getScreenMode: 'light',
       className: 'np-theme-light',
     });
 
@@ -40,6 +41,7 @@ describe('useTheme', () => {
       isModern: true,
       isForestGreenTheme: false,
       isScreenModeDark: false,
+      getScreenMode: 'light',
       className: 'np-theme-personal',
     });
   });
@@ -60,6 +62,103 @@ describe('useTheme', () => {
       isModern: true,
       isForestGreenTheme: true,
       isScreenModeDark: false,
+      getScreenMode: 'light',
+      className: 'np-theme-personal np-theme-personal--forest-green',
+    });
+  });
+
+  it('returns forest-green theme with dark screen mode', () => {
+    const {
+      result: { current },
+    } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+      initialProps: {
+        theme: 'forest-green' as const,
+        screenMode: 'dark' as const,
+      },
+    });
+
+    expect(current).toStrictEqual({
+      theme: 'forest-green',
+      screenMode: 'dark',
+      isModern: true,
+      isForestGreenTheme: true,
+      isScreenModeDark: true,
+      getScreenMode: 'dark',
+      className: 'np-theme-personal np-theme-personal--forest-green',
+    });
+  });
+
+  it("returns forest-green theme with 'light' system screen mode", () => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation((query) => ({
+        matches: false,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // Deprecated
+        removeListener: jest.fn(), // Deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      })),
+    });
+
+    const {
+      result: { current },
+    } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+      initialProps: {
+        theme: 'forest-green' as const,
+        screenMode: 'system' as const,
+      },
+    });
+
+    expect(current).toStrictEqual({
+      theme: 'forest-green',
+      screenMode: 'light',
+      isModern: true,
+      isForestGreenTheme: true,
+      isScreenModeDark: false,
+      getScreenMode: 'light',
+      className: 'np-theme-personal np-theme-personal--forest-green',
+    });
+  });
+
+  it("returns forest-green theme with 'dark' system screen mode", () => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation((query) => ({
+        matches: true,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // Deprecated
+        removeListener: jest.fn(), // Deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      })),
+    });
+
+    const {
+      result: { current },
+    } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+      initialProps: {
+        theme: 'forest-green' as const,
+        screenMode: 'system' as const,
+      },
+    });
+
+    expect(current).toStrictEqual({
+      theme: 'forest-green',
+      screenMode: 'dark',
+      isModern: true,
+      isForestGreenTheme: true,
+      isScreenModeDark: true,
+      getScreenMode: 'dark',
       className: 'np-theme-personal np-theme-personal--forest-green',
     });
   });
@@ -80,28 +179,104 @@ describe('useTheme', () => {
       isModern: true,
       isForestGreenTheme: false,
       isScreenModeDark: false,
+      getScreenMode: 'light',
       className: 'np-theme-personal np-theme-personal--bright-green',
     });
   });
 
-  it('returns default screen mode if used default light theme', () => {
+  it('returns bright-green theme with dark screen mode', () => {
     const {
       result: { current },
     } = renderHook(() => useTheme(), {
       wrapper: ThemeProvider,
       initialProps: {
-        theme: DEFAULT_BASE_THEME,
+        theme: 'bright-green' as const,
         screenMode: 'dark' as const,
       },
     });
 
     expect(current).toStrictEqual({
-      theme: DEFAULT_BASE_THEME,
-      screenMode: DEFAULT_SCREEN_MODE,
-      isModern: false,
+      theme: 'bright-green',
+      screenMode: 'dark',
+      isModern: true,
+      isForestGreenTheme: false,
+      isScreenModeDark: true,
+      getScreenMode: 'dark',
+      className: 'np-theme-personal np-theme-personal--bright-green',
+    });
+  });
+
+  it("returns bright-green theme with 'light' system screen mode", () => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation((query) => ({
+        matches: false,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // Deprecated
+        removeListener: jest.fn(), // Deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      })),
+    });
+
+    const {
+      result: { current },
+    } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+      initialProps: {
+        theme: 'bright-green' as const,
+        screenMode: 'system' as const,
+      },
+    });
+
+    expect(current).toStrictEqual({
+      theme: 'bright-green',
+      screenMode: 'light',
+      isModern: true,
       isForestGreenTheme: false,
       isScreenModeDark: false,
-      className: 'np-theme-light',
+      getScreenMode: 'light',
+      className: 'np-theme-personal np-theme-personal--bright-green',
+    });
+  });
+
+  it("returns bright-green theme with 'dark' system screen mode", () => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation((query) => ({
+        matches: true,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // Deprecated
+        removeListener: jest.fn(), // Deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      })),
+    });
+
+    const {
+      result: { current },
+    } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+      initialProps: {
+        theme: 'bright-green' as const,
+        screenMode: 'system' as const,
+      },
+    });
+
+    expect(current).toStrictEqual({
+      theme: 'bright-green',
+      screenMode: 'dark',
+      isModern: true,
+      isForestGreenTheme: false,
+      isScreenModeDark: true,
+      getScreenMode: 'dark',
+      className: 'np-theme-personal np-theme-personal--bright-green',
     });
   });
 
@@ -122,6 +297,7 @@ describe('useTheme', () => {
       isModern: true,
       isForestGreenTheme: false,
       isScreenModeDark: true,
+      getScreenMode: 'dark',
       className: 'np-theme-personal np-theme-personal--dark',
     });
   });
@@ -146,6 +322,7 @@ describe('useTheme', () => {
       isModern: false,
       isForestGreenTheme: false,
       isScreenModeDark: false,
+      getScreenMode: 'light',
       className: 'np-theme-light',
     });
 
@@ -169,6 +346,7 @@ describe('useTheme', () => {
       isModern: false,
       isForestGreenTheme: false,
       isScreenModeDark: false,
+      getScreenMode: 'light',
       className: 'np-theme-light',
     });
 
@@ -192,6 +370,7 @@ describe('useTheme', () => {
       isModern: false,
       isForestGreenTheme: false,
       isScreenModeDark: false,
+      getScreenMode: 'light',
       className: 'np-theme-light',
     });
 
@@ -213,6 +392,7 @@ describe('useTheme', () => {
       isModern: false,
       isForestGreenTheme: false,
       isScreenModeDark: false,
+      getScreenMode: 'light',
       className: 'np-theme-light',
     });
 

package/src/useTheme.ts

@@ -3,7 +3,13 @@ import { useContext, useMemo } from 'react';
 import { ThemeContext } from './ThemeProvider';
 import type { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';
 import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';
-import { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';
+import {
+  isThemeModern,
+  isForestGreenTheme,
+  isScreenModeDark,
+  getScreenMode,
+  getThemeClassName,
+} from './helpers';
 
 interface ThemeHookValue {
   theme: ComponentTheme | BaseTheme | ExtraTheme;
@@ -11,6 +17,7 @@ interface ThemeHookValue {
   isModern: boolean;
   isForestGreenTheme: boolean;
   isScreenModeDark: boolean;
+  getScreenMode: ScreenMode;
   className: string;
 }
 
@@ -36,8 +43,8 @@ export const useTheme = (): ThemeHookValue => {
   }
 
   const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;
-
-  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
+  const screenMode =
+    theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : getScreenMode(theme, contextScreenMode);
 
   return useMemo(
     () => ({
@@ -46,6 +53,7 @@ export const useTheme = (): ThemeHookValue => {
       isModern: isThemeModern(theme),
       isForestGreenTheme: isForestGreenTheme(theme),
       isScreenModeDark: isScreenModeDark(theme, screenMode),
+      getScreenMode: getScreenMode(theme, screenMode),
       className: getThemeClassName(theme, screenMode),
     }),
     [theme, screenMode],