-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (153 loc) · 6.71 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
<!--
Crafted and Designed By DesignDrastic
Author: DesignDrastic
Author URL: http://designdrastic.com
License URL: http://designdrastic.com/license
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Color Theme Switcher</title>
<!-- Line icons -->
<!-- Style CSS -->
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Alata&family=Source+Sans+Pro:wght@400;600;700;900&display=swap"
rel="stylesheet">
<!-- Custom Theme(sample example) -->
<!-- <link rel="stylesheet" href="css/themes/bayoux-lily.css"> -->
</head>
<body id="body" class="light">
<div class="dd-hero">
<div class="container">
<!-- Header -->
<header class="dd-header">
<!-- Logo -->
<a href="index.html" class="dd-logo">Logo</a>
<!-- Menu -->
<ul class="menu" id="menu">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#features">About</a></li>
<li><a href="##">#</a></li>
<li><a href="#contact">Login</a></li>
<li><a href="#" class="form-btn">Register</a></li>
</ul>
</header>
<div class="box">
<span dd-toggle="theme" class="df">
<div id="toggle_theme" class="dd-theme__switcher">
<span class="dd-theme__switcher-btn">
<svg xmlns="http://www.w3.org/2000/svg" class="dd-icon icon-tabler icon-tabler-sun" width="24" height="24"
viewBox="0 0 24 24" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<circle cx="12" cy="12" r="4" />
<path d="M3 12h1M12 3v1M20 12h1M12 20v1M5.6 5.6l.7 .7M18.4 5.6l-.7 .7M17.7 17.7l.7 .7M6.3 17.7l-.7 .7" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="dd-icon icon-tabler icon-tabler-moon" width="24" height="24"
viewBox="0 0 24 24" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<path d="M16.2 4a9.03 9.03 0 1 0 3.9 12a6.5 6.5 0 1 1 -3.9 -12" />
</svg>
</span>
</div>
<label class="box-lbl" for="toggle_theme"><strong>Toggle Ligth/Dark Theme</strong></label>
</span> | Or |
<label dd-theme="solarized" class="theme--label">
<span></span>Solarized color theme
</label>
<label dd-theme="pt" class="theme--label">
<span></span>Pink-Teal color theme
</label>
<label dd-theme="blue" class="theme--label">
<span></span>Blue color theme
</label>
<label dd-theme="yp" class="theme--label">
<span></span>Yellow-Purple color theme
</label>
</div>
<br />
<h2 class="title">Page title</h2>
<p class="p-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores facilis, ipsa qui quaerat impedit tempore provident vel totam molestias esse maxime quas officiis dicta dolore ea similique. At, sint blanditiis!</p>
<br />
<div class="grid grid-3 gutter">
<div class="card">
<h2 class="card__title">Card Title</h2>
<p class="p-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam laudantium ratione odit quis, enim dicta, accusantium, et quasi assumenda nesciunt laboriosam expedita. Excepturi accusamus, commodi facilis nulla a cum atque!</p>
</div>
<div class="card">
<h2 class="card__title">Card Title</h2>
<p class="p-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam laudantium ratione odit quis, enim dicta, accusantium,
et quasi assumenda nesciunt laboriosam expedita. Excepturi accusamus, commodi facilis nulla a cum atque!</p>
</div>
<div class="card">
<h2 class="card__title">Card Title</h2>
<p class="p-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam laudantium ratione odit quis, enim dicta, accusantium,
et quasi assumenda nesciunt laboriosam expedita. Excepturi accusamus, commodi facilis nulla a cum atque!</p>
</div>
</div>
<br />
<div class="dd-form">
<h2 class="title mp0">Form elements</h2>
<br />
<input class="form-input" type="text" placeholder="Your Name" />
<div class="clearfix"></div><br />
<input class="form-input" type="text" placeholder="Email Address" />
<div class="clearfix"></div><br />
<input class="form-input" type="text" placeholder="Message" />
<div class="clearfix"></div><br />
<button class="form-btn">Send</button>
</div>
</div>
</div>
<script>
// Set the theme from localStorage(if exist) || or set default light
let theme = window.localStorage.getItem('theme') || 'light';
// Activate the current theme (using class)
body.classList = theme;
// Or Activate the current theme (using attribute)
// body.setAttribute('color-theme', theme);
// Available Themes
let available_themes = document.querySelectorAll('[dd-theme]');
/** Light / Dark theme Toggle */
// Toggle Dark / Light theme
let _toggler = document.querySelector('[dd-toggle]');
_toggler.addEventListener('click', toggleTheme);
// Function: toggle theme(light & dark)
function toggleTheme() {
// Toggle light / dark theme
( theme == 'light' ? theme = 'dark' : theme = 'light');
// Apply class to body (using class)
body.classList = theme;
// Apply class to body (using attribute)
// body.setAttribute('color-theme', theme);
// Store theme var to localStorage
window.localStorage.setItem('theme', theme );
// Disable other themes
available_themes.forEach(e => {
e.classList = 'theme--label';
});
}
/* --- X --- */
/** Switch Theme **/
available_themes.forEach(e => {
( window.localStorage.getItem('theme') == e.getAttribute('dd-theme') ? e.classList.add('active') : null );
e.addEventListener('click', switchTheme);
});
function switchTheme() {
available_themes.forEach(e => {
e.classList = 'theme--label';
});
let theme = this.getAttribute('dd-theme');
this.classList.add('active');
// Activate the theme(using class)
body.classList = theme;
// Activate the theme(attribute class)
// body.setAttribute('color-theme', theme);
window.localStorage.setItem('theme', theme);
}
/* --- X --- */
</script>
</body>
</html>