<h1>Theming approaches</h1>
<fieldset>
  <legend>Pick a theme</legend>
    <input type="radio" name="theme" value="1">Red</input>
    <input type="radio" name="theme" value="2">Yellow</input>
    <input type="radio" name="theme" value="3">Pink</input>
    <input type="radio" name="theme" value="4">Green</input>
    <input type="radio" name="theme" value="5">Purple</input>
    <input type="radio" name="theme" value="6">Orange</input>
    <input type="radio" name="theme" value="7">Blue</input>
</fieldset>
<h2>Selector-based</h2>
<div>
  <button id="selector-button">Example button</button>
  <a id="selector-link" href="#">Example link</a>
  <span id="selector-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="currentColor" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z"/></svg>
  </span>
</div>
<h2>Inheritance-based</h2>
<div id="inheritance-container">
  <button class="button">Example button</button>
  <a class="link" href="#">Example link</a>
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="currentColor" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z"/></svg>
</div>
/*--------------------
Selector-based theming
----------------------*/

/* button.css  */
.button--1 {
  background-color: red;
}

.button--2 {
  background-color: yellow;
}

.button--3 {
  background-color: pink;
}

.button--4 {
  background-color: green;
}

.button--5 {
  background-color: purple;
}

.button--6 {
  background-color: orange;
}

.button--7 {
  background-color: blue;
}

/* link.css */
.link--1 {
  color: red;
}

.link--2 {
  color: yellow;
}

.link--3 {
  color: pink;
}

.link--4 {
  color: green;
}

.link--5 {
  color: purple;
}

.link--6 {
  color: orange;
}

.link--7 {
  color: blue;
}

/*  icon.css */
.icon--1 {
  color: red;
}

.icon--2 {
  color: yellow;
}

.icon--3 {
  color: pink;
}

.icon--4 {
  color: green;
}

.icon--5 {
   color: purple;
}

.icon--6 {
  color: orange;
}

.icon--7 {
  color: blue;
}

/*-----------------------
Inheritance based theming
-------------------------*/

/* themes.css */
.theme--1 {
  --primary-color: red;
}

.theme--2 {
  --primary-color: yellow;
}

.theme--3 {
  --primary-color: pink;
}

.theme--4 {
    --primary-color: green;
}

.theme--5 {
    --primary-color: purple;
}

.theme--6 {
    --primary-color: orange;
}
    
.theme--7 {
    --primary-color: blue;
}

/* button.css */
.button {
    background-color: var(--primary-color);
}

/* link.css */
.link {
    color: var(--primary-color);
}

/* icon.css */
.icon {
    color: var(--primary-color);
}

/* --------
demo styles
----------*/

button {
  all: unset;
  border: 1px solid black;
  padding: 0.5rem;
}

a {
  color: inherit;
}

svg {
  width: 1rem;
  height: 1rem;
}

const themes = document.querySelectorAll('fieldset input');

const selectorButton = document.getElementById('selector-button');
const selectorLink = document.getElementById('selector-link');
const selectorIcon = document.getElementById('selector-icon');

const inheritanceContainer = document.getElementById('inheritance-container');

themes.forEach((theme) => {
  theme.addEventListener('click', (e) => {
    const theme = e.target.value
    // set theme modifiers on button, link, icon
    selectorButton.className = `button--${theme}`;
    selectorLink.className = `link--${theme}`;
    selectorIcon.className = `icon--${theme}`;
    // set theme modifier on container
    inheritanceContainer.className = `theme--${theme}`;
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.