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.

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"
        size='5rem'
      />
    </div>
  )
};

Add your global styles. Example:

:root {
  --background-color: #007aff;
  --color-text: white;
}

[data-theme='light'] {
  --background: #227d2c;
  --color-text: black
}

body {
  background: var(--background-color);
  color: var(--color-text);
}

Installation

$ npm i dark-mode-react

A darkMode object is returned with the following properties.

Key	Description
`darkIcon`	Image with .png .jpg. jpeg extensions.
`lightIcon`	Image with .png .jpg. jpeg extensions.
`altDark`	Type string, required.
`altLight`	Type string, required.
`size`	Type string. Size for your icon.