@wise/components-theming 1.7.0 → 1.8.0

package/dist/ThemeProvider.d.ts

@@ -3,6 +3,6 @@ import type { Theming } from './const';
 type ThemeProviderProps = PropsWithChildren<Theming> & {
     className?: string;
 };
-export declare const ThemeProvider: ({ theme, screenMode, isNotRootProvider, children, className, }: ThemeProviderProps) => import("react").JSX.Element;
+export declare const ThemeProvider: ({ theme: initialTheme, screenMode: initialScreenMode, isNotRootProvider, children, className, }: ThemeProviderProps) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAG1E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAKvC,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAK9E,eAAO,MAAM,aAAa,GAAI,gEAM3B,kBAAkB,gCAyBpB,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA4C,MAAM,OAAO,CAAC;AAGpF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAKvC,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAK9E,eAAO,MAAM,aAAa,GAAI,iGAM3B,kBAAkB,gCA8BpB,CAAC"}

package/dist/ThemeProvider.js

@@ -9,13 +9,15 @@ var jsxRuntime = require('react/jsx-runtime');
 
 const themeClass = /\bnp-theme-[a-z-]+\b/g;
 const ThemeProvider = ({
-  theme = _const.DEFAULT_BASE_THEME,
-  screenMode = _const.DEFAULT_SCREEN_MODE,
+  theme: initialTheme = _const.DEFAULT_BASE_THEME,
+  screenMode: initialScreenMode = _const.DEFAULT_SCREEN_MODE,
   isNotRootProvider = false,
   children,
   className = undefined
 }) => {
   const isContextRoot = react.useContext(ThemeProviderContext.ThemeContext) === undefined;
+  const [theme, setTheme] = react.useState(initialTheme);
+  const [screenMode, setScreenMode] = react.useState(initialScreenMode);
   // useEffect hook used to apply the theme class to the HTML element
   react.useEffect(() => {
     if (!isNotRootProvider && isContextRoot) {
@@ -30,8 +32,10 @@ const ThemeProvider = ({
   }, [isNotRootProvider, isContextRoot, theme, screenMode]);
   const contextValue = react.useMemo(() => ({
     theme,
-    screenMode
-  }), [screenMode, theme]);
+    screenMode,
+    setTheme,
+    setScreenMode
+  }), [theme, screenMode, setTheme, setScreenMode]);
   return /*#__PURE__*/jsxRuntime.jsx(ThemeProviderContext.ThemeContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/jsxRuntime.jsx(ThemedChildren.ThemedChildren, {

package/dist/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\ntype ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\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  // 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]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["themeClass","ThemeProvider","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","isNotRootProvider","children","className","undefined","isContextRoot","useContext","ThemeContext","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;AAC5BC,EAAAA,KAAK,GAAGC,yBAAkB;AAC1BC,EAAAA,UAAU,GAAGC,0BAAmB;AAChCC,EAAAA,iBAAiB,GAAG,KAAK;EACzBC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,gBAAU,CAACC,iCAAY,CAAC,KAAKH,SAAS;AAE5D;AACAI,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACP,iBAAiB,IAAII,aAAa,EAAE;AACvC;AACAI,MAAAA,QAAQ,CAACC,eAAe,CAACP,SAAS,CAACQ,KAAK,CAAChB,UAAU,CAAC,EAAEiB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,yBAAiB,CAACnB,KAAK,EAAEE,UAAU,CAAC,CACjCkB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC;AAC9C,MAAA,CAAC,CAAC;AACN,IAAA;EACF,CAAC,EAAE,CAACZ,iBAAiB,EAAEI,aAAa,EAAER,KAAK,EAAEE,UAAU,CAAC,CAAC;AAEzD,EAAA,MAAMoB,YAAY,GAAGC,aAAO,CAAC,OAAO;IAAEvB,KAAK;AAAEE,IAAAA;AAAU,GAAE,CAAC,EAAE,CAACA,UAAU,EAAEF,KAAK,CAAC,CAAC;AAEhF,EAAA,oBACEwB,cAAA,CAACd,iCAAY,CAACe,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAAjB,QAAA,eACzCmB,cAAA,CAACG,6BAAc,EAAA;AAACrB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\ntype ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\n\nexport const ThemeProvider = ({\n  theme: initialTheme = DEFAULT_BASE_THEME,\n  screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n  const [theme, setTheme] = useState(initialTheme);\n  const [screenMode, setScreenMode] = useState(initialScreenMode);\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]);\n\n  const contextValue = useMemo(\n    () => ({ theme, screenMode, setTheme, setScreenMode }),\n    [theme, screenMode, setTheme, setScreenMode],\n  );\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["themeClass","ThemeProvider","theme","initialTheme","DEFAULT_BASE_THEME","screenMode","initialScreenMode","DEFAULT_SCREEN_MODE","isNotRootProvider","children","className","undefined","isContextRoot","useContext","ThemeContext","setTheme","useState","setScreenMode","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,KAAK,EAAEC,YAAY,GAAGC,yBAAkB;EACxCC,UAAU,EAAEC,iBAAiB,GAAGC,0BAAmB;AACnDC,EAAAA,iBAAiB,GAAG,KAAK;EACzBC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,gBAAU,CAACC,iCAAY,CAAC,KAAKH,SAAS;EAC5D,MAAM,CAACT,KAAK,EAAEa,QAAQ,CAAC,GAAGC,cAAQ,CAACb,YAAY,CAAC;EAChD,MAAM,CAACE,UAAU,EAAEY,aAAa,CAAC,GAAGD,cAAQ,CAACV,iBAAiB,CAAC;AAE/D;AACAY,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACV,iBAAiB,IAAII,aAAa,EAAE;AACvC;AACAO,MAAAA,QAAQ,CAACC,eAAe,CAACV,SAAS,CAACW,KAAK,CAACrB,UAAU,CAAC,EAAEsB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,yBAAiB,CAACxB,KAAK,EAAEG,UAAU,CAAC,CACjCsB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC;AAC9C,MAAA,CAAC,CAAC;AACN,IAAA;EACF,CAAC,EAAE,CAACf,iBAAiB,EAAEI,aAAa,EAAEV,KAAK,EAAEG,UAAU,CAAC,CAAC;AAEzD,EAAA,MAAMwB,YAAY,GAAGC,aAAO,CAC1B,OAAO;IAAE5B,KAAK;IAAEG,UAAU;IAAEU,QAAQ;AAAEE,IAAAA;GAAe,CAAC,EACtD,CAACf,KAAK,EAAEG,UAAU,EAAEU,QAAQ,EAAEE,aAAa,CAAC,CAC7C;AAED,EAAA,oBACEc,cAAA,CAACjB,iCAAY,CAACkB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAApB,QAAA,eACzCsB,cAAA,CAACG,6BAAc,EAAA;AAACxB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}

package/dist/ThemeProvider.mjs

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo } from 'react';
+import { useContext, useState, useEffect, useMemo } from 'react';
 import { ThemedChildren } from './ThemedChildren.mjs';
 import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const.mjs';
 import { getThemeClassName } from './helpers.mjs';
@@ -7,13 +7,15 @@ import { jsx } from 'react/jsx-runtime';
 
 const themeClass = /\bnp-theme-[a-z-]+\b/g;
 const ThemeProvider = ({
-  theme = DEFAULT_BASE_THEME,
-  screenMode = DEFAULT_SCREEN_MODE,
+  theme: initialTheme = DEFAULT_BASE_THEME,
+  screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,
   isNotRootProvider = false,
   children,
   className = undefined
 }) => {
   const isContextRoot = useContext(ThemeContext) === undefined;
+  const [theme, setTheme] = useState(initialTheme);
+  const [screenMode, setScreenMode] = useState(initialScreenMode);
   // useEffect hook used to apply the theme class to the HTML element
   useEffect(() => {
     if (!isNotRootProvider && isContextRoot) {
@@ -28,8 +30,10 @@ const ThemeProvider = ({
   }, [isNotRootProvider, isContextRoot, theme, screenMode]);
   const contextValue = useMemo(() => ({
     theme,
-    screenMode
-  }), [screenMode, theme]);
+    screenMode,
+    setTheme,
+    setScreenMode
+  }), [theme, screenMode, setTheme, setScreenMode]);
   return /*#__PURE__*/jsx(ThemeContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/jsx(ThemedChildren, {

package/dist/ThemeProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.mjs","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\ntype ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\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  // 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]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["themeClass","ThemeProvider","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","isNotRootProvider","children","className","undefined","isContextRoot","useContext","ThemeContext","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;AAC5BC,EAAAA,KAAK,GAAGC,kBAAkB;AAC1BC,EAAAA,UAAU,GAAGC,mBAAmB;AAChCC,EAAAA,iBAAiB,GAAG,KAAK;EACzBC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACC,YAAY,CAAC,KAAKH,SAAS;AAE5D;AACAI,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACP,iBAAiB,IAAII,aAAa,EAAE;AACvC;AACAI,MAAAA,QAAQ,CAACC,eAAe,CAACP,SAAS,CAACQ,KAAK,CAAChB,UAAU,CAAC,EAAEiB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,iBAAiB,CAACnB,KAAK,EAAEE,UAAU,CAAC,CACjCkB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC;AAC9C,MAAA,CAAC,CAAC;AACN,IAAA;EACF,CAAC,EAAE,CAACZ,iBAAiB,EAAEI,aAAa,EAAER,KAAK,EAAEE,UAAU,CAAC,CAAC;AAEzD,EAAA,MAAMoB,YAAY,GAAGC,OAAO,CAAC,OAAO;IAAEvB,KAAK;AAAEE,IAAAA;AAAU,GAAE,CAAC,EAAE,CAACA,UAAU,EAAEF,KAAK,CAAC,CAAC;AAEhF,EAAA,oBACEwB,GAAA,CAACd,YAAY,CAACe,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAAjB,QAAA,eACzCmB,GAAA,CAACG,cAAc,EAAA;AAACrB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}
+{"version":3,"file":"ThemeProvider.mjs","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\ntype ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\n\nexport const ThemeProvider = ({\n  theme: initialTheme = DEFAULT_BASE_THEME,\n  screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n  const [theme, setTheme] = useState(initialTheme);\n  const [screenMode, setScreenMode] = useState(initialScreenMode);\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]);\n\n  const contextValue = useMemo(\n    () => ({ theme, screenMode, setTheme, setScreenMode }),\n    [theme, screenMode, setTheme, setScreenMode],\n  );\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["themeClass","ThemeProvider","theme","initialTheme","DEFAULT_BASE_THEME","screenMode","initialScreenMode","DEFAULT_SCREEN_MODE","isNotRootProvider","children","className","undefined","isContextRoot","useContext","ThemeContext","setTheme","useState","setScreenMode","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,KAAK,EAAEC,YAAY,GAAGC,kBAAkB;EACxCC,UAAU,EAAEC,iBAAiB,GAAGC,mBAAmB;AACnDC,EAAAA,iBAAiB,GAAG,KAAK;EACzBC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACC,YAAY,CAAC,KAAKH,SAAS;EAC5D,MAAM,CAACT,KAAK,EAAEa,QAAQ,CAAC,GAAGC,QAAQ,CAACb,YAAY,CAAC;EAChD,MAAM,CAACE,UAAU,EAAEY,aAAa,CAAC,GAAGD,QAAQ,CAACV,iBAAiB,CAAC;AAE/D;AACAY,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAI,CAACV,iBAAiB,IAAII,aAAa,EAAE;AACvC;AACAO,MAAAA,QAAQ,CAACC,eAAe,CAACV,SAAS,CAACW,KAAK,CAACrB,UAAU,CAAC,EAAEsB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,iBAAiB,CAACxB,KAAK,EAAEG,UAAU,CAAC,CACjCsB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC;AAC9C,MAAA,CAAC,CAAC;AACN,IAAA;EACF,CAAC,EAAE,CAACf,iBAAiB,EAAEI,aAAa,EAAEV,KAAK,EAAEG,UAAU,CAAC,CAAC;AAEzD,EAAA,MAAMwB,YAAY,GAAGC,OAAO,CAC1B,OAAO;IAAE5B,KAAK;IAAEG,UAAU;IAAEU,QAAQ;AAAEE,IAAAA;GAAe,CAAC,EACtD,CAACf,KAAK,EAAEG,UAAU,EAAEU,QAAQ,EAAEE,aAAa,CAAC,CAC7C;AAED,EAAA,oBACEc,GAAA,CAACjB,YAAY,CAACkB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAApB,QAAA,eACzCsB,GAAA,CAACG,cAAc,EAAA;AAACxB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}

package/dist/ThemeProviderContext.d.ts

@@ -2,5 +2,7 @@ import type { ScreenMode, Theming } from './const';
 export declare const ThemeContext: import("react").Context<{
     theme: NonNullable<Theming["theme"]>;
     screenMode: ScreenMode;
+    setTheme: (theme: NonNullable<Theming["theme"]>) => void;
+    setScreenMode: (screenMode: ScreenMode) => void;
 } | undefined>;
 //# sourceMappingURL=ThemeProviderContext.d.ts.map

package/dist/ThemeProviderContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProviderContext.d.ts","sourceRoot":"","sources":["../src/ThemeProviderContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEnD,eAAO,MAAM,YAAY;WAEZ,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;gBACxB,UAAU;cAGhB,CAAC"}
+{"version":3,"file":"ThemeProviderContext.d.ts","sourceRoot":"","sources":["../src/ThemeProviderContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEnD,eAAO,MAAM,YAAY;WAEZ,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;gBACxB,UAAU;cACZ,CAAC,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,IAAI;mBACzC,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI;cAGzC,CAAC"}

package/dist/ThemeProviderContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProviderContext.js","sources":["../src/ThemeProviderContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ScreenMode, Theming } from './const';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: NonNullable<Theming['theme']>;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n"],"names":["ThemeContext","createContext","undefined"],"mappings":";;;;MAGaA,YAAY,gBAAGC,mBAAa,CAMvCC,SAAS;;;;"}
+{"version":3,"file":"ThemeProviderContext.js","sources":["../src/ThemeProviderContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ScreenMode, Theming } from './const';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: NonNullable<Theming['theme']>;\n      screenMode: ScreenMode;\n      setTheme: (theme: NonNullable<Theming['theme']>) => void;\n      setScreenMode: (screenMode: ScreenMode) => void;\n    }\n  | undefined\n>(undefined);\n"],"names":["ThemeContext","createContext","undefined"],"mappings":";;;;MAGaA,YAAY,gBAAGC,mBAAa,CAQvCC,SAAS;;;;"}

package/dist/ThemeProviderContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProviderContext.mjs","sources":["../src/ThemeProviderContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ScreenMode, Theming } from './const';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: NonNullable<Theming['theme']>;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n"],"names":["ThemeContext","createContext","undefined"],"mappings":";;MAGaA,YAAY,gBAAGC,aAAa,CAMvCC,SAAS;;;;"}
+{"version":3,"file":"ThemeProviderContext.mjs","sources":["../src/ThemeProviderContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ScreenMode, Theming } from './const';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: NonNullable<Theming['theme']>;\n      screenMode: ScreenMode;\n      setTheme: (theme: NonNullable<Theming['theme']>) => void;\n      setScreenMode: (screenMode: ScreenMode) => void;\n    }\n  | undefined\n>(undefined);\n"],"names":["ThemeContext","createContext","undefined"],"mappings":";;MAGaA,YAAY,gBAAGC,aAAa,CAQvCC,SAAS;;;;"}

package/dist/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,OAAO,EACR,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,aAAa,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,WACjC,CAAC;AAE9C,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,UAClC,CAAC;AAE5C,eAAO,MAAM,kBAAkB,GAC7B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KACnC,KAAK,IAAI,gBAA4C,CAAC;AAEzD,eAAO,MAAM,gBAAgB,GAC3B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACpC,YAAY,UAAU,KACrB,UAAU,IAAI,cACqD,CAAC;AAEvE,eAAO,MAAM,iBAAiB,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,YAAY,UAAU,WAc7F,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,OAAO,EACR,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,aAAa,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,WACjC,CAAC;AAE9C,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,UAClC,CAAC;AAE5C,eAAO,MAAM,kBAAkB,GAC7B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KACnC,KAAK,IAAI,gBAA4C,CAAC;AAEzD,eAAO,MAAM,gBAAgB,GAC3B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACpC,YAAY,UAAU,KACrB,UAAU,IAAI,cACqD,CAAC;AAEvE,eAAO,MAAM,iBAAiB,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,YAAY,UAAU,WAuC7F,CAAC"}

package/dist/helpers.js

@@ -7,16 +7,38 @@ const isExtraTheme = theme => _const.extraThemes.includes(theme);
 const isForestGreenTheme = theme => theme === _const.extraThemes[0];
 const isScreenModeDark = (theme, screenMode) => isThemeModern(theme) && _const.screenModes[1] === screenMode;
 const getThemeClassName = (theme, screenMode) => {
-  if (!isThemeModern(theme)) {
-    return `np-theme-${theme || 'personal'}`;
+  if (['light'].includes(theme)) {
+    return `np-theme-${theme}`;
   }
-  let classes = `np-theme-${theme === 'business' ? 'business' : 'personal'}`;
-  if (isExtraTheme(theme)) {
-    classes += ` ${classes}--${theme}`;
-  } else if (_const.screenModes[1] === screenMode) {
-    classes += ` ${classes}--${screenMode}`;
+  // Personal light is always there by default
+  const themeClasses = ['np-theme-personal'];
+  /* eslint-disable functional/immutable-data */
+  // Personal dark theme
+  if (theme === 'personal' && screenMode === 'dark') {
+    themeClasses.push(`np-theme-personal--${screenMode}`);
   }
-  return classes;
+  // Personal forest-green and bright-green themes
+  else if (['forest-green', 'bright-green'].includes(theme)) {
+    themeClasses.push(`np-theme-personal--${theme}`);
+  }
+  // Business light
+  else if (theme === 'business') {
+    themeClasses.push(`np-theme-business`);
+    // Business dark theme
+    if (screenMode === 'dark') {
+      themeClasses.push(`np-theme-business--${screenMode}`);
+    }
+  }
+  // Business forest-green and bright-green themes
+  else if (['business--forest-green', 'business--bright-green'].includes(theme)) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+  // Platform themes
+  else if (theme.startsWith('platform')) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+  /* eslint-enable functional/immutable-data */
+  return themeClasses.join(' ');
 };
 
 exports.getThemeClassName = getThemeClassName;

package/dist/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n  ModernTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: NonNullable<Theming['theme']>,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme || 'personal'}`;\n  }\n\n  let classes = `np-theme-${theme === 'business' ? 'business' : '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"],"names":["isThemeModern","theme","modernThemes","includes","isExtraTheme","extraThemes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","classes"],"mappings":";;;;AAUO,MAAMA,aAAa,GAAIC,KAAoC,IAChEC,mBAAY,CAACC,QAAQ,CAACF,KAAoB;AAErC,MAAMG,YAAY,GAAIH,KAAoC,IAC/DI,kBAAW,CAACF,QAAQ,CAACF,KAAmB;AAEnC,MAAMK,kBAAkB,GAC7BL,KAAoC,IACNA,KAAK,KAAKI,kBAAW,CAAC,CAAC;MAE1CE,gBAAgB,GAAGA,CAC9BN,KAAoC,EACpCO,UAAsB,KAEtBR,aAAa,CAACC,KAAoB,CAAC,IAAIQ,kBAAW,CAAC,CAAC,CAAC,KAAKD;MAE/CE,iBAAiB,GAAGA,CAACT,KAAoC,EAAEO,UAAsB,KAAI;AAChG,EAAA,IAAI,CAACR,aAAa,CAACC,KAAK,CAAC,EAAE;AACzB,IAAA,OAAO,CAAA,SAAA,EAAYA,KAAK,IAAI,UAAU,CAAA,CAAE;AAC1C,EAAA;EAEA,IAAIU,OAAO,GAAG,CAAA,SAAA,EAAYV,KAAK,KAAK,UAAU,GAAG,UAAU,GAAG,UAAU,CAAA,CAAE;AAE1E,EAAA,IAAIG,YAAY,CAACH,KAAK,CAAC,EAAE;AACvBU,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKV,KAAK,CAAA,CAAE;EACpC,CAAC,MAAM,IAAIQ,kBAAW,CAAC,CAAC,CAAC,KAAKD,UAAU,EAAE;AACxCG,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKH,UAAU,CAAA,CAAE;AACzC,EAAA;AAEA,EAAA,OAAOG,OAAO;AAChB;;;;;;;;"}
+{"version":3,"file":"helpers.js","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n  ModernTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: NonNullable<Theming['theme']>,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n  if (['light'].includes(theme)) {\n    return `np-theme-${theme}`;\n  }\n\n  // Personal light is always there by default\n  const themeClasses = ['np-theme-personal'];\n\n  /* eslint-disable functional/immutable-data */\n  // Personal dark theme\n  if (theme === 'personal' && screenMode === 'dark') {\n    themeClasses.push(`np-theme-personal--${screenMode}`);\n  }\n\n  // Personal forest-green and bright-green themes\n  else if (['forest-green', 'bright-green'].includes(theme)) {\n    themeClasses.push(`np-theme-personal--${theme}`);\n  }\n\n  // Business light\n  else if (theme === 'business') {\n    themeClasses.push(`np-theme-business`);\n    // Business dark theme\n    if (screenMode === 'dark') {\n      themeClasses.push(`np-theme-business--${screenMode}`);\n    }\n  }\n\n  // Business forest-green and bright-green themes\n  else if (['business--forest-green', 'business--bright-green'].includes(theme)) {\n    themeClasses.push(`np-theme-${theme}`);\n  }\n\n  // Platform themes\n  else if (theme.startsWith('platform')) {\n    themeClasses.push(`np-theme-${theme}`);\n  }\n  /* eslint-enable functional/immutable-data */\n  return themeClasses.join(' ');\n};\n"],"names":["isThemeModern","theme","modernThemes","includes","isExtraTheme","extraThemes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","themeClasses","push","startsWith","join"],"mappings":";;;;AAUO,MAAMA,aAAa,GAAIC,KAAoC,IAChEC,mBAAY,CAACC,QAAQ,CAACF,KAAoB;AAErC,MAAMG,YAAY,GAAIH,KAAoC,IAC/DI,kBAAW,CAACF,QAAQ,CAACF,KAAmB;AAEnC,MAAMK,kBAAkB,GAC7BL,KAAoC,IACNA,KAAK,KAAKI,kBAAW,CAAC,CAAC;MAE1CE,gBAAgB,GAAGA,CAC9BN,KAAoC,EACpCO,UAAsB,KAEtBR,aAAa,CAACC,KAAoB,CAAC,IAAIQ,kBAAW,CAAC,CAAC,CAAC,KAAKD;MAE/CE,iBAAiB,GAAGA,CAACT,KAAoC,EAAEO,UAAsB,KAAI;EAChG,IAAI,CAAC,OAAO,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;IAC7B,OAAO,CAAA,SAAA,EAAYA,KAAK,CAAA,CAAE;AAC5B,EAAA;AAEA;AACA,EAAA,MAAMU,YAAY,GAAG,CAAC,mBAAmB,CAAC;AAE1C;AACA;AACA,EAAA,IAAIV,KAAK,KAAK,UAAU,IAAIO,UAAU,KAAK,MAAM,EAAE;AACjDG,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,EAAA;AAEA;OACK,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;AACzDU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBX,KAAK,EAAE,CAAC;AAClD,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,KAAK,UAAU,EAAE;AAC7BU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACtC;IACA,IAAIJ,UAAU,KAAK,MAAM,EAAE;AACzBG,MAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,IAAA;AACF,EAAA;AAEA;OACK,IAAI,CAAC,wBAAwB,EAAE,wBAAwB,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;AAC7EU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,CAACY,UAAU,CAAC,UAAU,CAAC,EAAE;AACrCF,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AACA;AACA,EAAA,OAAOU,YAAY,CAACG,IAAI,CAAC,GAAG,CAAC;AAC/B;;;;;;;;"}

package/dist/helpers.mjs

@@ -5,16 +5,38 @@ const isExtraTheme = theme => extraThemes.includes(theme);
 const isForestGreenTheme = theme => theme === extraThemes[0];
 const isScreenModeDark = (theme, screenMode) => isThemeModern(theme) && screenModes[1] === screenMode;
 const getThemeClassName = (theme, screenMode) => {
-  if (!isThemeModern(theme)) {
-    return `np-theme-${theme || 'personal'}`;
+  if (['light'].includes(theme)) {
+    return `np-theme-${theme}`;
   }
-  let classes = `np-theme-${theme === 'business' ? 'business' : 'personal'}`;
-  if (isExtraTheme(theme)) {
-    classes += ` ${classes}--${theme}`;
-  } else if (screenModes[1] === screenMode) {
-    classes += ` ${classes}--${screenMode}`;
+  // Personal light is always there by default
+  const themeClasses = ['np-theme-personal'];
+  /* eslint-disable functional/immutable-data */
+  // Personal dark theme
+  if (theme === 'personal' && screenMode === 'dark') {
+    themeClasses.push(`np-theme-personal--${screenMode}`);
   }
-  return classes;
+  // Personal forest-green and bright-green themes
+  else if (['forest-green', 'bright-green'].includes(theme)) {
+    themeClasses.push(`np-theme-personal--${theme}`);
+  }
+  // Business light
+  else if (theme === 'business') {
+    themeClasses.push(`np-theme-business`);
+    // Business dark theme
+    if (screenMode === 'dark') {
+      themeClasses.push(`np-theme-business--${screenMode}`);
+    }
+  }
+  // Business forest-green and bright-green themes
+  else if (['business--forest-green', 'business--bright-green'].includes(theme)) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+  // Platform themes
+  else if (theme.startsWith('platform')) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+  /* eslint-enable functional/immutable-data */
+  return themeClasses.join(' ');
 };
 
 export { getThemeClassName, isExtraTheme, isForestGreenTheme, isScreenModeDark, isThemeModern };

package/dist/helpers.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.mjs","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n  ModernTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: NonNullable<Theming['theme']>,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme || 'personal'}`;\n  }\n\n  let classes = `np-theme-${theme === 'business' ? 'business' : '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"],"names":["isThemeModern","theme","modernThemes","includes","isExtraTheme","extraThemes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","classes"],"mappings":";;AAUO,MAAMA,aAAa,GAAIC,KAAoC,IAChEC,YAAY,CAACC,QAAQ,CAACF,KAAoB;AAErC,MAAMG,YAAY,GAAIH,KAAoC,IAC/DI,WAAW,CAACF,QAAQ,CAACF,KAAmB;AAEnC,MAAMK,kBAAkB,GAC7BL,KAAoC,IACNA,KAAK,KAAKI,WAAW,CAAC,CAAC;MAE1CE,gBAAgB,GAAGA,CAC9BN,KAAoC,EACpCO,UAAsB,KAEtBR,aAAa,CAACC,KAAoB,CAAC,IAAIQ,WAAW,CAAC,CAAC,CAAC,KAAKD;MAE/CE,iBAAiB,GAAGA,CAACT,KAAoC,EAAEO,UAAsB,KAAI;AAChG,EAAA,IAAI,CAACR,aAAa,CAACC,KAAK,CAAC,EAAE;AACzB,IAAA,OAAO,CAAA,SAAA,EAAYA,KAAK,IAAI,UAAU,CAAA,CAAE;AAC1C,EAAA;EAEA,IAAIU,OAAO,GAAG,CAAA,SAAA,EAAYV,KAAK,KAAK,UAAU,GAAG,UAAU,GAAG,UAAU,CAAA,CAAE;AAE1E,EAAA,IAAIG,YAAY,CAACH,KAAK,CAAC,EAAE;AACvBU,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKV,KAAK,CAAA,CAAE;EACpC,CAAC,MAAM,IAAIQ,WAAW,CAAC,CAAC,CAAC,KAAKD,UAAU,EAAE;AACxCG,IAAAA,OAAO,IAAI,CAAA,CAAA,EAAIA,OAAO,CAAA,EAAA,EAAKH,UAAU,CAAA,CAAE;AACzC,EAAA;AAEA,EAAA,OAAOG,OAAO;AAChB;;;;"}
+{"version":3,"file":"helpers.mjs","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n  ModernTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n  Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: NonNullable<Theming['theme']>,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n  if (['light'].includes(theme)) {\n    return `np-theme-${theme}`;\n  }\n\n  // Personal light is always there by default\n  const themeClasses = ['np-theme-personal'];\n\n  /* eslint-disable functional/immutable-data */\n  // Personal dark theme\n  if (theme === 'personal' && screenMode === 'dark') {\n    themeClasses.push(`np-theme-personal--${screenMode}`);\n  }\n\n  // Personal forest-green and bright-green themes\n  else if (['forest-green', 'bright-green'].includes(theme)) {\n    themeClasses.push(`np-theme-personal--${theme}`);\n  }\n\n  // Business light\n  else if (theme === 'business') {\n    themeClasses.push(`np-theme-business`);\n    // Business dark theme\n    if (screenMode === 'dark') {\n      themeClasses.push(`np-theme-business--${screenMode}`);\n    }\n  }\n\n  // Business forest-green and bright-green themes\n  else if (['business--forest-green', 'business--bright-green'].includes(theme)) {\n    themeClasses.push(`np-theme-${theme}`);\n  }\n\n  // Platform themes\n  else if (theme.startsWith('platform')) {\n    themeClasses.push(`np-theme-${theme}`);\n  }\n  /* eslint-enable functional/immutable-data */\n  return themeClasses.join(' ');\n};\n"],"names":["isThemeModern","theme","modernThemes","includes","isExtraTheme","extraThemes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","themeClasses","push","startsWith","join"],"mappings":";;AAUO,MAAMA,aAAa,GAAIC,KAAoC,IAChEC,YAAY,CAACC,QAAQ,CAACF,KAAoB;AAErC,MAAMG,YAAY,GAAIH,KAAoC,IAC/DI,WAAW,CAACF,QAAQ,CAACF,KAAmB;AAEnC,MAAMK,kBAAkB,GAC7BL,KAAoC,IACNA,KAAK,KAAKI,WAAW,CAAC,CAAC;MAE1CE,gBAAgB,GAAGA,CAC9BN,KAAoC,EACpCO,UAAsB,KAEtBR,aAAa,CAACC,KAAoB,CAAC,IAAIQ,WAAW,CAAC,CAAC,CAAC,KAAKD;MAE/CE,iBAAiB,GAAGA,CAACT,KAAoC,EAAEO,UAAsB,KAAI;EAChG,IAAI,CAAC,OAAO,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;IAC7B,OAAO,CAAA,SAAA,EAAYA,KAAK,CAAA,CAAE;AAC5B,EAAA;AAEA;AACA,EAAA,MAAMU,YAAY,GAAG,CAAC,mBAAmB,CAAC;AAE1C;AACA;AACA,EAAA,IAAIV,KAAK,KAAK,UAAU,IAAIO,UAAU,KAAK,MAAM,EAAE;AACjDG,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,EAAA;AAEA;OACK,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;AACzDU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBX,KAAK,EAAE,CAAC;AAClD,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,KAAK,UAAU,EAAE;AAC7BU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACtC;IACA,IAAIJ,UAAU,KAAK,MAAM,EAAE;AACzBG,MAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,IAAA;AACF,EAAA;AAEA;OACK,IAAI,CAAC,wBAAwB,EAAE,wBAAwB,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;AAC7EU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,CAACY,UAAU,CAAC,UAAU,CAAC,EAAE;AACrCF,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AACA;AACA,EAAA,OAAOU,YAAY,CAACG,IAAI,CAAC,GAAG,CAAC;AAC/B;;;;"}

package/dist/useTheme.d.ts

@@ -6,6 +6,8 @@ interface ThemeHookValue {
     isForestGreenTheme: boolean;
     isScreenModeDark: boolean;
     className: string;
+    setTheme: (theme: NonNullable<Theming['theme']>) => void;
+    setScreenMode: (screenMode: ScreenMode) => void;
 }
 export declare const useTheme: () => ThemeHookValue;
 export {};

package/dist/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../src/useTheme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAInD,UAAU,cAAc;IACtB,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IACrC,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;CACnB;AAeD,eAAO,MAAM,QAAQ,QAAO,cAuB3B,CAAC"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../src/useTheme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAInD,UAAU,cAAc;IACtB,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IACrC,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;CACjD;AAiBD,eAAO,MAAM,QAAQ,QAAO,cA8B3B,CAAC"}

package/dist/useTheme.js

@@ -7,7 +7,9 @@ var helpers = require('./helpers.js');
 
 const FALLBACK_VALUES = {
   theme: _const.DEFAULT_BASE_THEME,
-  screenMode: _const.DEFAULT_SCREEN_MODE
+  screenMode: _const.DEFAULT_SCREEN_MODE,
+  setTheme: () => {},
+  setScreenMode: () => {}
 };
 const isNotProduction = () => {
   try {
@@ -24,7 +26,9 @@ const useTheme = () => {
   }
   const {
     theme,
-    screenMode: contextScreenMode
+    screenMode: contextScreenMode,
+    setTheme,
+    setScreenMode
   } = theming ?? FALLBACK_VALUES;
   const screenMode = theme === _const.DEFAULT_BASE_THEME ? _const.DEFAULT_SCREEN_MODE : contextScreenMode;
   return react.useMemo(() => ({
@@ -33,8 +37,10 @@ const useTheme = () => {
     isModern: helpers.isThemeModern(theme),
     isForestGreenTheme: helpers.isForestGreenTheme(theme),
     isScreenModeDark: helpers.isScreenModeDark(theme, screenMode),
-    className: helpers.getThemeClassName(theme, screenMode)
-  }), [theme, screenMode]);
+    className: helpers.getThemeClassName(theme, screenMode),
+    setTheme,
+    setScreenMode
+  }), [theme, screenMode, setTheme, setScreenMode]);
 };
 
 exports.useTheme = useTheme;

package/dist/useTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.js","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: NonNullable<Theming['theme']>;\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} as const;\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"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;;;AAgBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,yBAAkB;AACzBC,EAAAA,UAAU,EAAEC;CACJ;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,EAAA,CAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd,EAAA;AACF,CAAC;AAEM,MAAMC,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACC,iCAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D,EAAA;EAEA,MAAM;IAAEd,KAAK;AAAEE,IAAAA,UAAU,EAAEa;GAAmB,GAAGL,OAAO,IAAIX,eAAe;EAE3E,MAAMG,UAAU,GAAGF,KAAK,KAAKC,yBAAkB,GAAGE,0BAAmB,GAAGY,iBAAiB;EAEzF,OAAOC,aAAO,CACZ,OAAO;IACLhB,KAAK;IACLE,UAAU;AACVe,IAAAA,QAAQ,EAAEC,qBAAa,CAAClB,KAAK,CAAC;AAC9BmB,IAAAA,kBAAkB,EAAEA,0BAAkB,CAACnB,KAAK,CAAC;AAC7CoB,IAAAA,gBAAgB,EAAEA,wBAAgB,CAACpB,KAAK,EAAEE,UAAU,CAAC;AACrDmB,IAAAA,SAAS,EAAEC,yBAAiB,CAACtB,KAAK,EAAEE,UAAU;AAC/C,GAAA,CAAC,EACF,CAACF,KAAK,EAAEE,UAAU,CAAC,CACpB;AACH;;;;"}
+{"version":3,"file":"useTheme.js","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: NonNullable<Theming['theme']>;\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isForestGreenTheme: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n  setTheme: (theme: NonNullable<Theming['theme']>) => void;\n  setScreenMode: (screenMode: ScreenMode) => void;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n  setTheme: () => {},\n  setScreenMode: () => {},\n} as const;\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 {\n    theme,\n    screenMode: contextScreenMode,\n    setTheme,\n    setScreenMode,\n  } = 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      setTheme,\n      setScreenMode,\n    }),\n    [theme, screenMode, setTheme, setScreenMode],\n  );\n};\n"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","setTheme","setScreenMode","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;;;AAkBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,yBAAkB;AACzBC,EAAAA,UAAU,EAAEC,0BAAmB;AAC/BC,EAAAA,QAAQ,EAAEA,MAAK,CAAE,CAAC;EAClBC,aAAa,EAAEA,MAAK,CAAE;CACd;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,EAAA,CAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd,EAAA;AACF,CAAC;AAEM,MAAMC,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACC,iCAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D,EAAA;EAEA,MAAM;IACJhB,KAAK;AACLE,IAAAA,UAAU,EAAEe,iBAAiB;IAC7Bb,QAAQ;AACRC,IAAAA;GACD,GAAGO,OAAO,IAAIb,eAAe;EAE9B,MAAMG,UAAU,GAAGF,KAAK,KAAKC,yBAAkB,GAAGE,0BAAmB,GAAGc,iBAAiB;EAEzF,OAAOC,aAAO,CACZ,OAAO;IACLlB,KAAK;IACLE,UAAU;AACViB,IAAAA,QAAQ,EAAEC,qBAAa,CAACpB,KAAK,CAAC;AAC9BqB,IAAAA,kBAAkB,EAAEA,0BAAkB,CAACrB,KAAK,CAAC;AAC7CsB,IAAAA,gBAAgB,EAAEA,wBAAgB,CAACtB,KAAK,EAAEE,UAAU,CAAC;AACrDqB,IAAAA,SAAS,EAAEC,yBAAiB,CAACxB,KAAK,EAAEE,UAAU,CAAC;IAC/CE,QAAQ;AACRC,IAAAA;GACD,CAAC,EACF,CAACL,KAAK,EAAEE,UAAU,EAAEE,QAAQ,EAAEC,aAAa,CAAC,CAC7C;AACH;;;;"}

package/dist/useTheme.mjs

@@ -1,11 +1,13 @@
 import { useContext, useMemo } from 'react';
 import { ThemeContext } from './ThemeProviderContext.mjs';
-import { DEFAULT_SCREEN_MODE, DEFAULT_BASE_THEME } from './const.mjs';
+import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const.mjs';
 import { getThemeClassName, isScreenModeDark, isForestGreenTheme, isThemeModern } from './helpers.mjs';
 
 const FALLBACK_VALUES = {
   theme: DEFAULT_BASE_THEME,
-  screenMode: DEFAULT_SCREEN_MODE
+  screenMode: DEFAULT_SCREEN_MODE,
+  setTheme: () => {},
+  setScreenMode: () => {}
 };
 const isNotProduction = () => {
   try {
@@ -22,7 +24,9 @@ const useTheme = () => {
   }
   const {
     theme,
-    screenMode: contextScreenMode
+    screenMode: contextScreenMode,
+    setTheme,
+    setScreenMode
   } = theming ?? FALLBACK_VALUES;
   const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
   return useMemo(() => ({
@@ -31,8 +35,10 @@ const useTheme = () => {
     isModern: isThemeModern(theme),
     isForestGreenTheme: isForestGreenTheme(theme),
     isScreenModeDark: isScreenModeDark(theme, screenMode),
-    className: getThemeClassName(theme, screenMode)
-  }), [theme, screenMode]);
+    className: getThemeClassName(theme, screenMode),
+    setTheme,
+    setScreenMode
+  }), [theme, screenMode, setTheme, setScreenMode]);
 };
 
 export { useTheme };

package/dist/useTheme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.mjs","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: NonNullable<Theming['theme']>;\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} as const;\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"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;AAgBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,kBAAkB;AACzBC,EAAAA,UAAU,EAAEC;CACJ;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,EAAA,CAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd,EAAA;AACF,CAAC;AAEM,MAAMC,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACC,YAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D,EAAA;EAEA,MAAM;IAAEd,KAAK;AAAEE,IAAAA,UAAU,EAAEa;GAAmB,GAAGL,OAAO,IAAIX,eAAe;EAE3E,MAAMG,UAAU,GAAGF,KAAK,KAAKC,kBAAkB,GAAGE,mBAAmB,GAAGY,iBAAiB;EAEzF,OAAOC,OAAO,CACZ,OAAO;IACLhB,KAAK;IACLE,UAAU;AACVe,IAAAA,QAAQ,EAAEC,aAAa,CAAClB,KAAK,CAAC;AAC9BmB,IAAAA,kBAAkB,EAAEA,kBAAkB,CAACnB,KAAK,CAAC;AAC7CoB,IAAAA,gBAAgB,EAAEA,gBAAgB,CAACpB,KAAK,EAAEE,UAAU,CAAC;AACrDmB,IAAAA,SAAS,EAAEC,iBAAiB,CAACtB,KAAK,EAAEE,UAAU;AAC/C,GAAA,CAAC,EACF,CAACF,KAAK,EAAEE,UAAU,CAAC,CACpB;AACH;;;;"}
+{"version":3,"file":"useTheme.mjs","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: NonNullable<Theming['theme']>;\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isForestGreenTheme: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n  setTheme: (theme: NonNullable<Theming['theme']>) => void;\n  setScreenMode: (screenMode: ScreenMode) => void;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n  setTheme: () => {},\n  setScreenMode: () => {},\n} as const;\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 {\n    theme,\n    screenMode: contextScreenMode,\n    setTheme,\n    setScreenMode,\n  } = 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      setTheme,\n      setScreenMode,\n    }),\n    [theme, screenMode, setTheme, setScreenMode],\n  );\n};\n"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","setTheme","setScreenMode","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;AAkBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,kBAAkB;AACzBC,EAAAA,UAAU,EAAEC,mBAAmB;AAC/BC,EAAAA,QAAQ,EAAEA,MAAK,CAAE,CAAC;EAClBC,aAAa,EAAEA,MAAK,CAAE;CACd;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,EAAA,CAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd,EAAA;AACF,CAAC;AAEM,MAAMC,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACC,YAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D,EAAA;EAEA,MAAM;IACJhB,KAAK;AACLE,IAAAA,UAAU,EAAEe,iBAAiB;IAC7Bb,QAAQ;AACRC,IAAAA;GACD,GAAGO,OAAO,IAAIb,eAAe;EAE9B,MAAMG,UAAU,GAAGF,KAAK,KAAKC,kBAAkB,GAAGE,mBAAmB,GAAGc,iBAAiB;EAEzF,OAAOC,OAAO,CACZ,OAAO;IACLlB,KAAK;IACLE,UAAU;AACViB,IAAAA,QAAQ,EAAEC,aAAa,CAACpB,KAAK,CAAC;AAC9BqB,IAAAA,kBAAkB,EAAEA,kBAAkB,CAACrB,KAAK,CAAC;AAC7CsB,IAAAA,gBAAgB,EAAEA,gBAAgB,CAACtB,KAAK,EAAEE,UAAU,CAAC;AACrDqB,IAAAA,SAAS,EAAEC,iBAAiB,CAACxB,KAAK,EAAEE,UAAU,CAAC;IAC/CE,QAAQ;AACRC,IAAAA;GACD,CAAC,EACF,CAACL,KAAK,EAAEE,UAAU,EAAEE,QAAQ,EAAEC,aAAa,CAAC,CAC7C;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/components-theming",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [

package/src/ThemeProvider.spec.tsx

@@ -40,9 +40,13 @@ describe('ThemeProvider', () => {
     // eslint-disable-next-line testing-library/no-node-access
     expect(screen.getByText('personal').parentElement).toHaveClass('np-theme-personal');
     // eslint-disable-next-line testing-library/no-node-access
-    expect(screen.getByText('platform').parentElement).toHaveClass('np-theme-platform');
+    expect(screen.getByText('platform').parentElement).toHaveClass(
+      'np-theme-personal',
+      'np-theme-platform',
+    );
     // eslint-disable-next-line testing-library/no-node-access
     expect(screen.getByText('platform--forest-green').parentElement).toHaveClass(
+      'np-theme-personal',
       'np-theme-platform--forest-green',
     );
   });
@@ -64,15 +68,24 @@ describe('ThemeProvider', () => {
     );
 
     // eslint-disable-next-line testing-library/no-node-access
-    expect(screen.getByText('business').parentElement).toHaveClass('np-theme-business');
+    expect(screen.getByText('business').parentElement).toHaveClass(
+      'np-theme-personal',
+      'np-theme-business',
+    );
     // eslint-disable-next-line testing-library/no-node-access
-    expect(screen.getByText('business-dark').parentElement).toHaveClass('np-theme-business--dark');
+    expect(screen.getByText('business-dark').parentElement).toHaveClass(
+      'np-theme-personal',
+      'np-theme-business',
+      'np-theme-business--dark',
+    );
     // eslint-disable-next-line testing-library/no-node-access
     expect(screen.getByText('business--bright-green').parentElement).toHaveClass(
+      'np-theme-personal',
       'np-theme-business--bright-green',
     );
     // eslint-disable-next-line testing-library/no-node-access
     expect(screen.getByText('business--forest-green').parentElement).toHaveClass(
+      'np-theme-personal',
       'np-theme-business--forest-green',
     );
   });

package/src/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useContext, useEffect, useMemo } from 'react';
+import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';
 
 import { ThemedChildren } from './ThemedChildren';
 import type { Theming } from './const';
@@ -12,13 +12,15 @@ type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };
 const themeClass = /\bnp-theme-[a-z-]+\b/g;
 
 export const ThemeProvider = ({
-  theme = DEFAULT_BASE_THEME,
-  screenMode = DEFAULT_SCREEN_MODE,
+  theme: initialTheme = DEFAULT_BASE_THEME,
+  screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,
   isNotRootProvider = false,
   children,
   className = undefined,
 }: ThemeProviderProps) => {
   const isContextRoot = useContext(ThemeContext) === undefined;
+  const [theme, setTheme] = useState(initialTheme);
+  const [screenMode, setScreenMode] = useState(initialScreenMode);
 
   // useEffect hook used to apply the theme class to the HTML element
   useEffect(() => {
@@ -35,7 +37,10 @@ export const ThemeProvider = ({
     }
   }, [isNotRootProvider, isContextRoot, theme, screenMode]);
 
-  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);
+  const contextValue = useMemo(
+    () => ({ theme, screenMode, setTheme, setScreenMode }),
+    [theme, screenMode, setTheme, setScreenMode],
+  );
 
   return (
     <ThemeContext.Provider value={contextValue}>

package/src/ThemeProviderContext.tsx

@@ -5,6 +5,8 @@ export const ThemeContext = createContext<
   | {
       theme: NonNullable<Theming['theme']>;
       screenMode: ScreenMode;
+      setTheme: (theme: NonNullable<Theming['theme']>) => void;
+      setScreenMode: (screenMode: ScreenMode) => void;
     }
   | undefined
 >(undefined);

package/src/helpers.ts

@@ -25,17 +25,42 @@ export const isScreenModeDark = (
   isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;
 
 export const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {
-  if (!isThemeModern(theme)) {
-    return `np-theme-${theme || 'personal'}`;
+  if (['light'].includes(theme)) {
+    return `np-theme-${theme}`;
   }
 
-  let classes = `np-theme-${theme === 'business' ? 'business' : 'personal'}`;
+  // Personal light is always there by default
+  const themeClasses = ['np-theme-personal'];
 
-  if (isExtraTheme(theme)) {
-    classes += ` ${classes}--${theme}`;
-  } else if (screenModes[1] === screenMode) {
-    classes += ` ${classes}--${screenMode}`;
+  /* eslint-disable functional/immutable-data */
+  // Personal dark theme
+  if (theme === 'personal' && screenMode === 'dark') {
+    themeClasses.push(`np-theme-personal--${screenMode}`);
   }
 
-  return classes;
+  // Personal forest-green and bright-green themes
+  else if (['forest-green', 'bright-green'].includes(theme)) {
+    themeClasses.push(`np-theme-personal--${theme}`);
+  }
+
+  // Business light
+  else if (theme === 'business') {
+    themeClasses.push(`np-theme-business`);
+    // Business dark theme
+    if (screenMode === 'dark') {
+      themeClasses.push(`np-theme-business--${screenMode}`);
+    }
+  }
+
+  // Business forest-green and bright-green themes
+  else if (['business--forest-green', 'business--bright-green'].includes(theme)) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+
+  // Platform themes
+  else if (theme.startsWith('platform')) {
+    themeClasses.push(`np-theme-${theme}`);
+  }
+  /* eslint-enable functional/immutable-data */
+  return themeClasses.join(' ');
 };

package/src/useTheme.spec.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react';
+import { renderHook, act } from '@testing-library/react';
 
 import { ThemeProvider } from './ThemeProvider';
 import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';
@@ -12,7 +12,7 @@ describe('useTheme', () => {
       result: { current },
     } = renderHook(() => useTheme());
 
-    expect(current).toStrictEqual({
+    expect(current).toMatchObject({
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: false,
@@ -20,6 +20,8 @@ describe('useTheme', () => {
       isScreenModeDark: false,
       className: 'np-theme-light',
     });
+    expect(current.setTheme).toBeInstanceOf(Function);
+    expect(current.setScreenMode).toBeInstanceOf(Function);
 
     jest.clearAllMocks();
   });
@@ -31,7 +33,7 @@ describe('useTheme', () => {
       wrapper: (props) => <ThemeProvider theme="personal" {...props} />,
     });
 
-    expect(current).toStrictEqual({
+    expect(current).toMatchObject({
       theme: 'personal',
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: true,
@@ -39,6 +41,8 @@ describe('useTheme', () => {
       isScreenModeDark: false,
       className: 'np-theme-personal',
     });
+    expect(current.setTheme).toBeInstanceOf(Function);
+    expect(current.setScreenMode).toBeInstanceOf(Function);
   });
 
   it('returns forest-green theme', () => {
@@ -48,7 +52,7 @@ describe('useTheme', () => {
       wrapper: (props) => <ThemeProvider theme="forest-green" {...props} />,
     });
 
-    expect(current).toStrictEqual({
+    expect(current).toMatchObject({
       theme: 'forest-green',
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: true,
@@ -56,6 +60,8 @@ describe('useTheme', () => {
       isScreenModeDark: false,
       className: 'np-theme-personal np-theme-personal--forest-green',
     });
+    expect(current.setTheme).toBeInstanceOf(Function);
+    expect(current.setScreenMode).toBeInstanceOf(Function);
   });
 
   it('returns bright-green theme', () => {
@@ -65,7 +71,7 @@ describe('useTheme', () => {
       wrapper: (props) => <ThemeProvider theme="bright-green" {...props} />,
     });
 
-    expect(current).toStrictEqual({
+    expect(current).toMatchObject({
       theme: 'bright-green',
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: true,
@@ -73,6 +79,8 @@ describe('useTheme', () => {
       isScreenModeDark: false,
       className: 'np-theme-personal np-theme-personal--bright-green',
     });
+    expect(current.setTheme).toBeInstanceOf(Function);
+    expect(current.setScreenMode).toBeInstanceOf(Function);
   });
 
   it('returns default screen mode if used default light theme', () => {
@@ -82,7 +90,7 @@ describe('useTheme', () => {
       wrapper: (props) => <ThemeProvider theme={DEFAULT_BASE_THEME} screenMode="dark" {...props} />,
     });
 
-    expect(current).toStrictEqual({
+    expect(current).toMatchObject({
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: false,
@@ -90,6 +98,8 @@ describe('useTheme', () => {
       isScreenModeDark: false,
       className: 'np-theme-light',
     });
+    expect(current.setTheme).toBeInstanceOf(Function);
+    expect(current.setScreenMode).toBeInstanceOf(Function);
   });
 
   it('returns dark screen mode', () => {
@@ -99,7 +109,7 @@ describe('useTheme', () => {
       wrapper: (props) => <ThemeProvider theme="personal" screenMode="dark" {...props} />,
     });
 
-    expect(current).toStrictEqual({
+    expect(current).toMatchObject({
       theme: 'personal',
       screenMode: 'dark',
       isModern: true,
@@ -107,8 +117,9 @@ describe('useTheme', () => {
       isScreenModeDark: true,
       className: 'np-theme-personal np-theme-personal--dark',
     });
+    expect(current.setTheme).toBeInstanceOf(Function);
+    expect(current.setScreenMode).toBeInstanceOf(Function);
   });
-
   it('warns when used outside a theme provider on staging or localhost', () => {
     jest.spyOn(console, 'warn').mockImplementation();
 
@@ -123,7 +134,7 @@ describe('useTheme', () => {
       result: { current: productionValue },
     } = renderHook(() => useTheme());
 
-    expect(productionValue).toStrictEqual({
+    expect(productionValue).toMatchObject({
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: false,
@@ -131,6 +142,8 @@ describe('useTheme', () => {
       isScreenModeDark: false,
       className: 'np-theme-light',
     });
+    expect(productionValue.setTheme).toBeInstanceOf(Function);
+    expect(productionValue.setScreenMode).toBeInstanceOf(Function);
 
     // eslint-disable-next-line no-console
     expect(console.warn).not.toHaveBeenCalled();
@@ -146,7 +159,7 @@ describe('useTheme', () => {
       result: { current: stagingValue },
     } = renderHook(() => useTheme());
 
-    expect(stagingValue).toStrictEqual({
+    expect(stagingValue).toMatchObject({
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: false,
@@ -154,6 +167,8 @@ describe('useTheme', () => {
       isScreenModeDark: false,
       className: 'np-theme-light',
     });
+    expect(stagingValue.setTheme).toBeInstanceOf(Function);
+    expect(stagingValue.setScreenMode).toBeInstanceOf(Function);
 
     // eslint-disable-next-line no-console
     expect(console.warn).toHaveBeenCalledTimes(1);
@@ -169,7 +184,7 @@ describe('useTheme', () => {
       result: { current: localhostValue },
     } = renderHook(() => useTheme());
 
-    expect(localhostValue).toStrictEqual({
+    expect(localhostValue).toMatchObject({
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: false,
@@ -177,6 +192,8 @@ describe('useTheme', () => {
       isScreenModeDark: false,
       className: 'np-theme-light',
     });
+    expect(localhostValue.setTheme).toBeInstanceOf(Function);
+    expect(localhostValue.setScreenMode).toBeInstanceOf(Function);
 
     // eslint-disable-next-line no-console
     expect(console.warn).toHaveBeenCalledTimes(2);
@@ -190,7 +207,7 @@ describe('useTheme', () => {
       result: { current: noHostnameValue },
     } = renderHook(() => useTheme());
 
-    expect(noHostnameValue).toStrictEqual({
+    expect(noHostnameValue).toMatchObject({
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: false,
@@ -198,10 +215,42 @@ describe('useTheme', () => {
       isScreenModeDark: false,
       className: 'np-theme-light',
     });
+    expect(noHostnameValue.setTheme).toBeInstanceOf(Function);
+    expect(noHostnameValue.setScreenMode).toBeInstanceOf(Function);
 
     // eslint-disable-next-line no-console
     expect(console.warn).toHaveBeenCalledTimes(2);
 
     jest.clearAllMocks();
   });
+
+  it('allows theme changes from child components via setTheme', async () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: (props) => <ThemeProvider theme="personal" {...props} />,
+    });
+
+    expect(result.current.theme).toBe('personal');
+
+    // Change theme using setTheme
+    await act(async () => {
+      result.current.setTheme('business');
+    });
+
+    expect(result.current.theme).toBe('business');
+  });
+
+  it('allows screen mode changes from child components via setScreenMode', async () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: (props) => <ThemeProvider theme="personal" screenMode="light" {...props} />,
+    });
+
+    expect(result.current.screenMode).toBe('light');
+
+    // Change screen mode using setScreenMode
+    await act(async () => {
+      result.current.setScreenMode('dark');
+    });
+
+    expect(result.current.screenMode).toBe('dark');
+  });
 });

package/src/useTheme.ts

@@ -12,11 +12,15 @@ interface ThemeHookValue {
   isForestGreenTheme: boolean;
   isScreenModeDark: boolean;
   className: string;
+  setTheme: (theme: NonNullable<Theming['theme']>) => void;
+  setScreenMode: (screenMode: ScreenMode) => void;
 }
 
 const FALLBACK_VALUES = {
   theme: DEFAULT_BASE_THEME,
   screenMode: DEFAULT_SCREEN_MODE,
+  setTheme: () => {},
+  setScreenMode: () => {},
 } as const;
 
 const isNotProduction = () => {
@@ -35,7 +39,12 @@ export const useTheme = (): ThemeHookValue => {
     console.warn('Call to useTheme outside a ThemeProvider');
   }
 
-  const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;
+  const {
+    theme,
+    screenMode: contextScreenMode,
+    setTheme,
+    setScreenMode,
+  } = theming ?? FALLBACK_VALUES;
 
   const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
 
@@ -47,7 +56,9 @@ export const useTheme = (): ThemeHookValue => {
       isForestGreenTheme: isForestGreenTheme(theme),
       isScreenModeDark: isScreenModeDark(theme, screenMode),
       className: getThemeClassName(theme, screenMode),
+      setTheme,
+      setScreenMode,
     }),
-    [theme, screenMode],
+    [theme, screenMode, setTheme, setScreenMode],
   );
 };