Package Exports

react-dark-light-theme
react-dark-light-theme/dist/index.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 (react-dark-light-theme) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🚀 Installation

  npm install react-dark-light-theme --save

📌 How it works

By using the context API from React in react-dark-light-theme, you'll be able to access the mode variable that can be light or dark and the changeMode function to change the current theme.

✨ Usage

import React, { useState } from 'react'
import { DarkLightModeProvider } from 'react-dark-light-theme'

const App = () => {
  const darkLightThemeStyle = { lightColor: '#fff', darkColor: '#000' }
  return (
    <DarkLightModeProvider customStyle={darkLightThemeStyle}>
      <NavBar />
    </DarkLightModeProvider>
  )
}

import React, {useState} from "react";
import { useDarkLightMode } from 'react-dark-light-theme';
import NightModeIcon from 'assets/icons/NightModeIcon';
import LightModeIcon from 'assets/icons/LightModeIcon';

const NavBar = () => {
  const { mode, changeMode } = useDarkLightMode();
  return (
    <div>
       {mode === 'dark' ? <LightModeIcon/> : <NightModeIcon />}
       <button type="button" onClick={changeMode}>
            Change Mode
       </button>
    </div>
  );
};
```