@wise/components-theming 0.5.0 → 0.5.1

package/dist/cjs/index.d.ts

@@ -1,23 +1,25 @@
 /// <reference types="react" />
 import { PropsWithChildren } from "react";
-declare const componentThemes: readonly [
-    "light",
-    "personal",
-    "personal--dark",
-    "personal--forest-green"
-];
-type ComponentTheme = (typeof componentThemes)[number];
+// TODO: Change 'light' with 'legacy' in future
+declare const baseThemes: string[];
+declare const extraThemes: string[];
+declare const screenModes: string[];
+type BaseTheme = (typeof baseThemes)[number];
+type ExtraTheme = (typeof extraThemes)[number];
+type ScreenMode = (typeof screenModes)[number];
 type Theming = {
-    theme?: ComponentTheme;
+    theme?: BaseTheme | ExtraTheme;
+    screenMode?: ScreenMode;
 };
 type ThemeProviderProps = PropsWithChildren<Theming>;
-declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => JSX.Element;
+declare const ThemeProvider: ({ theme, screenMode, children }: ThemeProviderProps) => JSX.Element;
 interface ThemeHookValue {
-    theme: ComponentTheme;
+    theme: BaseTheme | ExtraTheme;
+    screenMode: ScreenMode;
     isModern: boolean;
-    isDark: boolean;
+    isScreenModeDark: boolean;
     className: string;
 }
 declare const useTheme: () => ThemeHookValue;
-export type { ComponentTheme, Theming };
+export type { BaseTheme, ExtraTheme, ScreenMode, Theming };
 export { ThemeProvider, useTheme };

package/dist/cjs/index.js

@@ -3,32 +3,50 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
-var darkThemes = ['personal--dark'];
-var modernThemes = ['personal', 'personal--dark', 'personal--forest-green'];
-var DEFAULT_COMPONENT_THEME = 'light';
+// TODO: Change 'light' with 'legacy' in future
+var extraThemes = ['forest-green'];
+var DEFAULT_BASE_THEME = 'light';
+var DEFAULT_SCREEN_MODE = 'light';
 
 var isThemeModern = function isThemeModern(theme) {
-  return modernThemes.includes(theme);
+  return extraThemes.includes(theme) || theme === 'personal';
 };
-var isThemeDark = function isThemeDark(theme) {
-  return darkThemes.includes(theme);
+var isExtraTheme = function isExtraTheme(theme) {
+  return extraThemes.includes(theme);
 };
-var getThemeClassName = function getThemeClassName(theme) {
-  return "np-theme-".concat(theme);
+var isScreenModeDark = function isScreenModeDark(theme, screenMode) {
+  return theme !== DEFAULT_BASE_THEME && screenMode === 'dark';
+};
+var getThemeClassName = function getThemeClassName(theme, screenMode) {
+  if (!isThemeModern(theme)) {
+    return "np-theme-".concat(theme);
+  }
+
+  var classes = "np-theme-personal";
+
+  if (isExtraTheme(theme)) {
+    classes += " ".concat(classes, "--").concat(theme);
+  } else if (screenMode === 'dark') {
+    classes += " ".concat(classes, "--").concat(screenMode);
+  }
+
+  return classes;
 };
 
 var useTheme = function useTheme() {
-  var _useContext;
+  var _useContext$theme, _useContext$screenMod;
 
-  var theme = (_useContext = react.useContext(ThemeContext)) !== null && _useContext !== void 0 ? _useContext : DEFAULT_COMPONENT_THEME;
+  var theme = (_useContext$theme = react.useContext(ThemeContext).theme) !== null && _useContext$theme !== void 0 ? _useContext$theme : DEFAULT_BASE_THEME;
+  var screenMode = theme !== DEFAULT_BASE_THEME ? (_useContext$screenMod = react.useContext(ThemeContext).screenMode) !== null && _useContext$screenMod !== void 0 ? _useContext$screenMod : DEFAULT_SCREEN_MODE : DEFAULT_SCREEN_MODE;
   return react.useMemo(function () {
     return {
       theme: theme,
+      screenMode: screenMode,
       isModern: isThemeModern(theme),
-      isDark: isThemeDark(theme),
-      className: getThemeClassName(theme)
+      isScreenModeDark: isScreenModeDark(theme, screenMode),
+      className: getThemeClassName(theme, screenMode)
     };
-  }, [theme]);
+  }, [theme, screenMode]);
 };
 
 var ThemedChildren = function ThemedChildren(_ref) {
@@ -43,12 +61,17 @@ var ThemedChildren = function ThemedChildren(_ref) {
   });
 };
 
-var ThemeContext = /*#__PURE__*/react.createContext(undefined);
+var ThemeContext = /*#__PURE__*/react.createContext({
+  theme: undefined,
+  screenMode: undefined
+});
 var ThemeProvider = function ThemeProvider(_ref) {
   var _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? DEFAULT_COMPONENT_THEME : _ref$theme,
+      theme = _ref$theme === void 0 ? DEFAULT_BASE_THEME : _ref$theme,
+      _ref$screenMode = _ref.screenMode,
+      screenMode = _ref$screenMode === void 0 ? DEFAULT_SCREEN_MODE : _ref$screenMode,
       children = _ref.children;
-  var isRootProvider = react.useContext(ThemeContext) === undefined; // RegEx to check for `np-theme-` class name
+  var isRootProvider = react.useContext(ThemeContext).theme === undefined; // 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 hook used to apply the theme class to the HTML element
@@ -60,17 +83,17 @@ var ThemeProvider = function ThemeProvider(_ref) {
       // Remove all the theme classes from the documentElement
       (_document$documentEle = document.documentElement.className.match(themeClass)) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.map(function (item) {
         document.documentElement.classList.remove(item);
-      }); // Add the new theme class to the documentElement
-
-      if (isThemeModern(theme)) {
-        document.documentElement.classList.add('np-theme-personal');
-      }
-
-      document.documentElement.classList.add("np-theme-".concat(theme));
+      });
+      getThemeClassName(theme, screenMode).split(' ').forEach(function (item) {
+        document.documentElement.classList.add(item);
+      });
     }
