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

Resources

https://github.com/darkreader/darkreader