Adding Theme Context

This commit is contained in:
Fabian Stamm 2020-04-21 00:44:28 +02:00
parent 20aaa80626
commit 3833510262
4 changed files with 27 additions and 12 deletions

2
package-lock.json generated
View File

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

View File

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

View File

@ -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 (
<ThemeContext.Provider
value={{ mode: isDark ? ThemeModes.DARK : ThemeModes.LIGHT }}
>
<div class={isDark ? "dark-theme" : "light-theme"} style={style}>
{children}
</div>
</ThemeContext.Provider>
);
}

View File

@ -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,
};