-  }, [isRootProvider, theme, themeClass]);
+  }, [isRootProvider, theme, screenMode]);
   return jsxRuntime.jsx(ThemeContext.Provider, {
-    value: theme,
+    value: {
+      theme: theme,
+      screenMode: screenMode
+    },
     children: jsxRuntime.jsx(ThemedChildren, {
       children: children
     })

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":["export const componentThemes = ['light', 'personal', 'personal--dark', 'personal--forest-green'] as const;\nexport const darkThemes = ['personal--dark'] as const;\nexport const modernThemes = ['personal', 'personal--dark', 'personal--forest-green'] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type DarkTheme = typeof darkThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme;\n};\n","import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';\n\nexport const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>\n  darkThemes.includes(theme as DarkTheme);\n\nexport const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName, isThemeDark, isThemeModern } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme;\n  isModern: boolean;\n  isDark: boolean;\n  className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n\n  return useMemo(\n    () => ({\n      theme,\n      isModern: isThemeModern(theme),\n      isDark: isThemeDark(theme),\n      className: getThemeClassName(theme),\n    }),\n    [theme],\n  );\n};\n","import { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { children: ReactNode };\n\nexport const ThemedChildren = ({ children }: ThemedChildrenProps) => {\n  const { className } = useTheme();\n\n  return <div className={className}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME, Theming } from './const';\nimport { isThemeModern } from './helpers';\n\nexport const ThemeContext = createContext<ComponentTheme | undefined>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const isRootProvider = 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 (isRootProvider) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.map((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      // Add the new theme class to the documentElement\n      if (isThemeModern(theme)) {\n        document.documentElement.classList.add('np-theme-personal');\n      }\n      document.documentElement.classList.add(`np-theme-${theme}`);\n    }\n  }, [isRootProvider, theme, themeClass]);\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <ThemedChildren>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["darkThemes","modernThemes","DEFAULT_COMPONENT_THEME","isThemeModern","theme","includes","isThemeDark","getThemeClassName","useTheme","useContext","ThemeContext","useMemo","isModern","isDark","className","ThemedChildren","children","_jsx","createContext","undefined","ThemeProvider","isRootProvider","themeClass","RegExp","useEffect","documentElement","match","map","item","document","classList","remove","add","Provider","value"],"mappings":";;;;;AACO,IAAMA,UAAU,GAAG,CAAC,gBAAD,CAAnB,CAAA;AACA,IAAMC,YAAY,GAAG,CAAC,UAAD,EAAa,gBAAb,EAA+B,wBAA/B,CAArB,CAAA;AAMA,IAAMC,uBAAuB,GAAG,OAAhC;;ACNA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAA;AAAA,EAAA,OAC3BH,YAAY,CAACI,QAAb,CAAsBD,KAAtB,CAD2B,CAAA;AAAA,CAAtB,CAAA;AAGA,IAAME,WAAW,GAAG,SAAdA,WAAc,CAACF,KAAD,EAAA;AAAA,EAAA,OACzBJ,UAAU,CAACK,QAAX,CAAoBD,KAApB,CADyB,CAAA;AAAA,CAApB,CAAA;AAGA,IAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,CAACH,KAAD,EAAA;AAAA,EAAA,OAAA,WAAA,CAAA,MAAA,CAAuCA,KAAvC,CAAA,CAAA;AAAA,CAA1B;;ACKMI,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAAA,EAAA,IAAA,WAAA,CAAA;;AAC3C,EAAA,IAAMJ,KAAK,GAAGK,CAAAA,WAAAA,GAAAA,gBAAU,CAACC,YAAD,CAAb,qDAA+BR,uBAA1C,CAAA;AAEA,EAAA,OAAOS,aAAO,CACZ,YAAA;IAAA,OAAO;AACLP,MAAAA,KAAK,EAALA,KADK;AAELQ,MAAAA,QAAQ,EAAET,aAAa,CAACC,KAAD,CAFlB;AAGLS,MAAAA,MAAM,EAAEP,WAAW,CAACF,KAAD,CAHd;MAILU,SAAS,EAAEP,iBAAiB,CAACH,KAAD,CAAA;KAJ9B,CAAA;AAAA,GADY,EAOZ,CAACA,KAAD,CAPY,CAAd,CAAA;AASD;;ACnBM,IAAMW,cAAc,GAAG,SAAjBA,cAAiB,CAAsC,IAAA,EAAA;EAAA,IAAnCC,QAAmC,QAAnCA,QAAmC,CAAA;;AAClE,EAAA,IAAA,SAAA,GAAsBR,QAAQ,EAA9B;MAAQM,SAAR,aAAQA,SAAR,CAAA;;EAEA,OAAOG,cAAAA,CAAAA,KAAAA,EAAAA;AAAKH,IAAAA,SAAS,EAAEA,SAAhB;IAAyBE,QAAGA,EAAAA,QAAAA;GAAnC,CAAA,CAAA;AACD,CAJM;;ACAA,IAAMN,YAAY,gBAAGQ,mBAAa,CAA6BC,SAA7B,CAAlC,CAAA;AAIMC,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAGJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAFvBhB,KAEuB;MAFvBA,KAEuB,2BAFfF,uBAEe,GAAA,UAAA;MADvBc,QACuB,QADvBA,QACuB,CAAA;EACvB,IAAMK,cAAc,GAAGZ,gBAAU,CAACC,YAAD,CAAV,KAA6BS,SAApD,CADuB;AAIvB;;EACA,IAAMG,UAAU,GAAG,IAAIC,MAAJ,CAAW,sBAAX,EAAmC,GAAnC,CAAnB,CALuB;;AAQvBC,EAAAA,eAAS,CAAC,YAAK;AACb,IAAA,IAAIH,cAAJ,EAAoB;AAAA,MAAA,IAAA,qBAAA,CAAA;;AAClB;AACA,MAAA,CAAA,qBAAA,GAAA,QAAQ,CAACI,eAAT,CAAyBX,SAAzB,CAAmCY,KAAnC,CAAyCJ,UAAzC,CAAsDK,MAAAA,IAAAA,IAAAA,qBAAAA,KAAAA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,qBAAAA,CAAAA,GAAtD,CAA0D,UAACC,IAAD,EAAS;AACjEC,QAAAA,QAAQ,CAACJ,eAAT,CAAyBK,SAAzB,CAAmCC,MAAnC,CAA0CH,IAA1C,CAAA,CAAA;AACD,OAFD,EAFkB;;AAMlB,MAAA,IAAIzB,aAAa,CAACC,KAAD,CAAjB,EAA0B;AACxByB,QAAAA,QAAQ,CAACJ,eAAT,CAAyBK,SAAzB,CAAmCE,GAAnC,CAAuC,mBAAvC,CAAA,CAAA;AACD,OAAA;;AACDH,MAAAA,QAAQ,CAACJ,eAAT,CAAyBK,SAAzB,CAAmCE,GAAnC,oBAAmD5B,KAAnD,CAAA,CAAA,CAAA;AACD,KAAA;GAXM,EAYN,CAACiB,cAAD,EAAiBjB,KAAjB,EAAwBkB,UAAxB,CAZM,CAAT,CAAA;AAcA,EAAA,OACEL,cAACP,CAAAA,YAAY,CAACuB,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAE9B,KAAR;IAAaY,QACjCC,EAAAA,cAAAA,CAACF,cAAD,EAAe;MAAAC,QAAEA,EAAAA,QAAAA;KAAjB,CAAA;AADoB,GAAtB,CADF,CAAA;AAKD;;;;;"}
+{"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 future\nexport const baseThemes = ['light', 'personal'];\nexport const extraThemes = ['forest-green'];\nexport const screenModes = ['light', 'dark'];\n\nexport type BaseTheme = typeof baseThemes[number];\nexport type ExtraTheme = typeof extraThemes[number];\nexport type ScreenMode = typeof screenModes[number];\n\nexport const DEFAULT_BASE_THEME = 'light' as const;\nexport const DEFAULT_SCREEN_MODE = 'light' as const;\n\nexport type Theming = {\n  theme?: BaseTheme | ExtraTheme;\n  screenMode?: ScreenMode;\n};\n","import { BaseTheme, ScreenMode, ExtraTheme, extraThemes, DEFAULT_BASE_THEME } from './const';\n\nexport const isThemeModern = (theme: BaseTheme | ExtraTheme): boolean =>\n  extraThemes.includes(theme) || theme === 'personal';\n\nexport const isExtraTheme = (theme: ExtraTheme): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isScreenModeDark = (theme: BaseTheme, screenMode: ScreenMode): boolean =>\n  theme !== DEFAULT_BASE_THEME && screenMode === 'dark';\n\nexport const getThemeClassName = (\n  theme: 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 { BaseTheme, ScreenMode, ExtraTheme, DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: BaseTheme | ExtraTheme;\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n  const theme: BaseTheme | ExtraTheme = useContext(ThemeContext).theme ?? DEFAULT_BASE_THEME;\n  const screenMode: ScreenMode = theme !== DEFAULT_BASE_THEME\n    ? useContext(ThemeContext).screenMode ?? DEFAULT_SCREEN_MODE\n    : DEFAULT_SCREEN_MODE;\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      isModern: isThemeModern(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n    }),\n    [theme, screenMode],\n  );\n};\n","import { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { children: ReactNode };\n\nexport const ThemedChildren = ({ children }: ThemedChildrenProps) => {\n  const { className } = useTheme();\n\n  return <div className={className}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport { BaseTheme, ExtraTheme, ScreenMode, Theming, DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<{\n  theme: BaseTheme | ExtraTheme | undefined,\n  screenMode: ScreenMode | undefined,\n}>({ theme: undefined, screenMode: undefined });\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  children,\n}: ThemeProviderProps) => {\n  const isRootProvider = useContext(ThemeContext).theme === 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 (isRootProvider) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.map((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      getThemeClassName(theme, screenMode).split(' ').forEach(item => {\n        document.documentElement.classList.add(item);\n      })\n    }\n  }, [isRootProvider, theme, screenMode]);\n\n  return (\n    <ThemeContext.Provider value={{ theme, screenMode }}>\n      <ThemedChildren>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["extraThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isScreenModeDark","screenMode","getThemeClassName","classes","useTheme","useContext","ThemeContext","useMemo","isModern","className","ThemedChildren","children","_jsx","createContext","undefined","ThemeProvider","isRootProvider","themeClass","RegExp","useEffect","documentElement","match","map","item","document","classList","remove","split","forEach","add","Provider","value"],"mappings":"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"}

package/dist/es/index.d.ts

@@ -1,23 +1,25 @@
 /// <reference types="react" />
 import { PropsWithChildren } from "react";
-declare const componentThemes: readonly [
-    "light",
-    "personal",
-    "personal--dark",
-    "personal--forest-green"
-];
-type ComponentTheme = (typeof componentThemes)[number];
+// TODO: Change 'light' with 'legacy' in future
+declare const baseThemes: string[];
+declare const extraThemes: string[];
+declare const screenModes: string[];
+type BaseTheme = (typeof baseThemes)[number];
+type ExtraTheme = (typeof extraThemes)[number];
+type ScreenMode = (typeof screenModes)[number];
 type Theming = {
-    theme?: ComponentTheme;
+    theme?: BaseTheme | ExtraTheme;
+    screenMode?: ScreenMode;
 };
 type ThemeProviderProps = PropsWithChildren<Theming>;
-declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => JSX.Element;
+declare const ThemeProvider: ({ theme, screenMode, children }: ThemeProviderProps) => JSX.Element;
 interface ThemeHookValue {
-    theme: ComponentTheme;
+    theme: BaseTheme | ExtraTheme;
+    screenMode: ScreenMode;
     isModern: boolean;
-    isDark: boolean;
+    isScreenModeDark: boolean;
     className: string;
 }
 declare const useTheme: () => ThemeHookValue;
-export type { ComponentTheme, Theming };
+export type { BaseTheme, ExtraTheme, ScreenMode, Theming };
 export { ThemeProvider, useTheme };

package/dist/es/index.js

@@ -1,32 +1,50 @@
 import { jsx } from 'react/jsx-runtime';
 import { useContext, useMemo, createContext, useEffect } from 'react';
 
-var darkThemes = ['personal--dark'];
-var modernThemes = ['personal', 'personal--dark', 'personal--forest-green'];
-var DEFAULT_COMPONENT_THEME = 'light';
+// TODO: Change 'light' with 'legacy' in future
+var extraThemes = ['forest-green'];
+var DEFAULT_BASE_THEME = 'light';
+var DEFAULT_SCREEN_MODE = 'light';
 
 var isThemeModern = function isThemeModern(theme) {
-  return modernThemes.includes(theme);
+  return extraThemes.includes(theme) || theme === 'personal';
 };
-var isThemeDark = function isThemeDark(theme) {
-  return darkThemes.includes(theme);
+var isExtraTheme = function isExtraTheme(theme) {
+  return extraThemes.includes(theme);
 };
-var getThemeClassName = function getThemeClassName(theme) {
-  return "np-theme-".concat(theme);
+var isScreenModeDark = function isScreenModeDark(theme, screenMode) {
+  return theme !== DEFAULT_BASE_THEME && screenMode === 'dark';
+};
+var getThemeClassName = function getThemeClassName(theme, screenMode) {
+  if (!isThemeModern(theme)) {
+    return "np-theme-".concat(theme);
+  }
+
+  var classes = "np-theme-personal";
+
+  if (isExtraTheme(theme)) {
+    classes += " ".concat(classes, "--").concat(theme);
+  } else if (screenMode === 'dark') {
+    classes += " ".concat(classes, "--").concat(screenMode);
+  }
+
+  return classes;
 };
 
 var useTheme = function useTheme() {
-  var _useContext;
+  var _useContext$theme, _useContext$screenMod;
 
-  var theme = (_useContext = useContext(ThemeContext)) !== null && _useContext !== void 0 ? _useContext : DEFAULT_COMPONENT_THEME;
+  var theme = (_useContext$theme = useContext(ThemeContext).theme) !== null && _useContext$theme !== void 0 ? _useContext$theme : DEFAULT_BASE_THEME;
+  var screenMode = theme !== DEFAULT_BASE_THEME ? (_useContext$screenMod = useContext(ThemeContext).screenMode) !== null && _useContext$screenMod !== void 0 ? _useContext$screenMod : DEFAULT_SCREEN_MODE : DEFAULT_SCREEN_MODE;
   return useMemo(function () {
     return {
       theme: theme,
+      screenMode: screenMode,
       isModern: isThemeModern(theme),
-      isDark: isThemeDark(theme),
-      className: getThemeClassName(theme)
+      isScreenModeDark: isScreenModeDark(theme, screenMode),
+      className: getThemeClassName(theme, screenMode)
     };
-  }, [theme]);
+  }, [theme, screenMode]);
 };
 
 var ThemedChildren = function ThemedChildren(_ref) {
@@ -41,12 +59,17 @@ var ThemedChildren = function ThemedChildren(_ref) {
   });
 };
 
-var ThemeContext = /*#__PURE__*/createContext(undefined);
+var ThemeContext = /*#__PURE__*/createContext({
+  theme: undefined,
+  screenMode: undefined
+});
 var ThemeProvider = function ThemeProvider(_ref) {
   var _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? DEFAULT_COMPONENT_THEME : _ref$theme,
+      theme = _ref$theme === void 0 ? DEFAULT_BASE_THEME : _ref$theme,
+      _ref$screenMode = _ref.screenMode,
+      screenMode = _ref$screenMode === void 0 ? DEFAULT_SCREEN_MODE : _ref$screenMode,
       children = _ref.children;
-  var isRootProvider = useContext(ThemeContext) === undefined; // RegEx to check for `np-theme-` class name
+  var isRootProvider = useContext(ThemeContext).theme === undefined; // 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 hook used to apply the theme class to the HTML element
@@ -58,17 +81,17 @@ var ThemeProvider = function ThemeProvider(_ref) {
       // Remove all the theme classes from the documentElement
       (_document$documentEle = document.documentElement.className.match(themeClass)) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.map(function (item) {
         document.documentElement.classList.remove(item);
-      }); // Add the new theme class to the documentElement
-
-      if (isThemeModern(theme)) {
-        document.documentElement.classList.add('np-theme-personal');
-      }
-
-      document.documentElement.classList.add("np-theme-".concat(theme));
+      });
+      getThemeClassName(theme, screenMode).split(' ').forEach(function (item) {
+        document.documentElement.classList.add(item);
+      });
     }
