Skip to content

Commit efb8b3f

Browse files
ITArticlesITArticles
committed
Code: use css variable to create themes by ITArticles
0 parents  commit efb8b3f

File tree

4 files changed

+402
-0
lines changed

4 files changed

+402
-0
lines changed

‎index.html

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Theme with CSS Variables</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
10+
</head>
11+
<body class="main">
12+
<ul class="navigator">
13+
<li>
14+
<a href="#Home">Home</a>
15+
</li>
16+
<li>
17+
<a href="#About">About</a>
18+
</li>
19+
<li>
20+
<a href="#Contact">Contact</a>
21+
</li>
22+
<li class="search">
23+
<input type="text" placeholder="Search">
24+
</li>
25+
</ul>
26+
<div class="container">
27+
<div class="section">
28+
<div class="part watch">
29+
<div class="time">
30+
<span class="c-time">12:00:00 AM</span>
31+
<span class="c-day">Sunday, Jan 01</span>
32+
</div>
33+
</div>
34+
<div class="part">
35+
<ul class="disk-list dark-first">
36+
<li>
37+
<a href="#list1">Local and Session Storage in Javascript</a>
38+
</li>
39+
<li>
40+
<a href="#list2">Cookies in HTML and Javascript</a>
41+
</li>
42+
<li>
43+
<a href="#list1">Cookies vs Web Storage</a>
44+
</li>
45+
<li>
46+
<a href="#list1">Whats Console API?</a>
47+
</li>
48+
<li>
49+
<a href="#list2">Console Timer - time a fn() took?</a>
50+
</li>
51+
<li>
52+
<a href="#list2">Console Table - Display array as Table</a>
53+
</li>
54+
<li>
55+
<a href="#list2">Style your Console Log</a>
56+
</li>
57+
</ul>
58+
</div>
59+
<div class="part">
60+
<ul class="disk-list light-first">
61+
<li>
62+
<a href="#list1">CSS TextShadow for 3D Look</a>
63+
</li>
64+
<li>
65+
<a href="#list2">use variables in CSS(No JS)</a>
66+
</li>
67+
<li>
68+
<a href="#list3">Animation in CSS3 without Javascript</a>
69+
</li>
70+
<li>
71+
<a href="#list4">CSS Cool Animation Effect</a>
72+
</li>
73+
<li>
74+
<a href="#list1">CSS Glowing Text and Animations</a>
75+
</li>
76+
<li>
77+
<a href="#list2">Newspaper style - without Grid or Flex</a>
78+
</li>
79+
<li>
80+
<a href="#list2">Fixed Auto Expand Menu only CSS</a>
81+
</li>
82+
</ul>
83+
</div>
84+
</div>
85+
86+
<div class="alert">
87+
This is default alert box for current theme.
88+
</div>
89+
<div class="alert primary">
90+
This is primary alert box for current theme.
91+
</div>
92+
<div class="alert">
93+
Button:
94+
<input type="button" class="btn" value="Default">
95+
<input type="button" class="btn primary" value="Primary">
96+
<label style="float: right;cursor: pointer;">Themes?
97+
<select class="theme-switch">
98+
<option value="blue">Blue</option>
99+
<option value="pink">Pink</option>
100+
<option value="violet">Violet</option>
101+
</select>
102+
</label>
103+
</div>
104+
</div>
105+
</body>
106+
<script src="script.js"></script>
107+
</html>

‎readme.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Build themes with CSS Variabless | IT Articles
2+
Explains how to use the css variables to create theme, and how to save the selected theme by the user in local storage to apply the same theme whenever he visit the website next time.
3+
4+
[Watch Video](https://www.youtube.com/watch?v=REHGkRYs61E)
5+
6+
7+
---
8+
9+
# ![ITArticles](https://avatars0.githubusercontent.com/u/63590130?s=40 "IT Articles") Join us at [YouTube](https://tiny.cc/ITArticles)

‎script.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const toggleSwitch = document.querySelector('select.theme-switch');
2+
3+
function switchTheme(e) {
4+
let val = e.target.value;
5+
if (val) {
6+
document.documentElement.setAttribute('data-theme', val);
7+
localStorage.setItem('theme', val);
8+
}
9+
else {
10+
document.documentElement.removeAttribute('data-theme');
11+
localStorage.removeItem('theme');
12+
}
13+
}
14+
15+
toggleSwitch.addEventListener('change', switchTheme, false);
16+
17+
18+
19+
function checkTheme(){
20+
let theme = localStorage.getItem('theme');
21+
if(theme){
22+
toggleSwitch.value = theme;
23+
document.documentElement.setAttribute('data-theme', theme);
24+
}else{
25+
toggleSwitch.value = undefined;
26+
document.documentElement.removeAttribute('data-theme');
27+
}
28+
}
29+
30+
checkTheme();
31+
32+
(function time(){
33+
var x = document.querySelector('span.c-time');
34+
var y = document.querySelector('span.c-day');
35+
var m = moment();
36+
x.innerHTML = m.format("hh:mm:ss a");
37+
y.innerHTML = m.format("dddd, MMM D");
38+
setInterval(()=>{
39+
var m = moment();
40+
x.innerHTML = m.format("hh:mm:ss a");
41+
y.innerHTML = m.format("dddd, MMM D");
42+
},1000);
43+
})()
44+
45+

0 commit comments

Comments
 (0)