-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo.html
83 lines (83 loc) · 3.84 KB
/
demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dark-mode</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌓</text></svg>" type="image/x-icon">
<meta description="🌓 Add dark mode/night mode custom elements to your website." />
<script type="module" src="https://unpkg.com/@uiw/github-corners?module"></script>
<script src="./main.js"></script>
<style>
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}
a {
color: var(--color-theme-text);
}
</style>
</head>
<body style="margin: 0 auto; max-width: 520px;">
<github-corners target="__blank" position="fixed" href="https://github.com/jaywcjlove/dark-mode"></github-corners>
<dark-mode dark="Dark" light="Light" style="position: fixed;left: 10px;top: 8px;"></dark-mode>
<h1>Hi there!</h1>
<div>I'm your cool new webpage! Use the toggle in the <dark-mode style="border: 2px solid blue"></dark-mode> 👈 button to switch my theme.</div>
<dark-mode onclick="console.log('Hello')" mode="light"></dark-mode>
<dark-mode dark="Dark" light="Light" style="border: 1px solid red; font-size: 12px;"></dark-mode>
<br /><br />
Github: <a href="https://github.com/jaywcjlove/dark-mode.git" target="__blank">@jaywcjlove/dark-mode</a>
<br />
<br />
<script>
const toggle = document.querySelector('dark-mode');
const button = document.createElement('button');
button.textContent = 'Change Theme';
button.style = 'line-height: 16px';
button.onclick = () => {
const theme = document.documentElement.dataset.colorMode;
toggle.mode = theme === 'light' ? 'dark' : 'light';
// document.documentElement.setAttribute('data-color-mode', theme === 'light' ? 'dark' : 'light');
}
document.body.appendChild(button);
document.addEventListener('colorschemechange', (e) => {
console.log(`colorschemechange: Color scheme changed to "${e.detail.colorScheme}" or .`);
button.textContent = toggle.mode === 'dark' ? 'Change Theme 🌞' : 'Change Theme 🌒';
});
document.addEventListener('permanentcolorscheme', (e) => {
console.log(`~permanentcolorscheme: Color scheme changed to "${e.detail.colorScheme}" or .`);
});
const removePermanent = () => document.querySelectorAll('dark-mode').forEach((item) => item.removeAttribute('permanent'));
</script>
<button onclick="toggle.light = '明(Light)主题';toggle.dark = '暗(Dark)主题'">Change Label</button>
<button onclick="removePermanent();">Change permanent</button>
<br />
<br />
<dark-mode permanent></dark-mode>
<span>👈 The <b>mode</b> is remembered after clicking it.</span>
<br /><br />
<script>
const buttonClean = document.createElement('button');
document.body.appendChild(buttonClean);
buttonClean.textContent = `Clean localStorage (${toggle.LOCAL_NANE})`;
buttonClean.style = 'line-height: 16px';
buttonClean.onclick = () => {
localStorage.removeItem(toggle.LOCAL_NANE);
}
</script>
<br /><br />
<div id="markdown">loading...</div>
<link rel="stylesheet" href="https://unpkg.com/@wcj/markdown-to-html/dist/marked.css">
<script src="https://unpkg.com/@wcj/markdown-to-html"></script>
<script type="text/javascript">
;(() => {
const str = `<%- markdownString.replace(/\`/g, '\\\`').replace(/<\//g, '<\\/').replace(/\$\{/g, '$\\{') %>`;
const div = document.getElementById('markdown');
div.className = 'markdown-body';
div.style = 'padding: 15px 0 25px 0;';
div.innerHTML = markdown.default(str)
document.body.appendChild(div)
})()
</script>
</body>
</html>