Custom Browser Theme Generator with HTML, CSS, and JavaScript - Madras Academy

March 3, 2025March 3, 2025

html

Creating a Custom Browser Theme Generator allows users to personalize their browsing experience by changing the background color and text color dynamically. This project uses HTML, CSS, JavaScript, and jQuery, with local storage to save user preferences.

Features

✅ Dynamic background and text color changes 🎨
✅ Uses jQuery for easy DOM manipulation 🖥️
✅ Saves user preferences with local storage 🔄
✅ Enhances user experience with interactive customization ✨

Project Setup

1. HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Browser Theme Generator</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="theme-container">
        <h1>Custom Theme Generator</h1>
        <label>Background Color: </label>
        <input type="color" id="bg-color" class="color-picker"><br>
        <label>Text Color: </label>
        <input type="color" id="text-color" class="color-picker"><br>
        <button class="btn" id="save-theme">Save Theme</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS for Styling

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
    background-color: var(--bg-color, #f4f4f4);
    color: var(--text-color, #333);
}
.theme-container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.theme-container h1 {
    margin-bottom: 15px;
}
.color-picker {
    margin: 10px 0;
}
.btn {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #007BFF;
    color: white;
}
.btn:hover {
    background-color: #0056b3;
}

3. JavaScript for Functionality

$(document).ready(function() {
    if (localStorage.getItem("bgColor")) {
        document.documentElement.style.setProperty('--bg-color', localStorage.getItem("bgColor"));
    }
    if (localStorage.getItem("textColor")) {
        document.documentElement.style.setProperty('--text-color', localStorage.getItem("textColor"));
    }
    
    $('#save-theme').click(function() {
        let bgColor = $('#bg-color').val();
        let textColor = $('#text-color').val();
        
        document.documentElement.style.setProperty('--bg-color', bgColor);
        document.documentElement.style.setProperty('--text-color', textColor);
        
        localStorage.setItem("bgColor", bgColor);
        localStorage.setItem("textColor", textColor);
    });
});

Live Demo & Source Code

🎥 Watch the tutorial video:

💻 Access the complete source code: GitHub Repository

If you found this helpful, don’t forget to like, comment, and subscribe to Madras Academy for more exciting web development tutorials! 🚀✨

Leave a Reply Cancel reply