INU Login Sign up
Login Or Sign up

Answers for "build a javascript to easily change website colours theme"

Javascript
0

build a javascript to easily change website colours theme

:root {
  --back-color: #eee;
  --primary-color: #000000;
  --header-back: #5d5d5d;
  --header-text: #eee;
}

body {
  background-color: var(--back-color);
  color: var(--primary-color);
}

header {
  background-color: var(--header-back);
  color: var(--header-text);
}

.box img {
  border: 2px solid var(--primary-color);
}
Posted by: Guest on April-04-2021
0

build a javascript to easily change website colours theme

let employee = document.getElementByClassName("employee-table");
let empID = employee.dataset.identity;
// Or
let empID = employee.dataset['identity']
Posted by: Guest on April-04-2021
0

build a javascript to easily change website colours theme

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme Switcher</title>
    <link rel="stylesheet" href="./style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" id="switcher-id" href="">
</head>
<body>
    <header>
        <h1>???? THEME SWITCHER</h1>
        <div class="theme-switches">

            <div data-theme="light" class="switch" id="switch-1"></div>

            <div data-theme="sky" class="switch" id="switch-2"></div>

            <div data-theme="purple" class="switch" id="switch-3"></div>

            <div data-theme="dark" class="switch" id="switch-4"></div>

        </div>
    </header>

    <div class="container">
        <div class="box">
            <img src="https://images.unsplash.com/photo-1597926588114-2d9c1190b5c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=923&q=80"
                alt="Placeholder" class="image">
            <div class="text">
                <h3>A Sweet Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                tempor incididunt ut labore et dolore magna aliqua. Ut enim 
                ad minim veniam, quis nostrud exercitation ullamco laboris 
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
                nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
                sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
    <script src="./script.js"></script>

</body>

</html>
Posted by: Guest on April-04-2021
0

build a javascript to easily change website colours theme

:root {
  --back-color: #c3dafe;
  --primary-color: #3c366b;
  --header-back: #5f718d;
  --header-text: #eee;
}

body {
  background-color: var(--back-color);
  color: var(--primary-color);
}

header {
  background-color: var(--header-back);
  color: var(--header-text);
}

.box img {
  border: 2px solid var(--primary-color);
}
Posted by: Guest on April-04-2021
0

build a javascript to easily change website colours theme

:root {
  --light: #ffffff;
  --sky: #7f9cf5;
  --purple: #97266d;
  --dark: #81899b;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  height: 100vh;
  overflow-x: hidden;
}

header {
  text-align: center;
  font-size: 30px;
  padding: 50px 0;
}

.theme-switches {
  display: flex;
  justify-content: center;
}

.switch {
  border: 2px solid black;
  border-radius: 50px;
  height: 30px;
  width: 30px;
  margin: 10px;
  cursor: pointer;
}

.switch:hover {
  transform: scale(1.2);
  transition: 0.3s ease-in-out;
}

#switch-1 {
  background-color: var(--light);
}

#switch-2 {
  background-color: var(--sky);
}

#switch-3 {
  background-color: var(--purple);
}

#switch-4 {
  background-color: var(--dark);
}

.container {
  max-width: 80%;
  margin: 0 auto;
}

.box {
  display: flex;
  justify-content: space-around;
  margin-top: 100px;
}

.box img {
  max-height: 300px;
  width: auto;
  border-radius: 20px;
  margin: 20px;
}

.text {
  width: 50%;
}

.text h3 {
  font-size: 35px;
  padding: 30px 0;
  font-weight: 600;
}

.text p {
  font-size: 20px;
  font-weight: 400;
}

/* Media Query */
@media (max-width: 768px) {
  header h1 {
    font-size: 25px;
  }

  .box {
    display: flex;
    flex-wrap: wrap;
  }

  .box img {
    max-width: 80vw;
  }

  .text {
    width: 80%;
  }
}
Posted by: Guest on April-04-2021
0

build a javascript to easily change website colours theme

let switches = document.getElementsByClassName('switch');

let style = localStorage.getItem('style');

if (style == null) {
  setTheme('light');
} else {
  setTheme(style);
}

for (let i of switches) {
  i.addEventListener('click', function () {
    let theme = this.dataset.theme;
    setTheme(theme);
  });
}

function setTheme(theme) {
  if (theme == 'light') {
    document.getElementById('switcher-id').href = './themes/light.css';
  } else if (theme == 'sky') {
    document.getElementById('switcher-id').href = './themes/sky.css';
  } else if (theme == 'purple') {
    document.getElementById('switcher-id').href = './themes/purple.css';
  } else if (theme == 'dark') {
    document.getElementById('switcher-id').href = './themes/dark.css';
  }
  localStorage.setItem('style', theme);
}
Posted by: Guest on April-04-2021

Code answers related to "build a javascript to easily change website colours theme"

Code answers related to "Javascript"

Browse Popular Code Answers by Language

Python
Javascript
Whatever
Shell/Bash
CSS
Html
PHP
SQL
Java
C#

Popular Programming Languages

Abap ActionScript Assembly BASIC C C# C++ Clojure Cobol CSS Dart Delphi Elixir Erlang F# Fortran Go Groovy Haskell Html Java Javascript Julia Kotlin Lisp Lua Matlab Objective-C Pascal Perl PHP Prolog Python R Ruby Rust Scala Scheme Shell/Bash SQL Swift TypeScript VBA Whatever

Advertisements

290x500

Company

Compilers

Help

Connect with us

footer logo

Copyright © 2021 Codeinu