Theme Customizer Panel | HTML CSS JavaScript

Theme Customizer Panel with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #28

Project Overview

The Theme Customizer Panel is an interactive web project built using HTML, CSS, and JavaScript. It allows users to customize the appearance of a webpage in real time without changing the source code. Users can choose different background, text, and accent colors, as well as switch between different font styles.

First, the project provides a simple control panel where users can select their preferred theme settings. Next, JavaScript listens for changes in these controls and updates CSS variables instantly. As a result, the preview area changes immediately to reflect the selected colors and font. This project is useful for learning CSS variables, DOM manipulation, event listeners, and dynamic UI updates.

Key Features

Real-Time Theme Customization: Users can change the appearance of the preview area instantly. Every selected option updates the theme without refreshing the webpage.
Background Color Control: A color picker allows users to choose a custom background color. The selected color is applied directly to the preview section.
Text Color Control: Users can select a different text color using a color input. JavaScript updates the preview text as soon as the color changes.
Accent Color Customization: The accent color controls the preview border and sample button. This allows users to create different visual combinations easily.
Font Style Selection: A dropdown provides multiple font choices, including Arial, Georgia, Poppins, and Courier New. Users can switch the preview font with a single selection.
Live Preview Area: The project includes a dedicated preview section where users can immediately see their selected theme. Therefore, it works like a small visual theme editor.
CSS Variables: The project uses custom CSS variables for background color, text color, accent color, and font family. JavaScript changes these variables dynamically.
Interactive JavaScript Controls: JavaScript uses event listeners to detect color and font changes. It then updates the corresponding CSS variable on the page.
Clean Control Panel: The interface uses a simple white container with organized controls and a separate preview area. This keeps the customization process easy to understand.
Responsive Layout: The controls use a flexible grid-based layout, while the main container stays centered. This helps the interface remain usable across different screen sizes.

What You'll Learn

How to structure a theme customization panel using HTML
How to create color inputs and dropdown controls
How CSS custom properties work
How to update CSS variables using JavaScript
How to use addEventListener() for user interactions
How to manipulate the DOM with JavaScript
How to create real-time UI updates
How to build a simple responsive interface

HTML Code

The HTML creates the main structure of the Theme Customizer Panel. First, it adds a container with the project heading and a controls section containing options for background color, text color, accent color, and font style. The background, text, and accent options use HTML color inputs. The font selector uses a <select> element with options such as Arial, Georgia, Poppins, and Courier New.

After that, the preview section contains a heading, paragraph, and sample button. These elements demonstrate how the selected theme settings affect the webpage in real time.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Theme Customizer Panel</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">

<h1>Theme Customizer Panel</h1>

<div class="controls">

<label>Background Color</label>
<input type="color" id="bgColor">

<label>Text Color</label>
<input type="color" id="textColor">

<label>Accent Color</label>
<input type="color" id="accentColor">

<label>Font Style</label>
<select id="fontSelect">
<option value="Arial">Arial</option>
<option value="Georgia">Georgia</option>
<option value="Poppins">Poppins</option>
<option value="Courier New">Courier New</option>
</select>

</div>

<div class="preview">

<h2>Live Preview</h2>

<p>
This is a preview area where you can see the theme changes in real time.
</p>

<button>Sample Button</button>

</div>

</div>

<script src="script.js"></script>

</body>
</html>

CSS Code

The CSS defines four custom properties inside :root: background color, text color, accent color, and font family. These variables allow the theme values to change without rewriting individual CSS rules. Next, the main container uses a white background, padding, rounded corners, and a shadow to create a clean card-style interface. The controls use a grid layout with spacing between each option.

The preview area uses the custom variables for its background, text, and border colors. The sample button also uses the accent color, so changes to the theme appear across multiple elements. A transition adds a smoother visual effect when the preview changes.

:root{
--bg-color:#ffffff;
--text-color:#111111;
--accent-color:#2563eb;
--font-family:Arial;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:var(--font-family);
}

body{
background:#042354;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.container{
background:white;
padding:30px;
border-radius:12px;
width:600px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

h1{
text-align:center;
margin-bottom:20px;
}

.controls{
display:grid;
gap:10px;
margin-bottom:25px;
}

.preview{
background:var(--bg-color);
color:var(--text-color);
padding:20px;
border-radius:8px;
border:2px solid var(--accent-color);
transition:0.3s;
}

.preview h2{
margin-bottom:10px;
}

.preview button{
margin-top:15px;
padding:10px 15px;
border:none;
background:var(--accent-color);
color:white;
border-radius:6px;
cursor:pointer;
}

.preview button:hover{
opacity:0.9;
}

Javascript Code

JavaScript connects the customization controls with the CSS variables. First, it selects the color inputs and font dropdown using getElementById(). Next, addEventListener() detects changes to each control. When a user selects a new background, text, or accent color, JavaScript uses document.documentElement.style.setProperty() to update the matching CSS variable.

Finally, the font dropdown listens for a change event and updates the --font-family variable with the selected font. Therefore, every customization appears instantly in the preview without reloading the page.

const bgColor = document.getElementById("bgColor")
const textColor = document.getElementById("textColor")
const accentColor = document.getElementById("accentColor")
const fontSelect = document.getElementById("fontSelect")

bgColor.addEventListener("input", function(){
document.documentElement.style.setProperty("--bg-color", this.value)
})

textColor.addEventListener("input", function(){
document.documentElement.style.setProperty("--text-color", this.value)
})

accentColor.addEventListener("input", function(){
document.documentElement.style.setProperty("--accent-color", this.value)
})

fontSelect.addEventListener("change", function(){
document.documentElement.style.setProperty("--font-family", this.value)
})