-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
71 lines (70 loc) · 3.02 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
<!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>Theme Switcher - Dark/Light Mode Switch - Nabin Bhatt</title>
<link rel="stylesheet" href="styles.css" />
<meta name="description" content="Theme switcher - Dark/Light mode switcher using CSS variables and pure JavaScript.">
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="https://nabinbhatt.info.np/assets/icons/favicon.ico" type="image/x-icon">
<meta name="keywords" content="theme switcher, dark/light mode switcher">
<link rel="canonical" href="https://nabinbhatt.info.np/theme-switcher/">
<meta property="og:title" content="Theme Switcher - Dark/Light Mode Switch - Nabin Bhatt">
<meta property="og:url" content="https://nabinbhatt.info.np/theme-switcher/">
<meta property="og:description" content="Theme switcher - Dark/Light mode switcher using CSS variables and pure JavaScript.">
<meta property="og:image" content="https://nabinbhatt.info.np/theme-switcher/banner.jpeg"/>
</head>
<body>
<div class="container">
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 24 24"
fill="none"
stroke="#fff"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="svg theme"
id="switch"
>
<g>
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</g>
<path
class="path"
d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
style="display: none"
></path>
</svg>
</div>
<div class="content">
<h1 class="title">
Theme Switcher Using CSS Variables and Pure JavaScript
</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem,
sit vitae! Veniam, id. Provident, in nobis? Earum totam in eveniet?
Dolores harum a laudantium odio sint atque amet eius quisquam
nesciunt, sapiente labore sequi voluptas deleniti, delectus at fuga
itaque inventore non cumque! Consequuntur accusantium repellat beatae,
tempore laborum nisi? Ipsa praesentium dolore nemo eius obcaecati!
</p>
<button type="button" class="more">Read More</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>