adding ReadMe.md

.husky/install.mjs

@@ -0,0 +1,6 @@
+// Skip Husky install in production and CI
+if (process.env.NODE_ENV === 'production' || process.env.CI === 'true') {
+  process.exit(0)
+}
+const husky = (await import('husky')).default
+console.log(husky())

.husky/pre-commit

@@ -0,0 +1,2 @@
+npm run playground:build
+npm run build

README.md

@@ -1,6 +1,7 @@
 # React Component Package
 
-This package includes React components which can be used to add "light" and "dark" theme to your web application. CSS used in website example project is built with Tailwind seperately. 
+This package includes React components which can be used to add "light" and "dark" theme to your web application. CSS
+used in website example project is built with Tailwind seperately.
 
 ### Website
 
@@ -14,15 +15,70 @@ npm install @jaiminmoslake7020/react-dark-light-theme-switcher
 
 ## How to use it
 
-```code
+Use it with the provider, which will apply either [theme="dark"] or [theme="light"] to the applyTo selector. In the
+example below, a button will appear, allowing the user to change the theme, which will be applied to the body.
+preferColorScheme when true retrieves the color scheme from the system. And false then saves it to localStorage.
 
+```jsx
+<ThemeSwitchProvider applyTo={"body"} preferColorScheme={false}>
+  ...
+  <ThemeSwitcherBtnProviderChild/>
+</ThemeSwitchProvider>
 ```
 
-```code
+or just use button and apply it by yourself.
 
+```jsx
+<ThemeSwitcherBtn theme={theme}
+                  setTheme={setTheme}
+                  themeSwitcherContainerClassName={themeSwitcherContainerClassName}
+                  iconWrapperClassName={iconWrapperClassName}
+                  sunIconWrapperClassName={sunIconWrapperClassName}
+                  moonIconWrapperClassName={moonIconWrapperClassName}/>
+```
+
+or hook with **ThemeSwitcherBtn** component,
+
+```typescript
+const applyTo = 'body';
+const preferColorScheme = true; // boolean
+const {theme, setTheme} = useThemeSwitch(applyTo, preferColorScheme);
 ```
 
 ## Component Properties
 
+### ThemeSwitcherBtn
+
+| Properties                       | Type               | Values              | Default |
+|----------------------------------|--------------------|---------------------|---------|
+| theme                            | 'light'  \| 'dark' | 'light', 'dark'     | 'light' |                                                 
+| setTheme                         | Function           |                     |         |
+| themeSwitcherContainerClassName? | string             | "any-styling-class" |         |
+| iconWrapperClassName?            | string             | "any-styling-class" |         |
+| sunIconWrapperClassName?         | string             | "any-styling-class" |         |
+| moonIconWrapperClassName?        | string             | "any-styling-class" |         |
+
+### ThemeSwitcherBtnProviderChild
+
+| Properties                       | Type   | Values              | Default |
+|----------------------------------|--------|---------------------|---------|
+| themeSwitcherContainerClassName? | string | "any-styling-class" |         |
+| iconWrapperClassName?            | string | "any-styling-class" |         |
+| sunIconWrapperClassName?         | string | "any-styling-class" |         |
+| moonIconWrapperClassName?        | string | "any-styling-class" |         |
+
+```typescript
+export type ElWithClassType = `.${string}`;
+export type ElWithIdType = `#${string}`;
+export type ApplyToType = 'html' | 'body' | keyof HTMLElementTagNameMap | ElWithClassType | ElWithIdType;
+```
+
+### ThemeSwitchProvider
 
+| Properties         | Type            | Values                                         | Default   |
+|--------------------|-----------------|------------------------------------------------|-----------|
+| applyTo            | ApplyToType     | 'html' \| 'body' \| "any-class-or-id-selector" | 'body'    |
+| preferColorScheme? | boolean         | true, false                                    | undefined |
+| children           | React.ReactNode |                                                |           |
 
+When preferColorScheme is undefined, it uses browser's "localStorage" API.

dist/main.d.ts

@@ -4,7 +4,7 @@ import React from 'react';
 type ThemeType = "light" | "dark";
 type ElWithClassType = `.${string}`;
 type ElWithIdType = `#${string}`;
