Colour Themes
How do I make an colour themes?
Playing around with selectable colour themes. Added universal colour transitions for some added eye candy.. What is a colour themes? How do you make a colour themes? This script and codes were developed by Adam Orchard on 02 December 2022, Friday.
Colour Themes - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colour Themes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="centre outer"> <div class="switch"> <label><input type="radio" name="radio" checked="CHECKED" onClick="setTheme1()" />Theme 1</label> <label><input type="radio" name="radio" onClick="setTheme2()" />Theme 2</label> </div> <ul class="centre"> <li/> <li/> <li/> </ul>
</div> <script src="js/index.js"></script>
</body>
</html>
Colour Themes - Script Codes CSS Codes
* { transition: color 0.5s ease-in-out; transition: background-color 0.5s ease-in-out;
}
body { font-family: "Century Gothic", sans-serif; background: #556270; color: #dadada;
}
.centre { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.outer { width: 50%;
}
.switch { position: absolute; top: 15%;
}
.switch label { margin-right: 20px;
}
ul { height: 50%; list-style: none; margin: 0; padding: 0;
}
ul li { width: 30%; height: 100%; margin-left: 5%; float: left;
}
ul li:nth-child(1) { margin-left: 0; background: #FF6B6B;
}
ul li:nth-child(1).theme2 { background: #027169;
}
ul li:nth-child(2) { background: #C7F464;
}
ul li:nth-child(2).theme2 { background: #FF4E60;
}
ul li:nth-child(3) { background: #4ECDC4;
}
ul li:nth-child(3).theme2 { background: #FFAD01;
}
body.theme2 { background: #373231; color: #A6E843;
}
body.theme2 ul li:nth-child(1) { background: #027169;
}
body.theme2 ul li:nth-child(2) { background: #FF4E60;
}
body.theme2 ul li:nth-child(3) { background: #FFAD01;
}
Colour Themes - Script Codes JS Codes
function setTheme1() { var element = document.body; element.classList.remove("theme2");
}
function setTheme2() { var element = document.body; element.classList.add("theme2");
}
Developer | Adam Orchard |
Username | orchard |
Uploaded | December 02, 2022 |
Rating | 3 |
Size | 2,662 Kb |
Views | 14,168 |
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!
Name | Size |
CSS Moon - dribbble rebound | 2,929 Kb |
A Pen by Adam Orchard | 1,983 Kb |
Tree growth tests | 3,818 Kb |
Burger with Label | 3,346 Kb |
Parallax Clouds | 7,285 Kb |
WIP | 2,835 Kb |
Animated Burgers | 3,329 Kb |
CSS Triangle Animation | 2,638 Kb |
CSS Gem Badge | 3,335 Kb |
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!
Name | Username | Size |
Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
SnappySnippet Test | Elmsoftware | 8,385 Kb |
Arrow Navigation | Hinducows | 1,973 Kb |
Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
Boom | Mhrjnsa1 | 1,794 Kb |
Objects | Bonzaipenguin | 2,616 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
TinFoil Boats | Chandralil | 4,577 Kb |
Perforated foil | 0x04 | 2,617 Kb |
A Pen by Jason Kinney | Jason-kinney | 1,980 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!