1.2.6 • Published 1 year ago
dark-mode-ts v1.2.6
dark-mode-ts
NOTE:
dark-mode-ts based on TypeScript, "react": "^18.2.0" and "react-dom": "^18.2.0".
Works with React, React TypeScript, React Vite, React Vite TypeScript.
The user setting persists to
localStorage
.
dark-mode-ts:
Like it, ⭐ it GitHub
import React from 'react';
import {Theme} from "dark-mode-ts";
import yourDarkImage from './path/to/your/DarkImage.png'
import yourLightImage from './path/to/your/LightImage.png'
const NameYourComponent = () => {
return (
<div>
<Theme
darkIcon={yourDarkImage}
lightIcon={yourLightImage}
altDark='dark icon'
altLight="light icon"
imgWidth='50'
imgHeight='50'
myClass="your-class_name"
/>
</div>
)
};
A React theme component accepts the following props:
Key | Type | Description |
---|---|---|
darkIcon | string | Work with .png, .jpg, .svg* extensions. |
lightIcon | string | Work with .png, .jpg, .svg* extensions. |
altDark | string | For better accessibility. |
altLight | string | For better accessibility. |
imgWidth | string | Width for your icon. |
imgHeight | string | Height for your icon. |
myClass | string | If you want to have background or add hover effect for icon wrapper. |
* - Don't forget, svg has width and height by default.
Add your global styles. Example:
:root {
--background-color: #007aff;
--color-text: white;
}
[data-theme='light'] {
--background-color: #227d2c;
--color-text: black
}
body {
background: var(--background-color);
color: var(--color-text);
}
Installation
$ npm i dark-mode-ts
1.2.6
1 year ago
1.2.5
1 year ago
1.2.4
1 year ago
1.2.3
1 year ago
1.2.2
1 year ago
1.2.1
1 year ago
1.2.0
1 year ago
1.1.5
1 year ago
1.1.4
1 year ago
1.1.3
1 year ago
1.1.2
1 year ago
1.1.1
1 year ago
1.1.0
1 year ago
1.0.8
1 year ago
1.0.7
1 year ago
1.0.6
1 year ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.3
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago