dark-mode-react

0.2.6 • Public • Published

dark-mode-react

Npm package version Npm package total downloads Npm package daily downloads Npm package daily downloads Npm package license

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

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

Package Sidebar

Install

npm i dark-mode-react

Weekly Downloads

6

Version

0.2.6

License

MIT

Unpacked Size

10.8 kB

Total Files

6

Last publish

Collaborators

  • craziestbee