@@ -2,11 +2,6 @@ export const IS_BROWSER = typeof window !== 'undefined'
2
2
3
3
export default class Darkmode {
4
4
constructor ( options ) {
5
- if ( ! IS_BROWSER ) {
6
- console . warn ( 'Detected environment without a `window` object' )
7
- return
8
- }
9
-
10
5
const defaultOptions = {
11
6
top : 'unset' ,
12
7
bottom : '20px' ,
@@ -29,15 +24,15 @@ export default class Darkmode {
29
24
this . dark = false
30
25
31
26
if ( options . autoMatchOsTheme ) {
32
- window . matchMedia ( '(prefers-color-scheme: dark)' ) . addListener ( ( e ) => e . matches && this . switchThemePrefers ( ) )
33
- window . matchMedia ( '(prefers-color-scheme: light)' ) . addListener ( ( e ) => e . matches && this . switchThemePrefers ( ) )
27
+ window . matchMedia ( '(prefers-color-scheme: dark)' ) . addListener ( ( e ) => e . matches && this . _switchThemePrefers ( ) )
28
+ window . matchMedia ( '(prefers-color-scheme: light)' ) . addListener ( ( e ) => e . matches && this . _switchThemePrefers ( ) )
34
29
}
35
30
36
- const storageValue = this . getStorageValue ( )
31
+ const storageValue = this . _getStorageValue ( )
37
32
if ( storageValue !== null ) {
38
33
storageValue === 'true' || storageValue === true ? this . toDark ( ) : this . toLight ( )
39
34
} else if ( options . autoMatchOsTheme ) {
40
- this . preferedTheme ( ) ? this . toDark ( ) : this . toLight ( )
35
+ this . _preferedTheme ( ) ? this . toDark ( ) : this . toLight ( )
41
36
} else {
42
37
options . defaultTheme === 'light' ? this . toLight ( ) : this . toDark ( )
43
38
}
@@ -89,13 +84,13 @@ export default class Darkmode {
89
84
} )
90
85
91
86
document . body . insertBefore ( div , document . body . firstChild )
92
- this . addStyle ( css )
87
+ this . _addStyle ( css )
93
88
}
94
89
95
90
toLight ( ) {
96
91
if ( this . options . events ) window . dispatchEvent ( new CustomEvent ( 'theme-change' , { detail : { to : 'light' } } ) )
97
92
document . documentElement . setAttribute ( 'data-theme' , 'light' )
98
- this . setStorageValue ( false )
93
+ this . _setStorageValue ( false )
99
94
document . body . classList . remove ( 'theme-dark' )
100
95
document . body . classList . add ( 'theme-light' )
101
96
this . dark = false
@@ -104,21 +99,30 @@ export default class Darkmode {
104
99
toDark ( ) {
105
100
if ( this . options . events ) window . dispatchEvent ( new CustomEvent ( 'theme-change' , { detail : { to : 'dark' } } ) )
106
101
document . documentElement . setAttribute ( 'data-theme' , 'dark' )
107
- this . setStorageValue ( true )
102
+ this . _setStorageValue ( true )
108
103
document . body . classList . add ( 'theme-dark' )
109
104
document . body . classList . remove ( 'theme-light' )
110
105
this . dark = true
111
106
}
112
107
113
- preferedTheme ( ) {
108
+ toggle ( ) {
109
+ this . dark ? this . toLight ( ) : this . toDark ( )
110
+ return this . dark
111
+ }
112
+
113
+ isActivated ( ) {
114
+ return this . dark
115
+ }
116
+
117
+ _preferedTheme ( ) {
114
118
return window . matchMedia && window . matchMedia ( '(prefers-color-scheme: dark)' ) . matches
115
119
}
116
120
117
- switchThemePrefers ( ) {
118
- this . preferedTheme ( ) === true ? this . swichToDark ( ) : this . swichToLight ( )
121
+ _switchThemePrefers ( ) {
122
+ this . _preferedTheme ( ) === true ? this . swichToDark ( ) : this . swichToLight ( )
119
123
}
120
124
121
- getStorageValue ( ) {
125
+ _getStorageValue ( ) {
122
126
if ( this . options . localStorage && window . localStorage !== null ) {
123
127
return window . localStorage . getItem ( 'darkmode' )
124
128
} else if ( this . options . cookie ) {
@@ -129,24 +133,15 @@ export default class Darkmode {
129
133
return null
130
134
}
131
135
132
- setStorageValue ( value ) {
136
+ _setStorageValue ( value ) {
133
137
if ( this . options . localStorage && window . localStorage !== null ) {
134
138
window . localStorage . setItem ( 'darkmode' , value )
135
139
} else if ( this . options . cookie ) {
136
140
document . cookie = `darkmode=${ value } `
137
141
}
138
142
}
139
143
140
- toggle ( ) {
141
- this . dark ? this . toLight ( ) : this . toDark ( )
142
- return this . dark
143
- }
144
-
145
- isActivated ( ) {
146
- return this . dark
147
- }
148
-
149
- addStyle ( css ) {
144
+ _addStyle ( css ) {
150
145
const linkElement = document . createElement ( 'link' )
151
146
152
147
linkElement . setAttribute ( 'rel' , 'stylesheet' )
0 commit comments