diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 11023c2..c59298c 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -6,15 +6,15 @@ jobs:
steps:
- name: Begin CI...
- uses: actions/checkout@v2
+ uses: actions/checkout@v4
- - name: Use Node 12
- uses: actions/setup-node@v1
+ - name: Use Node 20
+ uses: actions/setup-node@v4
with:
- node-version: 12.x
+ node-version: 20
- name: Use cached node_modules
- uses: actions/cache@v1
+ uses: actions/cache@v4
with:
path: node_modules
key: nodeModules-${{ hashFiles('**/yarn.lock') }}
diff --git a/.gitignore b/.gitignore
index d4de8fc..1fcb20c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,5 @@
*.log
.DS_Store
node_modules
-.cache
+.parcel-cache
dist
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..2edeafb
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+20
\ No newline at end of file
diff --git a/README.md b/README.md
index 4e59326..86b2e38 100644
--- a/README.md
+++ b/README.md
@@ -17,11 +17,15 @@
> 🌃 Animated dark mode toggle as seen in blogs!
+
+

+
+
## Prerequisites
-- node >=10
+- node >=20
## Installation
@@ -37,65 +41,148 @@ yarn add react-toggle-dark-mode
## Usage
+### 3-state (System, Light, Dark)
+
+```jsx
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { DarkModeSwitch, ThemeMode } from 'react-toggle-dark-mode';
+
+const App = () => {
+ const [themeMode, setThemeMode] = React.useState(ThemeMode.System);
+
+ const cycleThemeMode = (themeMode: ThemeMode) => {
+ setThemeMode(themeMode);
+ };
+
+ return (
+
+ );
+};
+```
+
+### 2-state (Light, Dark)
+
```jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
-import { DarkModeSwitch } from 'react-toggle-dark-mode';
+import { DarkModeSwitch, ThemeMode } from 'react-toggle-dark-mode';
const App = () => {
- const [isDarkMode, setDarkMode] = React.useState(false);
+ const [themeMode, setThemeMode] = React.useState(ThemeMode.Light);
- const toggleDarkMode = (checked: boolean) => {
- setDarkMode(checked);
+ const toggleThemeMode = (themeMode: ThemeMode) => {
+ toggleThemeMode(themeMode);
};
return (
);
};
```
+### Trigger click programmatically
+
+```jsx
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { DarkModeSwitch, DarkModeSwitchHandle, ThemeMode } from 'react-toggle-dark-mode';
+
+const App = () => {
+ const [themeMode, setThemeMode] = React.useState(ThemeMode.Light);
+ const darkModeSwitchRef = React.useRef(null);
+
+ const toggleThemeMode = (themeMode: ThemeMode) => {
+ toggleThemeMode(themeMode);
+ };
+
+ const triggerClick = () => {
+ if (darkModeSwitchRef.current) {
+ darkModeSwitchRef.current.click();
+ }
+ };
+
+ return (
+
+
+
+
+ );
+};
+```
+
## API
### DarkModeSwitch
#### Props
-| Name | Type | Default Value | Description |
-| ------------------- | ---------------------------- | ------------------------------- | ----------------------------------------- |
-| onChange | \(checked: boolean\) => void | | Event that triggers when icon is clicked. |
-| checked | boolean | false | Current icon state. |
-| style | Object | | CSS properties object. |
-| size | number | 24 | SVG size. |
-| animationProperties | Object | defaultProperties \(see below\) | Override default animation properties. |
-| moonColor | string | white | Color of the moon. |
-| sunColor | string | black | Color of the sun. |
+| Name | Type | Default Value | Description |
+| ------------------------- | -------------------------------- | -------------------------------------------------------- | --------------------------------------------- |
+| onChange | \(themeMode: ThemeMode\) => void | | Event that triggers when icon is clicked. |
+| isSystemThemeModeEnabled | boolean | true | If the system theme mode is enabled. |
+| themeMode | ThemeMode | ThemeMode.System (or ThemeMode.Light if System disabled) | Current theme mode. |
+| style | Object | | Custom SVG styling \(CSS properties object\). |
+| size | number | 24 | SVG size. |
+| colors | Partial
| defaultColors \(see below\) | Override default colors. |
+| animationProperties | AnimationProperties | defaultProperties \(see below\) | Override default animation properties. |
+
+### Default Colors
+```javascript
+const defaultColors: ColorOptions = {
+ halfSunLeftFill: '#ffca00',
+ halfSunLeftStroke: '#ffca00',
+ halfSunLeftBeamStroke: '#ffe873',
+ halfMoonRightFill: '#44415d',
+ halfMoonRightStroke: '#44415d',
+ halfMoonRightBeamStroke: '#c0b9c7',
+ sunFill: '#ffd700',
+ sunStroke: '#444444',
+ sunBeamStroke: '#444444',
+ moonFill: '#f5f5f5',
+ moonStroke: '#bbbbbb',
+};
+```
### Default Animation Properties
```javascript
-const defaultProperties = {
- dark: {
+const defaultProperties: AnimationProperties = {
+ [ThemeMode.System]: {
+ svg: {
+ transform: 'rotate(0deg)',
+ },
circle: {
- r: 9,
+ r: 5,
},
mask: {
- cx: '50%',
- cy: '23%',
- },
- svg: {
- transform: 'rotate(40deg)',
+ cx: '100%',
+ cy: '0%',
},
lines: {
- opacity: 0,
+ opacity: 1,
},
},
- light: {
+ [ThemeMode.Light]: {
+ svg: {
+ transform: 'rotate(90deg)',
+ },
circle: {
r: 5,
},
@@ -103,14 +190,26 @@ const defaultProperties = {
cx: '100%',
cy: '0%',
},
+ lines: {
+ opacity: 1,
+ },
+ },
+ [ThemeMode.Dark]: {
svg: {
- transform: 'rotate(90deg)',
+ transform: 'rotate(40deg)',
+ },
+ circle: {
+ r: 9,
+ },
+ mask: {
+ cx: '50%',
+ cy: '23%',
},
lines: {
- opacity: 1,
+ opacity: 0,
},
},
- springConfig: { mass: 4, tension: 250, friction: 35 },
+ springConfig: { mass: 4, tension: 250, friction: 35, clamp: true },
};
```
diff --git a/docs/demo.gif b/docs/demo.gif
index 614ebe2..d30272e 100644
Binary files a/docs/demo.gif and b/docs/demo.gif differ
diff --git a/example/index.html b/example/index.html
index 7f8d0c4..72a8e81 100644
--- a/example/index.html
+++ b/example/index.html
@@ -9,6 +9,6 @@
-
+