-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (99 loc) · 2.5 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
<!doctype html>
<html lang="en" data-theme="">
<head>
<meta charset="utf-8">
<title>hello-html-dark-theme</title>
<style>
:root {
--bg-color: #fff;
--text-color: #000;
--link-color: blue;
}
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #e0e0e0;
--link-color: #bb86fc;
}
html {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
body {
font-family: "Courier New", Courier, monospace;
width: 768px;
margin: 20px auto;
background-color: inherit;
color: inherit;
}
a {
color: var(--link-color);
}
.toggle-btn {
position: fixed;
top: 10px;
right: 10px;
border: none;
background: none;
font-size: 1.5em;
cursor: pointer;
}
h1 {
margin-bottom: 0;
}
ul {
padding-left: 0;
}
li {
list-style-position: inside;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
<script>
function getTheme() {
const theme = localStorage.getItem('theme');
return theme === 'dark' || theme === 'light'
? theme
: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
function applyTheme(theme) {
if (theme === undefined) {
theme = getTheme();
}
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
const toggleBtn = document.getElementById('theme-toggle');
if (toggleBtn) {
if (theme === 'dark') {
toggleBtn.textContent = '☀️';
toggleBtn.title = 'Set light mode';
} else {
toggleBtn.textContent = '🌙';
toggleBtn.title = 'Set dark mode';
}
}
}
applyTheme();
document.addEventListener('DOMContentLoaded', () => {
const toggleBtn = document.getElementById('theme-toggle');
toggleBtn.addEventListener('click', () => {
applyTheme(getTheme() === 'dark' ? 'light' : 'dark');
});
applyTheme();
toggleBtn.style.visibility = 'visible';
});
//...
</script>
</head>
<body>
<button id="theme-toggle" class="toggle-btn" aria-label="Toggle light/dark mode"></button>
<h1>Hello</h1>
<ul>
<li>A Link: <a
href="https://swooby.github.io/hello-html-dark-theme">https://swooby.github.io/hello-html-dark-theme</a>
</li>
</ul>
</body>
</html>