What is Theme implementation basics in CSS?

CSSmarkup~5 mins

Theme implementation basics in CSS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

The purpose of theme implementation is to change the look and feel of a website easily. It helps keep colors, fonts, and styles consistent.

You want to switch between light and dark modes on a website.

You need to apply a company's brand colors across all pages.

You want users to customize the website colors to their liking.

You want to keep your CSS organized by grouping style settings.

You want to quickly update the website's style without changing HTML.

Syntax

CSS

:root {
  --main-color: #3498db;
  --background-color: #ffffff;
  --font-family: 'Arial', sans-serif;
}

body {
  background-color: var(--background-color);
  color: var(--main-color);
  font-family: var(--font-family);
}

Use :root to define CSS variables globally for the whole page.

Use var(--variable-name) to use the variable value in styles.

Examples

This example sets a primary color and font size, then uses them in an h1 heading.

CSS

:root {
  --primary-color: #ff6347;
  --font-size: 1.2rem;
}

h1 {
  color: var(--primary-color);
  font-size: var(--font-size);
}

This example shows how to define light and dark background colors and apply them by switching classes on the body.

CSS

:root {
  --background-light: #f0f0f0;
  --background-dark: #222222;
}

body.light-theme {
  background-color: var(--background-light);
}

body.dark-theme {
  background-color: var(--background-dark);
}

Sample Program

This example shows a simple webpage with a light theme by default. Clicking the button toggles a dark theme by changing CSS variables using a class on the body. The colors and fonts update automatically.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Theme Example</title>
  <style>
    :root {
      --main-bg-color: #ffffff;
      --main-text-color: #333333;
      --main-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background-color: var(--main-bg-color);
      color: var(--main-text-color);
      font-family: var(--main-font);
      margin: 2rem;
    }

    header {
      border-bottom: 2px solid var(--main-text-color);
      padding-bottom: 1rem;
      margin-bottom: 2rem;
    }

    button {
      background-color: var(--main-text-color);
      color: var(--main-bg-color);
      border: none;
      padding: 0.5rem 1rem;
      cursor: pointer;
      font-size: 1rem;
      border-radius: 0.3rem;
    }

    button:hover {
      opacity: 0.8;
    }

    /* Dark theme variables */
    body.dark {
      --main-bg-color: #121212;
      --main-text-color: #e0e0e0;
    }
  </style>
</head>
<body>
  <header>
    <h1>Welcome to Theme Demo</h1>
  </header>
  <p>This page uses CSS variables to implement a simple theme.</p>
  <button id="toggleTheme">Toggle Dark Mode</button>

  <script>
    const button = document.getElementById('toggleTheme');
    button.addEventListener('click', () => {
      document.body.classList.toggle('dark');
    });
  </script>
</body>
</html>

OutputSuccess

Important Notes

CSS variables make it easy to change themes without rewriting many styles.

Use descriptive variable names to keep your code clear.

Toggle classes on the body or html element to switch themes dynamically.

Summary

Theme implementation uses CSS variables to store colors and fonts.

Variables are defined in :root for global use.

Switch themes by changing variable values with classes or JavaScript.