Adding Theme Context

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@hibas123/theme-preact",
-  "version": "1.0.0",
+  "version": "1.0.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
    "name": "@hibas123/theme-preact",
-   "version": "1.0.5",
+   "version": "1.0.6",
    "description": "",
    "main": "out/index.js",
    "dependencies": {

src/Theme.tsx

@@ -1,4 +1,4 @@
-import { h } from "preact";
+import { h, createContext } from "preact";
 import { useEffect, useState, useMemo } from "preact/hooks";
 
 export enum ThemeModes {
@@ -21,6 +21,12 @@ export interface IThemeProps {
    onSuccess?: string;
 }
 
+export interface IThemeContext {
+   mode: ThemeModes.DARK | ThemeModes.LIGHT;
+}
+
+export const ThemeContext = createContext({});
+
 const modeMediaQuery = window.matchMedia("prefers-color-scheme: dark");
 
 export default function Theme({ mode, children, ...colors }: IThemeProps) {
@@ -99,8 +105,12 @@ export default function Theme({ mode, children, ...colors }: IThemeProps) {
    ]);
 
    return (
-      <div class={isDark ? "dark-theme" : "light-theme"} style={style}>
+      <ThemeContext.Provider
-         {children}
+         value={{ mode: isDark ? ThemeModes.DARK : ThemeModes.LIGHT }}
-      </div>
+      >
+         <div class={isDark ? "dark-theme" : "light-theme"} style={style}>
+            {children}
+         </div>
+      </ThemeContext.Provider>
    );
 }

src/index.ts

@@ -1,15 +1,18 @@
 import "@hibas123/theme/out/prefix.css";
-
-import Theme, { IThemeProps, ThemeModes } from "./Theme";
-import Container from "./Container";
 import Button, { ButtonFormats, IButtonProps } from "./Button";
-import Fab from "./Fab";
 import Card from "./Card";
+import Container from "./Container";
+import Fab from "./Fab";
 import Header from "./Header";
 import IconButton from "./IconButton";
 import List from "./List";
-export { Modal, ModalActions, ModalContent, ModalTitle } from "./Modal";
 import Table from "./Table";
+import Theme, {
+   IThemeContext,
+   IThemeProps,
+   ThemeContext,
+   ThemeModes,
+} from "./Theme";
 
 export {
    IInputCheckboxProps,
@@ -21,7 +24,7 @@ export {
    InputSelect,
    TextArea,
 } from "./Input";
-
+export { Modal, ModalActions, ModalContent, ModalTitle } from "./Modal";
 export {
    Theme,
    IThemeProps,
@@ -36,4 +39,6 @@ export {
    Header,
    List,
    Table,
+   IThemeContext,
+   ThemeContext,
 };