Implement Dark mode on your website

#javascript #react #webdev #design

How to implement dark mode on your website?

I will use darkreader npm library which has more than 7.5K stars.

You can use Dark Reader to enable dark mode on your website.

Install the package from NPM

npm install darkreader

you can import es modules in your main file from darkreader.

import { enable, disable } from 'darkreader';

enable - Enables dark mode for current web page
disable - Disables dark mode for current web page

to enable dark mode on your website add just call enable() function in your file.

also, you can customize some filters by passing parameters in the enable method.

for example,

enable({
    brightness: 100,
    contrast: 90,
    sepia: 10,
});

It supports the following parameters which you can use it.

mode: 0 | 1
- 1 - dark mode, 0 - dimmed mode
[ brightness | grayscale | contrast | sepia ] : number
- value (0 - 100+)
- Default [ 100 | 0 | 100 | 0 ]
useFont: boolean
- Specifies if custom font should be used
- Default false
fontFamily: string
- Font family to use
textStroke: number
- Makes text look bolder (0 - 1px)
- Default 0
darkSchemeBackgroundColor: string
- Background color to use for dark mode
- Default #181a1b
darkSchemeTextColor: string
- Text color to use for dark mode
- Default #e8e6e3
lightSchemeBackgroundColor: string
- Background color to use for light mode
- Default #dcdad7
lightSchemeTextColor: string
- Text color to use for light mode
- Default #181a1b
scrollbarColor: string
- Scrollbar color
- Default auto
selectionColor: string
- Selection color
- Default auto