Color Palette Changer

Developer
Rich Wertz
Size
2,137 Kb
Views
6,072
  1. Color Palette Changer Previews
  2. Color Palette Changer HTML Codes
  3. Color Palette Changer CSS Codes
  4. Color Palette Changer JS Codes

How do I make an color palette changer?

Change the color scheme of a whole page by selecting different palettes from a menu.. What is a color palette changer? How do you make a color palette changer? This script and codes were developed by Rich Wertz on 29 January 2023, Sunday.

Color Palette Changer Previews
IQ Test

Color Palette Changer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Color Palette Changer</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body data-palette="1"> <div class="bg"> <article> <h1>LET'S GO PENS!!!</h1> </article> <p>Change this color scheme: <select name="palette"> <option value="1">Default</option> <option value="2">Black & Gold</option> <option value="3">Gold & Black</option> </select> </p> </div>
</body> <script src="js/index.js"></script>
</body>
</html>

Color Palette Changer - Script Codes CSS Codes

body { display: block; width: 100%; height: 100%; margin: 0; padding: 0; font-family: Trebuchet MS, sans-serif; font-size: 16px; background: #fff; color: #000;
}
.bg { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/329887/StanleyCup.png") no-repeat right 10px; min-height: 960px;
}
h1 { font-size: 3em; font-weight: bold; padding: 20px;
}
p { padding: 20px;
}
[data-palette] { transition: background 1s, color 1s;
}
[data-palette="1"] { background: #fff; color: #000;
}
[data-palette="2"] { background: #0d0d0d; color: #F2A71B;
}
[data-palette="3"] { background: #F2A71B; color: #0d0d0d;
}

Color Palette Changer - Script Codes JS Codes

window.addEventListener("load", function() { document.querySelector('[name="palette"]').addEventListener("change", function() { document.body.setAttribute("data-palette", this.value) });
});
Color Palette Changer - Script Codes
Color Palette Changer - Script Codes
Home Page Home
Developer Rich Wertz
Username richwertz
Uploaded January 29, 2023
Rating 3
Size 2,137 Kb
Views 6,072
Do you need developer help for Color Palette Changer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rich Wertz (richwertz) Script Codes
Name
Vertical-align-vertical-height
Reduce Navigation Interaction Voids
Image Slide In Effect
Animated Title Effect
SCSS basics
Video-background
Fullscreen Menu
Hamburger Menu Animation
Loading Animation Example
Dynamic Animated Effect
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!