-  }, [isRootProvider, theme, themeClass]);
+  }, [isRootProvider, theme, screenMode]);
   return jsx(ThemeContext.Provider, {
-    value: theme,
+    value: {
+      theme: theme,
+      screenMode: screenMode
+    },
     children: jsx(ThemedChildren, {
       children: children
     })

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":["export const componentThemes = ['light', 'personal', 'personal--dark', 'personal--forest-green'] as const;\nexport const darkThemes = ['personal--dark'] as const;\nexport const modernThemes = ['personal', 'personal--dark', 'personal--forest-green'] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type DarkTheme = typeof darkThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme;\n};\n","import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';\n\nexport const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>\n  darkThemes.includes(theme as DarkTheme);\n\nexport const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName, isThemeDark, isThemeModern } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme;\n  isModern: boolean;\n  isDark: boolean;\n  className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n\n  return useMemo(\n    () => ({\n      theme,\n      isModern: isThemeModern(theme),\n      isDark: isThemeDark(theme),\n      className: getThemeClassName(theme),\n    }),\n    [theme],\n  );\n};\n","import { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { children: ReactNode };\n\nexport const ThemedChildren = ({ children }: ThemedChildrenProps) => {\n  const { className } = useTheme();\n\n  return <div className={className}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME, Theming } from './const';\nimport { isThemeModern } from './helpers';\n\nexport const ThemeContext = createContext<ComponentTheme | undefined>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const isRootProvider = 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 (isRootProvider) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.map((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      // Add the new theme class to the documentElement\n      if (isThemeModern(theme)) {\n        document.documentElement.classList.add('np-theme-personal');\n      }\n      document.documentElement.classList.add(`np-theme-${theme}`);\n    }\n  }, [isRootProvider, theme, themeClass]);\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <ThemedChildren>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["darkThemes","modernThemes","DEFAULT_COMPONENT_THEME","isThemeModern","theme","includes","isThemeDark","getThemeClassName","useTheme","useContext","ThemeContext","useMemo","isModern","isDark","className","ThemedChildren","children","_jsx","createContext","undefined","ThemeProvider","isRootProvider","themeClass","RegExp","useEffect","documentElement","match","map","item","document","classList","remove","add","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 future\nexport const baseThemes = ['light', 'personal'];\nexport const extraThemes = ['forest-green'];\nexport const screenModes = ['light', 'dark'];\n\nexport type BaseTheme = typeof baseThemes[number];\nexport type ExtraTheme = typeof extraThemes[number];\nexport type ScreenMode = typeof screenModes[number];\n\nexport const DEFAULT_BASE_THEME = 'light' as const;\nexport const DEFAULT_SCREEN_MODE = 'light' as const;\n\nexport type Theming = {\n  theme?: BaseTheme | ExtraTheme;\n  screenMode?: ScreenMode;\n};\n","import { BaseTheme, ScreenMode, ExtraTheme, extraThemes, DEFAULT_BASE_THEME } from './const';\n\nexport const isThemeModern = (theme: BaseTheme | ExtraTheme): boolean =>\n  extraThemes.includes(theme) || theme === 'personal';\n\nexport const isExtraTheme = (theme: ExtraTheme): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isScreenModeDark = (theme: BaseTheme, screenMode: ScreenMode): boolean =>\n  theme !== DEFAULT_BASE_THEME && screenMode === 'dark';\n\nexport const getThemeClassName = (\n  theme: 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 { BaseTheme, ScreenMode, ExtraTheme, DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: BaseTheme | ExtraTheme;\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n  const theme: BaseTheme | ExtraTheme = useContext(ThemeContext).theme ?? DEFAULT_BASE_THEME;\n  const screenMode: ScreenMode = theme !== DEFAULT_BASE_THEME\n    ? useContext(ThemeContext).screenMode ?? DEFAULT_SCREEN_MODE\n    : DEFAULT_SCREEN_MODE;\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      isModern: isThemeModern(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n    }),\n    [theme, screenMode],\n  );\n};\n","import { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { children: ReactNode };\n\nexport const ThemedChildren = ({ children }: ThemedChildrenProps) => {\n  const { className } = useTheme();\n\n  return <div className={className}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport { BaseTheme, ExtraTheme, ScreenMode, Theming, DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<{\n  theme: BaseTheme | ExtraTheme | undefined,\n  screenMode: ScreenMode | undefined,\n}>({ theme: undefined, screenMode: undefined });\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  children,\n}: ThemeProviderProps) => {\n  const isRootProvider = useContext(ThemeContext).theme === 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 (isRootProvider) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.map((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      getThemeClassName(theme, screenMode).split(' ').forEach(item => {\n        document.documentElement.classList.add(item);\n      })\n    }\n  }, [isRootProvider, theme, screenMode]);\n\n  return (\n    <ThemeContext.Provider value={{ theme, screenMode }}>\n      <ThemedChildren>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["extraThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isScreenModeDark","screenMode","getThemeClassName","classes","useTheme","useContext","ThemeContext","useMemo","isModern","className","ThemedChildren","children","_jsx","createContext","undefined","ThemeProvider","isRootProvider","themeClass","RegExp","useEffect","documentElement","match","map","item","document","classList","remove","split","forEach","add","Provider","value"],"mappings":";;;AAAA;AAEO,IAAMA,WAAW,GAAG,CAAC,cAAD,CAApB,CAAA;AAOA,IAAMC,kBAAkB,GAAG,OAA3B,CAAA;AACA,IAAMC,mBAAmB,GAAG,OAA5B;;ACRA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAA;EAAA,OAC3BJ,WAAW,CAACK,QAAZ,CAAqBD,KAArB,CAA+BA,IAAAA,KAAK,KAAK,UADd,CAAA;AAAA,CAAtB,CAAA;AAGA,IAAME,YAAY,GAAG,SAAfA,YAAe,CAACF,KAAD,EAAA;AAAA,EAAA,OAC1BJ,WAAW,CAACK,QAAZ,CAAqBD,KAArB,CAD0B,CAAA;AAAA,CAArB,CAAA;AAGA,IAAMG,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACH,KAAD,EAAmBI,UAAnB,EAAA;AAAA,EAAA,OAC9BJ,KAAK,KAAKH,kBAAV,IAAgCO,UAAU,KAAK,MADjB,CAAA;AAAA,CAAzB,CAAA;AAGA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAC/BL,KAD+B,EAE/BI,UAF+B,EAG7B;AACF,EAAA,IAAI,CAACL,aAAa,CAACC,KAAD,CAAlB,EAA2B;AACzB,IAAA,OAAA,WAAA,CAAA,MAAA,CAAmBA,KAAnB,CAAA,CAAA;AACD,GAAA;;AAED,EAAA,IAAIM,OAAO,GAAX,mBAAA,CAAA;;AAEA,EAAA,IAAIJ,YAAY,CAACF,KAAD,CAAhB,EAAyB;AACvBM,IAAAA,OAAO,IAAQA,GAAAA,CAAAA,MAAAA,CAAAA,OAAR,EAAoBN,IAAAA,CAAAA,CAAAA,MAAAA,CAAAA,KAApB,CAAP,CAAA;AACD,GAFD,MAEO,IAAII,UAAU,KAAK,MAAnB,EAA4B;AACjCE,IAAAA,OAAO,IAAQA,GAAAA,CAAAA,MAAAA,CAAAA,OAAR,EAAoBF,IAAAA,CAAAA,CAAAA,MAAAA,CAAAA,UAApB,CAAP,CAAA;AACD,GAAA;;AAED,EAAA,OAAOE,OAAP,CAAA;AACD,CAjBM;;ACGMC,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAAA,EAAA,IAAA,iBAAA,EAAA,qBAAA,CAAA;;EAC3C,IAAMP,KAAK,wBAA2BQ,UAAU,CAACC,YAAD,CAAV,CAAyBT,KAApD,MAAA,IAAA,IAAA,iBAAA,KAAA,KAAA,CAAA,GAAA,iBAAA,GAA6DH,kBAAxE,CAAA;AACA,EAAA,IAAMO,UAAU,GAAeJ,KAAK,KAAKH,kBAAV,GAC3BW,CAAAA,qBAAAA,GAAAA,UAAU,CAACC,YAAD,CAAV,CAAyBL,UADE,MACYN,IAAAA,IAAAA,qBAAAA,KAAAA,KAAAA,CAAAA,GAAAA,qBAAAA,GAAAA,mBADZ,GAE3BA,mBAFJ,CAAA;AAIA,EAAA,OAAOY,OAAO,CACZ,YAAA;IAAA,OAAO;AACLV,MAAAA,KAAK,EAALA,KADK;AAELI,MAAAA,UAAU,EAAVA,UAFK;AAGLO,MAAAA,QAAQ,EAAEZ,aAAa,CAACC,KAAD,CAHlB;AAILG,MAAAA,gBAAgB,EAAEA,gBAAgB,CAACH,KAAD,EAAQI,UAAR,CAJ7B;AAKLQ,MAAAA,SAAS,EAAEP,iBAAiB,CAACL,KAAD,EAAQI,UAAR,CAAA;KAL9B,CAAA;AAAA,GADY,EAQZ,CAACJ,KAAD,EAAQI,UAAR,CARY,CAAd,CAAA;AAUD;;ACxBM,IAAMS,cAAc,GAAG,SAAjBA,cAAiB,CAAsC,IAAA,EAAA;EAAA,IAAnCC,QAAmC,QAAnCA,QAAmC,CAAA;;AAClE,EAAA,IAAA,SAAA,GAAsBP,QAAQ,EAA9B;MAAQK,SAAR,aAAQA,SAAR,CAAA;;EAEA,OAAOG,GAAAA,CAAAA,KAAAA,EAAAA;AAAKH,IAAAA,SAAS,EAAEA,SAAhB;IAAyBE,QAAGA,EAAAA,QAAAA;GAAnC,CAAA,CAAA;AACD,CAJM;;ACAA,IAAML,YAAY,gBAAGO,aAAa,CAGtC;AAAEhB,EAAAA,KAAK,EAAEiB,SAAT;AAAoBb,EAAAA,UAAU,EAAEa,SAAAA;AAAhC,CAHsC,CAAlC,CAAA;AAOMC,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAIJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAHvBlB,KAGuB;MAHvBA,KAGuB,2BAHfH,kBAGe,GAAA,UAAA;AAAA,MAAA,eAAA,GAAA,IAAA,CAFvBO,UAEuB;MAFvBA,UAEuB,gCAFVN,mBAEU,GAAA,eAAA;MADvBgB,QACuB,QADvBA,QACuB,CAAA;EACvB,IAAMK,cAAc,GAAGX,UAAU,CAACC,YAAD,CAAV,CAAyBT,KAAzB,KAAmCiB,SAA1D,CADuB;AAIvB;;EACA,IAAMG,UAAU,GAAG,IAAIC,MAAJ,CAAW,sBAAX,EAAmC,GAAnC,CAAnB,CALuB;;AAQvBC,EAAAA,SAAS,CAAC,YAAK;AACb,IAAA,IAAIH,cAAJ,EAAoB;AAAA,MAAA,IAAA,qBAAA,CAAA;;AAClB;AACA,MAAA,CAAA,qBAAA,GAAA,QAAQ,CAACI,eAAT,CAAyBX,SAAzB,CAAmCY,KAAnC,CAAyCJ,UAAzC,CAAsDK,MAAAA,IAAAA,IAAAA,qBAAAA,KAAAA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,qBAAAA,CAAAA,GAAtD,CAA0D,UAACC,IAAD,EAAS;AACjEC,QAAAA,QAAQ,CAACJ,eAAT,CAAyBK,SAAzB,CAAmCC,MAAnC,CAA0CH,IAA1C,CAAA,CAAA;OADF,CAAA,CAAA;AAGArB,MAAAA,iBAAiB,CAACL,KAAD,EAAQI,UAAR,CAAjB,CAAqC0B,KAArC,CAA2C,GAA3C,CAAA,CAAgDC,OAAhD,CAAwD,cAAI,EAAG;AAC7DJ,QAAAA,QAAQ,CAACJ,eAAT,CAAyBK,SAAzB,CAAmCI,GAAnC,CAAuCN,IAAvC,CAAA,CAAA;OADF,CAAA,CAAA;AAGD,KAAA;GATM,EAUN,CAACP,cAAD,EAAiBnB,KAAjB,EAAwBI,UAAxB,CAVM,CAAT,CAAA;AAYA,EAAA,OACEW,GAACN,CAAAA,YAAY,CAACwB,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAE;AAAElC,MAAAA,KAAK,EAALA,KAAF;AAASI,MAAAA,UAAU,EAAVA,UAAAA;KAAjB;IAA6BU,QACjDC,EAAAA,GAAAA,CAACF,cAAD,EAAe;MAAAC,QAAEA,EAAAA,QAAAA;KAAjB,CAAA;AADoB,GAAtB,CADF,CAAA;AAKD;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/components-theming",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [
@@ -43,5 +43,5 @@
     "dist/",
     "src/"
   ],
