Hello Everyone,
This is a Quick Tutorial that describes how to dynamically adjust background color when you choose a color from your custom color picker.CSS-variables are the key concept for this tutorial.Demo
index.html
<!DOCTYPE html>
<html>
<head>
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<!--import style sheet-->
<link href="style.css" rel="stylesheet">
</head>
Here, you can see that I've already added two google fonts and my external stylesheet within my <head> tags.
To use google fonts - https://fonts.google.com/
<body>
<div class="color-picker">
<div class="picktxt">PICK<br>A<br>COLOR</div>
<div class="picker">
<input type="color" id="favcolor" class="inputcolor" value="#243441">
</div>
<div class="color-code" id="c-code">#243441</div>
</div>
</div>
<script src="main.js"></script>
</body>
Within the body tags, you can see four divs.They are
-
color-picker- outer mostdiv(Main container) -
pictxt- Sample text -
picker- contains the color-picker(input) -
color-code- Display color-code
<input type="color" id="favcolor" class="inputcolor" value="#243441">
Be sure to set the type(attribute) of input as the color and if you need to override the default color of the color picker, you can set your own color value for the value attribute.I set the value as #243441.
style.css
:root{
--backcol:#243441;
}
body{
background-color: var(--backcol);
}
The :root CSS pseudo-class selector allows you to target the highest-level parent element in the DOM or document tree. If both the: root and HTML selectors target the same HTML elements, you should know that: root actually has a higher specificity.
:root can be useful for declaring global CSS variables(--backcol). Previously, we set the color picker value to #243441.So we have to set the initial or default background color as #243441 as well. Then if we open the index.html, you will see the color picker color and the background color of the page is the same. To achieve this, you must set the --backcol within the var function as the value of the body background-color.
.color-picker{
display: inline-flex;
justify-content: center;
align-items: center;
background-color: white;
padding: 50px 50px;
border-radius: 25px;
}
.picktext{
font-size: 25px;
color: black;
font-weight: 700;
padding: 0px 10px;
text-align: center;
font-family: 'Fredoka One', cursive;
}
.picker{
width: 90px;
height: 90px;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.inputcolor{
width: 150px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
cursor: pointer;
}
.color-code{
width: 100px;
padding: 10px;
font-family: 'Montserrat' ,sans-serif;
}
main.js
var inputcolor = document.getElementById("favcolor");
var root = document.documentElement;
inputcolor.addEventListener("input",(e) => {
document.getElementById("c-code").innerHTML = e.target.value;
root.style.setProperty("--backcol",e.target.value);
});
The color-picker input value set to the inputcolor(variable).
documentElement returns an element which is the root element of the document.
addEventListener() method attaches an event handler to the inputcolor(variable).
As a result, color-code and background-color changes.
Top comments (0)