Package Exports

dark-mode-react
dark-mode-react/dist/index.cjs.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dark-mode-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

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.
Doesn't support Vite and TS

dark-mode-react you have total control with styles - css, scss, sass, tailwind ui.

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