-  "gitHead": "684525a9919f04b8b01834dc1f5f58981145f931"
+  "gitHead": "fe552dbe8a4c3503c8e54f9c146d26080da5ea6a"
 }

package/src/ThemeProvider.tsx

@@ -1,18 +1,22 @@
 import { createContext, PropsWithChildren, useContext, useEffect } from 'react';
 
 import { ThemedChildren } from './ThemedChildren';
-import { ComponentTheme, DEFAULT_COMPONENT_THEME, Theming } from './const';
-import { isThemeModern } from './helpers';
+import { BaseTheme, ExtraTheme, ScreenMode, Theming, DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';
+import { getThemeClassName } from './helpers';
 
-export const ThemeContext = createContext<ComponentTheme | undefined>(undefined);
+export const ThemeContext = createContext<{
+  theme: BaseTheme | ExtraTheme | undefined,
+  screenMode: ScreenMode | undefined,
+}>({ theme: undefined, screenMode: undefined });
 
 type ThemeProviderProps = PropsWithChildren<Theming>;
 
 export const ThemeProvider = ({
-  theme = DEFAULT_COMPONENT_THEME,
+  theme = DEFAULT_BASE_THEME,
+  screenMode = DEFAULT_SCREEN_MODE,
   children,
 }: ThemeProviderProps) => {
-  const isRootProvider = useContext(ThemeContext) === undefined;
+  const isRootProvider = useContext(ThemeContext).theme === undefined;
 
   // RegEx to check for `np-theme-` class name
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -25,16 +29,14 @@ export const ThemeProvider = ({
       document.documentElement.className.match(themeClass)?.map((item) => {
         document.documentElement.classList.remove(item);
       });
-      // Add the new theme class to the documentElement
-      if (isThemeModern(theme)) {
-        document.documentElement.classList.add('np-theme-personal');
-      }
-      document.documentElement.classList.add(`np-theme-${theme}`);
+      getThemeClassName(theme, screenMode).split(' ').forEach(item => {
+        document.documentElement.classList.add(item);
+      })
     }
-  }, [isRootProvider, theme, themeClass]);
+  }, [isRootProvider, theme, screenMode]);
 
   return (
-    <ThemeContext.Provider value={theme}>
+    <ThemeContext.Provider value={{ theme, screenMode }}>
       <ThemedChildren>{children}</ThemedChildren>
     </ThemeContext.Provider>
   );

