forked from nickdeny/darkmode.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (167 loc) · 5.69 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DarkModeJS – nickdeny</title>
<meta name="description" content="Pure Javascript, without any plugins and jQuery">
<meta property="og:type" content="website">
<meta property="og:title" content="DarkModeJS – nickdeny">
<meta property="og:url" content="https://nickdeny.com">
<meta property="og:description" content="Pure Javascript, without any plugins and jQuery">
<meta property="product:brand" content="nickdeny">
<link rel="stylesheet" type="text/css" href="styles.css">
<noscript>
<link rel="stylesheet" type="text/css" href="light.css">
</noscript>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-108356992-4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-108356992-4');
</script>
</head>
<body>
<header>
<div class="container">
<h1>
DarkModeJS
</h1>
<p class="header-description">
Pure Javascript, without any plugins and jQuery
</p>
</div>
</header>
<main>
<div class="container">
<section id="example">
<h2>Light & Simple</h2>
<p>DarkModeJS helps you to auto detect user's time or system scheme and switch to right mode.</p>
<p>
Just copy-paste this code to end of body tag:
</p>
<pre><code><script src="darkmode.js"></script>
<script>var DarkMode = new DarkMode();</script></code></pre>
<p>Or use it with options:</p>
<pre><code><script src="darkmode.js"></script>
<script>
var options = {
light: "light.css",
dark: "dark.css",
startAt: "23:00",
endAt: "06:00",
checkSystemScheme: true,
saveOnToggle: true
};
var DarkMode = new DarkMode(options);
</script></code></pre>
<h3>If you use separate theme-files...</h3>
<p>
To display light theme for non-javascript user copy-paste it to head:
</p>
<pre><code><noscript>
<link rel="stylesheet" type="text/css" href="light.css">
</noscript></code></pre>
</section>
<section id="contacts">
<h2>About & Contact</h2>
<p>
Follow and star project on GitHub repository, suggest new features and report bugs. Make Open Source great again!
</p>
<ul class="contacts-btns">
<li>
<a class="btn btn" href="https://github.com/nickdeny/darkmode-js" target="_blank">
Code on GitHub
</a>
</li>
<li>
<a class="btn" href="https://nickdeny.com/?utm_source=darkmodejs&utm_medium=contacts&utm_campaign=landing" target="_blank">
Author on Web
</a>
</li>
<li>
<a class="btn" href="mailto:[email protected]">
Contact me
</a>
</li>
</ul>
<ul class="contacts-btns">
<li>
<a class="github-button" href="https://github.com/nickdeny/darkmode-js" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star nickdeny/darkmode-js on GitHub">
Star
</a>
</li>
<li>
<a class="github-button" href="https://github.com/nickdeny" data-size="large" aria-label="Follow @nickdeny on GitHub">
Follow @nickdeny
</a>
</li>
</ul>
<p class="contacts-reddit">
<a href="https://www.reddit.com/r/javascript/comments/ezhkea/darkmodejs_move_your_website_to_the_dark_side/" target="_blank">
p.s. Thanks, Reddit! You're awesome!
</a>
</p>
</section>
</div>
</main>
<footer>
<div class="container">
<p class="col footer-copyright">
By <a href="https://nickdeny.com/?utm_source=darkmodejs&utm_medium=footer&utm_campaign=landing" target="_blank">
nickdeny
</a>
</p>
</div>
</footer>
<div class="flying">
<button id="mode-remover" class="btn hidden" title="Clear saved mode">
×
</button>
<button id="mode-toggler" class="btn">
Turn on Javascript 🌓
</button>
</div>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="dist/darkmode.min.js"></script>
<script>
// Plugin Initialization
var options = {
light: 'light.css',
dark: 'dark.css',
}
var DarkMode = new DarkMode(options)
// Remove mode from LocalStorage if button clicked
var ModeRemover = document.getElementById('mode-remover')
ModeRemover.onclick = function() {
DarkMode.clearSavedMode()
changeTogglerText()
getModeRemoverState()
}
// Detects mode on LocalStorage, if `true` – display a button
getModeRemoverState()
function getModeRemoverState() {
if(DarkMode.isModeSaved())
ModeRemover.classList.remove('hidden')
else
ModeRemover.classList.add('hidden')
}
// Function for `mode-toggler` button
var ModeToggler = document.getElementById('mode-toggler')
changeTogglerText()
ModeToggler.onclick = function() {
DarkMode.toggleMode()
changeTogglerText()
}
// Changes `mode-toggler` text on mode changing
function changeTogglerText() {
getModeRemoverState()
var currentMode = DarkMode.getMode()
ModeToggler.textContent = currentMode === 'light' ? 'To dark 🌝' : 'To light 🌚'
}
</script>
</body>
</html>