build a javascript to easily change website colours theme

Solutions on MaxInterview for build a javascript to easily change website colours theme by the best coders in the world

showing results for - "build a javascript to easily change website colours theme"
Louisa
10 Feb 2017
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}
Florent
29 Sep 2017
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}
Lucia
06 Feb 2017
1let employee = document.getElementByClassName("employee-table");
2let empID = employee.dataset.identity;
3// Or
4let empID = employee.dataset['identity']
Ava
30 Jul 2016
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>
Yannick
27 Jun 2017
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}
Sakina
10 Feb 2020
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}