package/src/const.ts

@@ -1,13 +1,16 @@
-export const componentThemes = ['light', 'personal', 'personal--dark', 'personal--forest-green'] as const;
-export const darkThemes = ['personal--dark'] as const;
-export const modernThemes = ['personal', 'personal--dark', 'personal--forest-green'] as const;
+// TODO: Change 'light' with 'legacy' in future
+export const baseThemes = ['light', 'personal'];
+export const extraThemes = ['forest-green'];
+export const screenModes = ['light', 'dark'];
 
-export type ComponentTheme = typeof componentThemes[number];
-export type ModernTheme = typeof modernThemes[number];
-export type DarkTheme = typeof darkThemes[number];
+export type BaseTheme = typeof baseThemes[number];
+export type ExtraTheme = typeof extraThemes[number];
+export type ScreenMode = typeof screenModes[number];
 
-export const DEFAULT_COMPONENT_THEME = 'light' as const;
+export const DEFAULT_BASE_THEME = 'light' as const;
+export const DEFAULT_SCREEN_MODE = 'light' as const;
 
 export type Theming = {
-  theme?: ComponentTheme;
+  theme?: BaseTheme | ExtraTheme;
+  screenMode?: ScreenMode;
 };

package/src/helpers.ts

@@ -1,9 +1,29 @@
-import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';
+import { BaseTheme, ScreenMode, ExtraTheme, extraThemes, DEFAULT_BASE_THEME } from './const';
 
