1let switches = document.getElementsByClassName('switch');
2
3let style = localStorage.getItem('style');
4
5if (style == null) {
6 setTheme('light');
7} else {
8 setTheme(style);
9}
10
11for (let i of switches) {
12 i.addEventListener('click', function () {
13 let theme = this.dataset.theme;
14 setTheme(theme);
15 });
16}
17
18function setTheme(theme) {
19 if (theme == 'light') {
20 document.getElementById('switcher-id').href = './themes/light.css';
21 } else if (theme == 'sky') {
22 document.getElementById('switcher-id').href = './themes/sky.css';
23 } else if (theme == 'purple') {
24 document.getElementById('switcher-id').href = './themes/purple.css';
25 } else if (theme == 'dark') {
26 document.getElementById('switcher-id').href = './themes/dark.css';
27 }
28 localStorage.setItem('style', theme);
29}
1:root {
2 --back-color: #eee;
3 --primary-color: #000000;
4 --header-back: #5d5d5d;
5 --header-text: #eee;
6}
7
8body {
9 background-color: var(--back-color);
10 color: var(--primary-color);
11}
12
13header {
14 background-color: var(--header-back);
15 color: var(--header-text);
16}
17
18.box img {
19 border: 2px solid var(--primary-color);
20}
1let employee = document.getElementByClassName("employee-table");
2let empID = employee.dataset.identity;
3// Or
4let empID = employee.dataset['identity']
1<!DOCTYPE html>
2<head>
3 <meta charset="UTF-8">
4 <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 <title>Theme Switcher</title>
6 <link rel="stylesheet" href="./style.css">
7 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
8 <link rel="stylesheet" id="switcher-id" href="">
9</head>
10<body>
11 <header>
12 <h1>???? THEME SWITCHER</h1>
13 <div class="theme-switches">
14
15 <div data-theme="light" class="switch" id="switch-1"></div>
16
17 <div data-theme="sky" class="switch" id="switch-2"></div>
18
19 <div data-theme="purple" class="switch" id="switch-3"></div>
20
21 <div data-theme="dark" class="switch" id="switch-4"></div>
22
23 </div>
24 </header>
25
26 <div class="container">
27 <div class="box">
28 <img src="https://images.unsplash.com/photo-1597926588114-2d9c1190b5c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=923&q=80"
29 alt="Placeholder" class="image">
30 <div class="text">
31 <h3>A Sweet Heading</h3>
32 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
33 tempor incididunt ut labore et dolore magna aliqua. Ut enim
34 ad minim veniam, quis nostrud exercitation ullamco laboris
35 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
36 in reprehenderit in voluptate velit esse cillum dolore eu fugiat
37 nulla pariatur. Excepteur sint occaecat cupidatat non proident,
38 sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
39 </div>
40 </div>
41 </div>
42 <script src="./script.js"></script>
43
44</body>
45
46</html>
1:root {
2 --back-color: #c3dafe;
3 --primary-color: #3c366b;
4 --header-back: #5f718d;
5 --header-text: #eee;
6}
7
8body {
9 background-color: var(--back-color);
10 color: var(--primary-color);
11}
12
13header {
14 background-color: var(--header-back);
15 color: var(--header-text);
16}
17
18.box img {
19 border: 2px solid var(--primary-color);
20}
1:root {
2 --light: #ffffff;
3 --sky: #7f9cf5;
4 --purple: #97266d;
5 --dark: #81899b;
6}
7
8* {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12}
13
14body {
15 font-family: 'Roboto', sans-serif;
16 height: 100vh;
17 overflow-x: hidden;
18}
19
20header {
21 text-align: center;
22 font-size: 30px;
23 padding: 50px 0;
24}
25
26.theme-switches {
27 display: flex;
28 justify-content: center;
29}
30
31.switch {
32 border: 2px solid black;
33 border-radius: 50px;
34 height: 30px;
35 width: 30px;
36 margin: 10px;
37 cursor: pointer;
38}
39
40.switch:hover {
41 transform: scale(1.2);
42 transition: 0.3s ease-in-out;
43}
44
45#switch-1 {
46 background-color: var(--light);
47}
48
49#switch-2 {
50 background-color: var(--sky);
51}
52
53#switch-3 {
54 background-color: var(--purple);
55}
56
57#switch-4 {
58 background-color: var(--dark);
59}
60
61.container {
62 max-width: 80%;
63 margin: 0 auto;
64}
65
66.box {
67 display: flex;
68 justify-content: space-around;
69 margin-top: 100px;
70}
71
72.box img {
73 max-height: 300px;
74 width: auto;
75 border-radius: 20px;
76 margin: 20px;
77}
78
79.text {
80 width: 50%;
81}
82
83.text h3 {
84 font-size: 35px;
85 padding: 30px 0;
86 font-weight: 600;
87}
88
89.text p {
90 font-size: 20px;
91 font-weight: 400;
92}
93
94/* Media Query */
95@media (max-width: 768px) {
96 header h1 {
97 font-size: 25px;
98 }
99
100 .box {
101 display: flex;
102 flex-wrap: wrap;
103 }
104
105 .box img {
106 max-width: 80vw;
107 }
108
109 .text {
110 width: 80%;
111 }
112}