Skip to content

Commit e8cfd72

Browse files
BetaHuhnBetaHuhn
committed
♻️ Add more comments, reduce complexity
1 parent df25c9d commit e8cfd72

File tree

2 files changed

+86
-22
lines changed

2 files changed

+86
-22
lines changed

‎dist/drkmd-js.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/drkmd.js

Lines changed: 85 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
export const IS_BROWSER = typeof window !== 'undefined'
22

33
export default class Darkmode {
4+
/**
5+
* Create new Darkmode instance
6+
* @constructor
7+
* @param {?object} options - object containing options
8+
*/
49
constructor(options) {
510
const defaultOptions = {
611
top: 'unset',
@@ -18,26 +23,45 @@ export default class Darkmode {
1823
defaultTheme: 'light'
1924
}
2025

26+
// Parse options based on parameters and defaults
2127
options = Object.assign({}, defaultOptions, options)
2228

29+
// Initialize values
2330
this.options = options
2431
this.dark = false
2532

33+
// Listen for prefers-color-scheme change
2634
if (options.autoMatchOsTheme) {
2735
window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => e.matches && this._switchThemePrefers())
2836
window.matchMedia('(prefers-color-scheme: light)').addListener((e) => e.matches && this._switchThemePrefers())
2937
}
3038

31-
const storageValue = this._getStorageValue()
32-
if (storageValue !== null) {
33-
storageValue === 'true' || storageValue === true ? this.toDark() : this.toLight()
34-
} else if (options.autoMatchOsTheme) {
35-
this._preferedTheme() ? this.toDark() : this.toLight()
36-
} else {
37-
options.defaultTheme === 'light' ? this.toLight() : this.toDark()
39+
// Determine to which theme should be set, start with default, precendence based on descending order
40+
let changeToDark = options.defaultTheme !== 'light'
41+
42+
// First check the system theme
43+
if (options.autoMatchOsTheme) {
44+
changeToDark = this._preferedThemeIsDark()
45+
}
46+
47+
// Then check if a cookie is set
48+
if (this.options.cookie) {
49+
const match = document.cookie.match(RegExp('(?:^|;\\s*)darkmode=([^;]*)'))
50+
changeToDark = match ? match[1] === 'true' : null
51+
}
52+
53+
// Lastly check local storage
54+
if (this.options.localStorage && window.localStorage !== null) {
55+
changeToDark = window.localStorage.getItem('darkmode') === 'true'
3856
}
57+
58+
// Change the theme to dark if true or light if false
59+
this._changeThemeToDark(changeToDark)
3960
}
4061

62+
/**
63+
* Attach the theme toggle to the page
64+
*/
4165
attach() {
4266
const css = `
4367
.drkmd-toggle-button{
@@ -71,13 +95,15 @@ export default class Darkmode {
7195

7296
const div = document.createElement('div')
7397
const span = document.createElement('span')
98+
7499
span.innerHTML = this.options.label
75100
div.className = 'drkmd-toggle-button'
76101

77102
div.setAttribute('title', 'Toggle dark mode')
78103
div.setAttribute('aria-label', 'Toggle dark mode')
79104
div.setAttribute('aria-checked', 'false')
80105
div.setAttribute('role', 'checkbox')
106+
81107
div.appendChild(span)
82108

83109
div.addEventListener('click', () => {
@@ -88,6 +114,9 @@ export default class Darkmode {
88114
this._addStyle(css)
89115
}
90116

117+
/**
118+
* Change the theme to light
119+
*/
91120
toLight() {
92121
if (this.options.events) window.dispatchEvent(new CustomEvent('theme-change', { detail: { to: 'light' } }))
93122

@@ -99,6 +128,9 @@ export default class Darkmode {
99128
this.dark = false
100129
}
101130

131+
/**
132+
* Change the theme to dark
133+
*/
102134
toDark() {
103135
if (this.options.events) window.dispatchEvent(new CustomEvent('theme-change', { detail: { to: 'dark' } }))
104136

@@ -110,39 +142,71 @@ export default class Darkmode {
110142
this.dark = true
111143
}
112144

145+
/**
146+
* Toggle between the dark and light theme based on the current one
147+
* @returns {boolean} isDark - true if theme is now dark and false if it is light
148+
*/
113149
toggle() {
114-
this.dark ? this.toLight() : this.toDark()
115-
return this.dark
150+
const val = !this.dark
151+
this._changeThemeToDark(val)
152+
return val
116153
}
117154

155+
/**
156+
* Check if the darkmode is activated
157+
* @deprecated Use isDark and isLight
158+
* @returns {boolean} isDark - true if theme is dark and false if it is light
159+
*/
118160
isActivated() {
119161
return this.dark
120162
}
121163

122-
_preferedTheme() {
164+
/**
165+
* Determine if the current theme is dark
166+
* @returns {boolean} isDark - true if theme is dark and false if it is light
167+
*/
168+
isDark() {
169+
return this.dark === true
170+
}
171+
172+
/**
173+
* Determine if the current theme is light
174+
* @returns {boolean} isLight - true if theme is light and false if it is dark
175+
*/
176+
isLight() {
177+
return this.dark === false
178+
}
179+
180+
/**
181+
* Return the current theme as a string
182+
* @returns {string} theme - either dark or light
183+
*/
184+
currentTheme() {
185+
return this.dark ? 'dark' : 'light'
186+
}
187+
188+
_preferedThemeIsDark() {
123189
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
124190
}
125191

126192
_switchThemePrefers() {
127-
this._preferedTheme() === true ? this.toDark() : this.toLight()
193+
const val = this._preferedThemeIsDark()
194+
this._changeThemeToDark(val)
128195
}
129196

130-
_getStorageValue() {
131-
if (this.options.localStorage && window.localStorage !== null) {
132-
return window.localStorage.getItem('darkmode')
133-
} else if (this.options.cookie) {
134-
const match = document.cookie.match(RegExp('(?:^|;\\s*)darkmode=([^;]*)'))
135-
return match ? match[1] : null
136-
}
137-
138-
return null
197+
_changeThemeToDark(toDark) {
198+
toDark ? this.toDark() : this.toLight()
139199
}
140200

141201
_setStorageValue(value) {
142202
if (this.options.localStorage && window.localStorage !== null) {
143203
window.localStorage.setItem('darkmode', value)
144-
} else if (this.options.cookie) {
204+
return
205+
}
206+
207+
if (this.options.cookie) {
145208
document.cookie = `darkmode=${ value }`
209+
return
146210
}
147211
}
148212

0 commit comments

Comments
 (0)