Skip to content

Commit f288d23

Browse files
BetaHuhnBetaHuhn
committed
📝 Update docs
1 parent 34d9349 commit f288d23

File tree

8 files changed

+313
-12
lines changed

8 files changed

+313
-12
lines changed

‎README.md

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Simple dark-mode/light-mode logic for any website
2828

2929
[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.
3030

31-
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](https://github.com/BetaHuhn/drkmd.js#usage) below how you can customize your page with this.
31+
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.
3232

3333
## 🚀 Get started
3434

@@ -51,9 +51,9 @@ npm install drkmd-js
5151
Then add the following JavaScript code:
5252

5353
```javascript
54-
import Darkmode from 'drkmd-js';
54+
import Darkmode from 'drkmd-js'
5555

56-
new Darkmode().attach();
56+
new Darkmode().attach()
5757
```
5858

5959
Both methods will add the [darkmode toggle](#default-theme-toggle) with all the default [options](#%EF%B8%8F-options) to your page.
@@ -123,8 +123,8 @@ You can also use `data-drkmd-to-light` and `data-drkmd-to-dark` to switch to a s
123123
To enable/disable Darkmode you can use the method `toggle()`:
124124

125125
```javascript
126-
const darkmode = new Darkmode();
127-
darkmode.toggle();
126+
const darkmode = new Darkmode()
127+
darkmode.toggle()
128128
```
129129

130130
There are also other methods available:
@@ -144,18 +144,18 @@ darkmode.isLight() // Returns true if the current theme is light
144144
By default [drkmd.js](https://github.com/BetaHuhn/drkmd.js) emits a `theme-change` event everytime the theme changes:
145145

146146
```js
147-
import Darkmode from 'drkmd-js';
147+
import Darkmode from 'drkmd-js'
148148

149-
new Darkmode();
149+
new Darkmode()
150150

151151
window.addEventListener('theme-change', e => {
152-
console.log(e.detail.to); // will return 'light' or 'dark'
153-
});
152+
console.log(e.detail.to) // will return 'light' or 'dark'
153+
})
154154
```
155155

156156
This can be turned off by setting the option `events: false`.
157157

158-
The `theme-change` event could be used to change the `src` attribute of an `<img>` tag depending on the theme ([more info](https://github.com/BetaHuhn/drkmd.js/discussions/11#discussioncomment-247341)) or modify the page in any other way with JavaScript when the theme changes.
158+
The `theme-change` event could be used to change the `src` attribute of an `<img>` tag depending on the theme (example [below](#different-images-depending-on-the-theme)) or modify the page in any other way with JavaScript when the theme changes.
159159

160160
## ⚙️ Options
161161

@@ -267,7 +267,7 @@ Render the darkmode toggle with custom options:
267267

268268
**HTML**
269269
```html
270-
<script src="https://cdn.jsdelivr.net/npm/drkmd-js/dist/drkmd-js.min.js" data-drkmd-options='{ "right": "unset", "left": "32px", "defaultTheme": "dark" }'></script>
270+
<script src="https://cdn.jsdelivr.net/npm/drkmd-js/dist/drkmd-js.min.js" data-drkmd-opts='{ "right": "unset", "left": "32px", "defaultTheme": "dark" }'></script>
271271
```
272272

273273
or
@@ -313,11 +313,15 @@ Then on your custom element add the attribute `data-drkmd-toggle`:
313313
<span data-drkmd-toggle>Change theme</span>
314314
```
315315

316+
When you click that element, the theme will be toggled automatically.
317+
318+
There's also `data-drkmd-to-light` and `data-drkmd-to-dark` which will change the theme to either dark or light specifically.
319+
316320
---
317321

318322
### Different images depending on the theme
319323

320-
You can use the `theme-change` event to modify an element with JavaScript. Here we are changing the `src` attribute of an `img` tag when the theme changes:
324+
You can use the `theme-change` [event](#events) to modify an element with JavaScript. Here we are changing the `src` attribute of an `img` tag when the theme changes:
321325

322326
**HTML**
323327
```html

‎examples/basic/index.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Darkmode example</title>
8+
<style>
9+
/* Styles for light theme */
10+
.theme-light {
11+
background: #fff;
12+
color: #000;
13+
}
14+
15+
/* Styles for dark theme */
16+
.theme-dark {
17+
background: #000;
18+
color: #fff;
19+
}
20+
</style>
21+
</head>
22+
23+
<body>
24+
<h1>Darkmode example</h1>
25+
</body>
26+
27+
<script src="https://cdn.jsdelivr.net/npm/drkmd-js/dist/drkmd-js.min.js" data-drkmd-attach ></script>
28+
29+
<!-- or -->
30+
31+
<!--
32+
<script>
33+
import Darkmode from 'drkmd-js'
34+
new Darkmode().attach()
35+
</script>
36+
-->
37+
</html>

‎examples/css-variables/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Darkmode example</title>
8+
<style>
9+
/* Light Colors*/
10+
.theme-light {
11+
--background: #fff;
12+
--color: #000;
13+
}
14+
15+
/* Dark Colors */
16+
.theme-dark {
17+
--background: #000;
18+
--color: #fff;
19+
}
20+
21+
html,
22+
body {
23+
background: var(--background);
24+
color: var(--color);
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<h1>Darkmode example</h1>
31+
</body>
32+
33+
<script src="https://cdn.jsdelivr.net/npm/drkmd-js/dist/drkmd-js.min.js" data-drkmd-attach ></script>
34+
35+
<!-- or -->
36+
37+
<!--
38+
<script>
39+
import Darkmode from 'drkmd-js'
40+
new Darkmode().attach()
41+
</script>
42+
-->
43+
</html>

‎examples/custom-toggle/index.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Darkmode example</title>
8+
<style>
9+
/* Light Colors*/
10+
.theme-light {
11+
--background: #fff;
12+
--color: #000;
13+
}
14+
15+
/* Dark Colors */
16+
.theme-dark {
17+
--background: #000;
18+
--color: #fff;
19+
}
20+
21+
html,
22+
body {
23+
background: var(--background);
24+
color: var(--color);
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<h1>Darkmode example</h1>
31+
<span data-drkmd-toggle>Switch theme</span>
32+
33+
<span data-drkmd-to-light>Light theme</span>
34+
<span data-drkmd-to-dark>Dark theme</span>
35+
</body>
36+
37+
<script src="https://cdn.jsdelivr.net/npm/drkmd-js/dist/drkmd-js.min.js" ></script>
38+
39+
<!-- or -->
40+
41+
<!--
42+
<script>
43+
import Darkmode from 'drkmd-js'
44+
</script>
45+
-->
46+
</html>

‎examples/events/index.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Darkmode example</title>
8+
<style>
9+
/* Light Colors*/
10+
.theme-light {
11+
--background: #fff;
12+
--color: #000;
13+
}
14+
15+
/* Dark Colors */
16+
.theme-dark {
17+
--background: #000;
18+
--color: #fff;
19+
}
20+
21+
html,
22+
body {
23+
background: var(--background);
24+
color: var(--color);
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<h1>Darkmode example</h1>
31+
</body>
32+
33+
<script src="https://cdn.jsdelivr.net/npm/drkmd-js/dist/drkmd-js.min.js" data-drkmd-attach ></script>
34+
35+
<!-- or -->
36+
37+
<!--
38+
<script>
39+
import Darkmode from 'drkmd-js'
40+
new Darkmode().attach()
41+
</script>
42+
-->
43+
44+
<script>
45+
const imageSrc = {
46+
dark: "/path/to/dark.png",
47+
light: "/path/to/light.png"
48+
}
49+
50+
window.addEventListener('theme-change', e => {
51+
const theme = e.detail.to // will return 'light' or 'dark'
52+
document.getElementById('image').src = imageSrc[theme]
53+
})
54+
</script>
55+
56+
</html>

‎examples/options/index.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Darkmode example</title>
8+
<style>
9+
/* Light Colors*/
10+
.theme-light {
11+
--background: #fff;
12+
--color: #000;
13+
}
14+
15+
/* Dark Colors */
16+
.theme-dark {
17+
--background: #000;
18+
--color: #fff;
19+
}
20+
21+
html,
22+
body {
23+
background: var(--background);
24+
color: var(--color);
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<h1>Darkmode example</h1>
31+
</body>
32+
33+
<script src="https://cdn.jsdelivr.net/npm/drkmd-js/dist/drkmd-js.min.js" data-drkmd-opts='{ "cookie": true, "defaultTheme": "dark", "attach": true }' ></script>
34+
35+
<!-- or -->
36+
37+
<!--
38+
<script>
39+
import Darkmode from 'drkmd-js'
40+
41+
const options = {
42+
cookie: true,
43+
defaultTheme: 'dark',
44+
attach: true
45+
}
46+
47+
const darkmode = new Darkmode(options)
48+
</script>
49+
-->
50+
</html>

‎examples/programmatic/index.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Darkmode example</title>
8+
<style>
9+
/* Light Colors*/
10+
.theme-light {
11+
--background: #fff;
12+
--color: #000;
13+
}
14+
15+
/* Dark Colors */
16+
.theme-dark {
17+
--background: #000;
18+
--color: #fff;
19+
}
20+
21+
html,
22+
body {
23+
background: var(--background);
24+
color: var(--color);
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<h1>Darkmode example</h1>
31+
<button id="myBtn">Click me</button>
32+
<span id="theme"></span>
33+
</body>
34+
35+
<script src="https://cdn.jsdelivr.net/npm/drkmd-js/dist/drkmd-js.min.js" ></script>
36+
37+
<!-- or -->
38+
39+
<!--
40+
<script>
41+
import Darkmode from 'drkmd-js'
42+
</script>
43+
-->
44+
45+
<script>
46+
const darkmode = new Darkmode()
47+
48+
const updateValue = () => {
49+
document.getElementById('theme').value = `Current theme: ${ darkmode.currentTheme() }`
50+
}
51+
52+
document.getElementById('myBtn').addEventListener('click', () => {
53+
if (darkmode.isDark()) {
54+
// Do something
55+
}
56+
57+
darkmode.toggle()
58+
59+
updateValue()
60+
})
61+
62+
updateValue()
63+
</script>
64+
65+
</html>

‎example/index.html renamed to ‎test.html

File renamed without changes.

0 commit comments

Comments
 (0)