-export const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>
-  modernThemes.includes(theme as ModernTheme);
+export const isThemeModern = (theme: BaseTheme | ExtraTheme): boolean =>
+  extraThemes.includes(theme) || theme === 'personal';
 
-export const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>
-  darkThemes.includes(theme as DarkTheme);
+export const isExtraTheme = (theme: ExtraTheme): theme is ExtraTheme =>
+  extraThemes.includes(theme as ExtraTheme);
 
-export const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;
+export const isScreenModeDark = (theme: BaseTheme, screenMode: ScreenMode): boolean =>
+  theme !== DEFAULT_BASE_THEME && screenMode === 'dark';
+
+export const getThemeClassName = (
+  theme: BaseTheme | ExtraTheme,
+  screenMode: ScreenMode,
+) => {
+  if (!isThemeModern(theme)) {
+    return `np-theme-${theme}`;
+  }
+
+  let classes = `np-theme-personal`;
+
+  if (isExtraTheme(theme)) {
+    classes += ` ${classes}--${theme}`;
+  } else if (screenMode === 'dark' ) {
+    classes += ` ${classes}--${screenMode}`;
+  }
+
+  return classes;
+};

package/src/index.ts

@@ -1,4 +1,4 @@
-export type { ComponentTheme, Theming } from './const';
+export type { BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';
 
 export { ThemeProvider } from './ThemeProvider';
 export { useTheme } from './useTheme';

package/src/useTheme.spec.tsx

@@ -1,5 +1,6 @@
 import { renderHook } from '@testing-library/react-hooks';
 
+import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';
 import { ThemeProvider } from './ThemeProvider';
 import { useTheme } from './useTheme';
 
@@ -10,14 +11,15 @@ describe('useTheme', () => {
     } = renderHook(() => useTheme());
 
     expect(current).toStrictEqual({
-      theme: 'light',
+      theme: DEFAULT_BASE_THEME,
+      screenMode: DEFAULT_SCREEN_MODE,
       isModern: false,
-      isDark: false,
+      isScreenModeDark: false,
       className: 'np-theme-light',
     });
   });
 
