https://github.com/artempchela/dark-mode-react

React dark-mode base on Reac.js. No TypeScript, no Vite.
https://github.com/artempchela/dark-mode-react

dark-mode dark-mode-react dark-theme notypescript novite react reactjs

Last synced: about 2 months ago
JSON representation

React dark-mode base on Reac.js. No TypeScript, no Vite.

• Host: GitHub
• URL: https://github.com/artempchela/dark-mode-react
• Owner: ArtemPchela
• License: mit
• Created: 2022-10-08T14:24:17.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-28T12:59:11.000Z (about 2 years ago)
• Last Synced: 2024-08-09T06:53:32.452Z (6 months ago)
• Topics: dark-mode, dark-mode-react, dark-theme, notypescript, novite, react, reactjs
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/dark-mode-react
• Size: 748 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# dark-mode-react

[![Npm package version](https://badgen.net/npm/v/dark-mode-react)](https://npmjs.com/package/dark-mode-react)

[![Npm package total downloads](https://badgen.net/npm/dt/dark-mode-react)](https://npmjs.com/package/dark-mode-react)

[![Npm package daily downloads](https://badgen.net/npm/dw/dark-mode-react)](https://npmjs.com/package/dark-mode-react)

[![Npm package daily downloads](https://badgen.net/npm/dd/dark-mode-react)](https://npmjs.com/package/dark-mode-react)

[![Npm package license](https://badgen.net/npm/license/lodash)](https://npmjs.com/package/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



### If you would like to switch your React app on [Vite](https://vitejs.dev/) or [TypeScript](https://www.typescriptlang.org/docs/handbook/react.html) or both of them. Install [dark-mode-ts](https://www.npmjs.com/package/dark-mode-ts) version. 

Don't forget about ⭐ [GitHub](https://github.com/ArtemPchela/dark-mode-react)

```jsx

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 (

    


      

    

  )

};

```


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:

```css

: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

```sh

$ npm i dark-mode-react

```