-type ApplyToType = 'html' | 'body' | keyof HTMLElementTagNameMap | ElWithClassType | ElWithIdType | undefined;
+type ApplyToType = 'html' | 'body' | keyof HTMLElementTagNameMap | ElWithClassType | ElWithIdType;
 
 type ThemeSwitcherBtnPropTypes = {
     theme: "light" | "dark";
@@ -27,7 +27,7 @@ type UseThemeSwitchType = {
     theme: ThemeType;
     setTheme: (x: ThemeType, fromLocalStorage?: boolean) => void;
 };
-declare const useThemeSwitch: (applyTo?: ApplyToType, preferColorScheme?: boolean) => UseThemeSwitchType;
+declare const useThemeSwitch: (applyTo: ApplyToType, preferColorScheme?: boolean) => UseThemeSwitchType;
 
 interface ThemeSwitchContextType {
     theme: ThemeType;
@@ -36,7 +36,7 @@ interface ThemeSwitchContextType {
 declare const ThemeSwitchContext: React.Context<ThemeSwitchContextType>;
 type ThemeSwitchProviderProps = {
     children: React.ReactNode;
-    applyTo?: 'html' | 'body';
+    applyTo: ApplyToType;
     preferColorScheme?: boolean;
 };
 declare const ThemeSwitchProvider: ({ children, applyTo, preferColorScheme }: ThemeSwitchProviderProps) => react_jsx_runtime.JSX.Element;

dist/types/hooks/useThemeSwitch.d.ts

@@ -3,4 +3,4 @@ export type UseThemeSwitchType = {
     theme: ThemeType;
     setTheme: (x: ThemeType, fromLocalStorage?: boolean) => void;
 };
-export declare const useThemeSwitch: (applyTo?: ApplyToType, preferColorScheme?: boolean) => UseThemeSwitchType;
+export declare const useThemeSwitch: (applyTo: ApplyToType, preferColorScheme?: boolean) => UseThemeSwitchType;

dist/types/providers/ThemeSwitchProvider.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-import { ThemeType } from '../types';
+import { ApplyToType, ThemeType } from '../types';
 export interface ThemeSwitchContextType {
     theme: ThemeType;
     setTheme: (x: ThemeType, fromLocalStorage?: boolean) => void;
 }
 export declare const ThemeSwitchContext: React.Context<ThemeSwitchContextType>;
 export type ThemeSwitchProviderProps = {
     children: React.ReactNode;
-    applyTo?: 'html' | 'body';
+    applyTo: ApplyToType;
     preferColorScheme?: boolean;
 };
 export declare const ThemeSwitchProvider: ({ children, applyTo, preferColorScheme }: ThemeSwitchProviderProps) => import("react/jsx-runtime").JSX.Element;

dist/types/types/index.d.ts

@@ -1,4 +1,4 @@
 export type ThemeType = "light" | "dark";
 export type ElWithClassType = `.${string}`;
 export type ElWithIdType = `#${string}`;
-export type ApplyToType = 'html' | 'body' | keyof HTMLElementTagNameMap | ElWithClassType | ElWithIdType | undefined;
+export type ApplyToType = 'html' | 'body' | keyof HTMLElementTagNameMap | ElWithClassType | ElWithIdType;

lib/hooks/useThemeSwitch.ts

@@ -6,7 +6,7 @@ export type UseThemeSwitchType = {
     setTheme: (x: ThemeType, fromLocalStorage?: boolean) => void
 };
 
-export const useThemeSwitch = (applyTo : ApplyToType = undefined, preferColorScheme: boolean = true ) : UseThemeSwitchType => {
+export const useThemeSwitch = (applyTo : ApplyToType, preferColorScheme: boolean = true ) : UseThemeSwitchType => {
 
     const [theme, setThemeCall] = useState<ThemeType>('light');
 

lib/providers/ThemeSwitchProvider.tsx

@@ -1,6 +1,6 @@
 import React, { createContext } from 'react';
 import {useThemeSwitch} from '../hooks';
-import {ThemeType} from '../types';
+import {ApplyToType, ThemeType} from '../types';
 
 export interface ThemeSwitchContextType {
     theme: ThemeType;
@@ -15,7 +15,7 @@ export const ThemeSwitchContext: React.Context<ThemeSwitchContextType> = createC
 
 export type ThemeSwitchProviderProps = {
     children: React.ReactNode,
-    applyTo?: 'html' | 'body',
+    applyTo: ApplyToType,
     preferColorScheme?: boolean
 };
 

lib/types/index.ts

@@ -1,4 +1,4 @@
 export type ThemeType = "light" | "dark";
 export type ElWithClassType = `.${string}`;
 export type ElWithIdType = `#${string}`;
-export type ApplyToType = 'html' | 'body' | keyof HTMLElementTagNameMap | ElWithClassType | ElWithIdType | undefined;
+export type ApplyToType = 'html' | 'body' | keyof HTMLElementTagNameMap | ElWithClassType | ElWithIdType;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jaiminmoslake7020/react-dark-light-theme-switcher",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "This library provides Provider, Context and Button components to be used in a react application to support dark and light mode.",
   "type": "module",
   "files": [
@@ -19,10 +19,14 @@
     "build": "rimraf dist && rollup -c",
     "dev": "rollup -c -w",
     "playground": "vite",
-    "playground:build": "vite build",
     "serve:build": "serve -s out",
     "watch:css": "sass playground/styles/index.scss playground/styles/style.css --watch",
-    "watch:tailwindcss": "npx tailwindcss -i ./playground/styles/style.css -o ./playground/styles/output.css --watch"
+    "watch:tailwindcss": "npx tailwindcss -i ./playground/styles/style.css -o ./playground/styles/output.css --watch",
+    "build:css": "sass playground/styles/index.scss playground/styles/style.css",
+    "build:tailwindcss": "npx tailwindcss -i ./playground/styles/style.css -o ./playground/styles/output.css",
+    "build:style": "npm run build:css && npm run build:tailwindcss",
+    "playground:build": "npm run build:style && vite build",
+    "prepare": "node .husky/install.mjs"
   },
   "keywords": [
     "react",
@@ -67,7 +71,8 @@
     "typescript": "^5.6.3",
     "vite": "^5.4.8",
     "@jaiminmoslake7020/react-typing-text": "^0.0.10",
-    "@types/node": "^22.7.7"
+    "@types/node": "^22.7.7",
+    "husky": "^9.1.4"
   },
   "author": {
     "name": "Jaimin Pandya",