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:

• a minimal lightweight component for your React projects
• quickly setup
• has a small bundle size and zero dependencies
• you have total control with styles - css, scss, sass, tailwind ui.

Like it, ⭐ it GitHub

1import React from 'react';
2import {Theme} from "dark-mode-ts";
3import yourDarkImage from './path/to/your/DarkImage.png'
4import yourLightImage from './path/to/your/LightImage.png'
5
6const NameYourComponent = () => {
7  return (
8    <div>
9      <Theme
10        darkIcon={yourDarkImage}
11        lightIcon={yourLightImage}
12        altDark='dark icon'
13        altLight="light icon"
14        imgWidth='50'
15        imgHeight='50'
16        myClass="your-class_name"
17      />
18    </div>
19  )
20};

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:

1:root {
2  --background-color: #007aff;
3  --color-text: white;
4}
5
6[data-theme='light'] {
7  --background-color: #227d2c;
8  --color-text: black
9}
10
11body {
12  background: var(--background-color);
13  color: var(--color-text);
14}

Installation

1$ npm i dark-mode-ts