CodeNewbie Community 🌱

Cover image for Change Background-color Dynamically
Dezigner Bay
Dezigner Bay

Posted on

Change Background-color Dynamically

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Within the body tags, you can see four divs.They are

  1. color-picker - outer most div(Main container)
  2. pictxt - Sample text
  3. picker - contains the color-picker(input)
  4. color-code - Display color-code
 <input type="color" id="favcolor" class="inputcolor" value="#243441">
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
});

Enter fullscreen mode Exit fullscreen mode

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.

Demo

Top comments (6)

Collapse
 
codenewbiestaff profile image
CodeNewbie Staff

Hey there, would you consider embedding your video here instead of just linking to it? This way folks can see your content and discuss it right here on CodeNewbie without having to navigate elsewhere.

You might not have realized, but CodeNewbie actually allows folks to embed YouTube & Vimeo videos via Liquid Tags:

https://dev-to-uploads.s3.amazonaws.com/i/jbiro72vueo6fi9k9rww.png

By the way, here's a link to the editor guide where you can see other liquid tags and formatting options.

Hope this is helpful! 🙂

Collapse
 
damion_towne profile image
Damion Towne

Medical massage can be used to treat a wide range of conditions, including back pain, arthritis, carpal tunnel syndrome, and fibromyalgia. It can also be used to alleviate symptoms of anxiety and depression, as well as improve circulation and flexibility. I have avail the services of medicinal massage islip and I am very satisfied with their services. Before a medical massage session, the therapist will typically conduct a thorough assessment of the patient's health history and current symptoms. This allows them to develop a customized treatment plan that is tailored to the patient's individual needs.

Collapse
 
bekean profile image
bekean

Global CSS variables can be used to set initial or default values for various properties. For example, setting --backcol to #243441 ensures that the initial subway surfers background color of the page matches the color picker value.

Collapse
 
larsenlola profile image
Johnathan Dorsey

This will generate a random RGB color and set it as the background when the button is clicked.

Some ways to expand on this: dino game

  • Add transitions for smooth color change

  • Allow hex input for specific colors

  • Animate the color change over time

  • Store user color preferences

Collapse
 
damion_towne profile image
Damion Towne

The nasal polyps surgeon is a specialist who performs surgery on the nasal passages. Those who need this type of surgery include those who suffer from chronic sinusitis and those who have suffered an injury to their nose. Additionally, nasal polyps surgeon louisville ky has a very specialized training that includes both medical and surgical training. They must be able to handle all types of surgical procedures, including the removal of polyps, reconstruction of bones, and septoplasty (surgical removal of septum).