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"

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}

source

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}

source

Lucia

06 Feb 2017

1let employee = document.getElementByClassName("employee-table");
2let empID = employee.dataset.identity;
3// Or
4let empID = employee.dataset['identity']

source

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>

source

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}

source

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}

source

queries leading to this page

build a javascript to easily change website colours theme website color schemes change javascript how to change the website theme color in css js build a javascript to easily change website colours theme