# drkmd.js
[](https://github.com/BetaHuhn/drkmd.js/actions?query=workflow%3ABuild) [](https://github.com/BetaHuhn/drkmd.js/blob/master/LICENSE) [](https://www.npmjs.com/package/drkmd-js) [](https://github.com/BetaHuhn/drkmd.js)
Simple dark-mode/light-mode logic for any website
[](https://nodei.co/npm/drkmd-js/)
[🔮 Live Demo](https://codepen.io/BetaHuhn/pen/oNxdBzK)
## ⚡ Features
- Easy to integrate with any site (via [script tag](#script-tag) or [NPM](#npm))
- Specify different styles for the dark and light mode with [CSS classes](#styling)
- Automatically detects system theme (and theme changes)
- Trigger a them change with the [default theme toggle](#default-theme-toggle), a [custom element](#custom-buttons) or even [programmatically](#programmatic)
- Stores users choice in local storage or [optionally](#%EF%B8%8F-options) as a cookie
- Emits a `theme-change` [event](#events) for advanced use cases like [changing images](#different-images-depending-on-the-theme)
## 👋 Introduction
[drkmd.js](https://github.com/BetaHuhn/drkmd.js) (short for darkmode.js) lets you add a dark-mode/light-mode toggle to any website. The library detects the system theme automatically and even saves the users choice in local storage or as a cookie.
The library will add the class `theme-dark`/`theme-light` to the body of the page and set the attribute `data-theme` to `dark`/`light` on the html tag which can be used to specify different css styles depending on the theme. You can also listen to a `theme-change` event for more advanced use cases. See [usage](#-usage) below how you can customize your page with this.
## 🚀 Get started
### Script tag
Add this to your HTML page:
```html
```
### NPM
Install [drkmd.js](https://github.com/BetaHuhn/drkmd.js) using NPM
```sh
npm install drkmd-js
```
Then add the following JavaScript code:
```javascript
import Darkmode from 'drkmd-js'
new Darkmode().attach()
```
Both methods will add the [darkmode toggle](#default-theme-toggle) with all the default [options](#%EF%B8%8F-options) to your page.
The last step is to specify the [styling](#styling) for each theme and then you're done 🎉
Enjoy the dark side 🖤
## 📚 Usage
### Styling
There are multiple ways to specify the different styles for the dark and light mode when using [drkmd.js](https://github.com/BetaHuhn/drkmd.js).
[drkmd.js](https://github.com/BetaHuhn/drkmd.js) adds the class `theme-dark`/`theme-light` to the body element of your page, which can be used to specify different styles for each theme:
```css
/* Styles for light theme */
.theme-light {
background: #fff;
}
/* Styles for dark theme */
.theme-dark {
background: #000;
}
```
In most cases it is easier to specify [css-variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for different themes (See [below](#css-variables) for an example).
[drkmd.js](https://github.com/BetaHuhn/drkmd.js) also adds the attribute `data-theme` with either `light` or `dark` as the value to the html tag. With this the different themes can also be specified with the css selector `[data-theme="dark"]` and `[data-theme="dark"]`.
### Default theme toggle
The easiest way to change the theme is to use the included theme toggle by either adding the `data-drkmd-attach` attribute to the script tag (or any other element):
```html
```
or by calling `.attach()`:
```javascript
new Darkmode().attach()
```
If you use any of the [options](#%EF%B8%8F-options) you can also set `attach: true` to achieve the same as the two methods above.
By default the button will be added to the bottom right corner of the page and the users choice will be saved in local storage. This can be configured using the [options](#%EF%B8%8F-options).
### Custom buttons
You can add the attribute `data-drkmd-toggle` to any element to transform it into a theme toggle:
```html
```
**JavaScript**
```js
new Darkmode().attach() // or use the data-drkmd-attach attribute
const imageSrc = {
dark: "/path/to/dark.png",
light: "/path/to/light.png"
}
window.addEventListener('theme-change', e => {
const theme = e.detail.to // will return 'light' or 'dark'
document.getElementById('image').src = imageSrc[theme]
})
```
---
### Programmatic usage
[View example file](https://github.com/BetaHuhn/drkmd.js/blob/master/examples/programmatic/index.html)
You can also control the theme programmatically.
Import [drkmd.js](https://github.com/BetaHuhn/drkmd.js) like this:
**HTML**
```html
```
> Note: `data-drkmd-attach` is missing because we don't want to attach the default toggle to the page
or
**JavaScript**
```js
import Darkmode from 'drkmd-js'
```
Add HTML elements:
```html