-  it('returns provided theme', () => {
+  it('returns personal theme', () => {
     const {
       result: { current },
     } = renderHook(() => useTheme(), {
@@ -28,10 +30,70 @@ describe('useTheme', () => {
     });
 
     expect(current).toStrictEqual({
-      className: 'np-theme-personal',
-      isDark: false,
+      theme: 'personal',
+      screenMode: DEFAULT_SCREEN_MODE,
       isModern: true,
+      isScreenModeDark: false,
+      className: 'np-theme-personal',
+    });
+  });
+
+  it('returns default screen mode if used default light theme', () => {
+    const {
+      result: { current },
+    } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+      initialProps: {
+        theme: DEFAULT_BASE_THEME,
+        screenMode: 'dark' as const,
+      },
+    });
+
+    expect(current).toStrictEqual({
+      theme: DEFAULT_BASE_THEME,
+      screenMode: DEFAULT_SCREEN_MODE,
+      isModern: false,
+      isScreenModeDark: false,
+      className: 'np-theme-light',
+    });
+  });
+
+  it('returns dark screen mode', () => {
+    const {
+      result: { current },
+    } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+      initialProps: {
+        theme: 'personal' as const,
+        screenMode: 'dark' as const,
+      },
+    });
+
+    expect(current).toStrictEqual({
       theme: 'personal',
+      screenMode: 'dark',
+      isModern: true,
+      isScreenModeDark: true,
+      className: 'np-theme-personal np-theme-personal--dark',
+    });
+  });
+
+  it('returns forest-green theme', () => {
+    const {
+      result: { current },
+    } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+      initialProps: {
+        theme: 'forest-green' as const,
+      },
+    });
+
+    expect(current).toStrictEqual({
+      theme: 'forest-green',
+      screenMode: DEFAULT_SCREEN_MODE,
+      isModern: true,
+      isScreenModeDark: false,
+      className: 'np-theme-personal np-theme-personal--forest-green',
     });
   });
 });

