dark-mode-react

NOTE: react dark mode based on "react": "^18.2.0" and "react-dom": "^18.2.0". The user setting persists to localStorage.

dark-mode-react:

If you would like to switch your React app on Vite or TypeScript or both of them. Install dark-mode-ts version.

Don't forget about ⭐ GitHub

import React from 'react';
import {Theme} from "dark-mode-react";
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 | - | Work with .png, .jpg, .svg extensions. | | lightIcon | - | 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-react