React-lazy-dark-theme NPM

React Lazy Dark Theme

The laziest way to enable dark theme in your page. How lazy?

No CSS
Only one component
All parameters are optional

Install

npm i react-lazy-dark-theme

Quick Start

Prerequisite: a light themed page.

Import and use the component anywhere in the page. (Should only be used once in a page.)

import DarkTheme from "react-lazy-dark-theme";
export default function App() {
    // any code
    return (
        <>
            {/* any code */}
            <DarkTheme />
            {/* any code */}
        </>
    )

With the example above, the page theme should follow the OS theme (Dark/Light).

How to use

`DarkTheme` Component

import DarkTheme from "react-lazy-dark-theme";

When it exists in the page, the whole page will follow the theme set by this component.

Parameters

dark={null} choose within these values

null: follow system
true: dark theme
false: light theme

highContrast={false} choose within these values

false: giving a grayish style to view better in the dark environment.
true: giving a high contrast style to view better on projector

`NoTheme` Component

import {NoTheme} from "react-lazy-dark-theme";

When a component is wrapped with this component, it will not follow the theme settings and remain the original look. it is suggested to use this over images and videos.

Demo

https://urfdvw.github.io/react-lazy-dark-theme/

In this demo is basically the example code of Vite + React. But the css file for all colors is removed. So the color theme is fully controlled by this library.