package/src/useTheme.ts

@@ -1,26 +1,31 @@
 import { useContext, useMemo } from 'react';
 
 import { ThemeContext } from './ThemeProvider';
-import { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';
-import { getThemeClassName, isThemeDark, isThemeModern } from './helpers';
+import { BaseTheme, ScreenMode, ExtraTheme, DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';
+import { isThemeModern, isScreenModeDark, getThemeClassName } from './helpers';
 
 interface ThemeHookValue {
-  theme: ComponentTheme;
+  theme: BaseTheme | ExtraTheme;
+  screenMode: ScreenMode;
   isModern: boolean;
-  isDark: boolean;
+  isScreenModeDark: boolean;
   className: string;
 }
 
 export const useTheme = (): ThemeHookValue => {
-  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;
+  const theme: BaseTheme | ExtraTheme = useContext(ThemeContext).theme ?? DEFAULT_BASE_THEME;
+  const screenMode: ScreenMode = theme !== DEFAULT_BASE_THEME
+    ? useContext(ThemeContext).screenMode ?? DEFAULT_SCREEN_MODE
+    : DEFAULT_SCREEN_MODE;
 
   return useMemo(
     () => ({
       theme,
+      screenMode,
       isModern: isThemeModern(theme),
-      isDark: isThemeDark(theme),
-      className: getThemeClassName(theme),
+      isScreenModeDark: isScreenModeDark(theme, screenMode),
+      className: getThemeClassName(theme, screenMode),
     }),
-    [theme],
+    [theme, screenMode],
   );
 };