Skip to content

Add color theme demo #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 20 commits into
base: main
Choose a base branch
from
+762 −0
Open

Add color theme demo #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
50a9e63
add color theme demo files
dvdherron Nov 3, 2025
19e1711
initial cleanup
dvdherron Nov 4, 2025
2b1cc45
add registered custom property example
dvdherron Nov 7, 2025
5640b09
add color-theme link to index page
dvdherron Nov 7, 2025
8e7571a
color variable cleanup
dvdherron Nov 11, 2025
c8e5c59
demo cleanup to match article
dvdherron Nov 17, 2025
ad320ad
adjust pressed state styles
dvdherron Nov 19, 2025
0ded3c6
review updates from article
dvdherron Nov 19, 2025
d7d2556
clean up color custom properties
dvdherron Nov 20, 2025
58a24f7
adjust js logic
dvdherron Nov 21, 2025
59c8d41
add transition to details
dvdherron Nov 21, 2025
42ed6f5
clean up timing variables
dvdherron Nov 24, 2025
cef5ce1
address review
dvdherron Nov 24, 2025
cdf23a4
clean up them switcher logic
dvdherron Nov 25, 2025
0d7bc30
add button to change base color
dvdherron Nov 25, 2025
93e1aff
Merge branch 'main' of https://github.com/oddbird/baseline-demos into…
jamesnw Nov 25, 2025
6efbed2
Simplify script
jamesnw Nov 25, 2025
1abd533
adjust pressed border color
dvdherron Nov 26, 2025
3a90da0
lighten surface background
dvdherron Nov 28, 2025
47f41ec
address review
dvdherron Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
170 changes: 170 additions & 0 deletions src/color-theme/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark" />
<title>Baseline Color Theme Demo</title>
<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>
</head>

<body>
<header class="page-header">
<nav data-nav="site">
<ul data-navlist="site">
<li> <a href="#"> playlists </a> </li>
<li> <a href="#"> features </a> </li>
<li><a href="#"> about </a> </li>
</ul>
</nav>
<details>
<summary data-button="summary">Light/Dark</summary>
<div id="theme-picker" class="dropdown">
<fieldset>
<legend>Color Scheme</legend>
<div data-options="theme">
<button data-button="" data-scheme="light" aria-pressed="false">Light</button>
<button data-button="" data-scheme="dark" aria-pressed="false">Dark</button>
<button data-button="" data-scheme="auto" aria-pressed="true">Auto</button>
<button data-button="" data-scheme="green" aria-pressed="false">Green</button>
</div>
</fieldset>
</div>
</details>
</header>
<main aria-labelledby="title">
<header class="content-header">
<h1 class="main-heading"> Baseline Radio</h1>
<p class="summary">the color theme <code>color-mix</code> playlist</p>
</header>
<ul class="playlist">
<li data-playlist-item="red">
<p data-song="">The Red Bus (Sequence 2)</p> <span class="top-pick"> top pick</span>
<p class="artist">Armando Trovajoli</p>
</li>
<li data-playlist-item="red">
<p data-song="">The Search for Cherry Red</p>
<p class="artist">The Kills</p>
</li>
<li data-playlist-item="red">
<p data-song="">Cherry Red</p> <span class="top-pick"> top pick</span>

<p class="artist">Ty Segall</p>
</li>
<li data-playlist-item="yellow">
<p data-song="yellow">Yellow Days</p>
<p class="artist">Cal Tjader &amp; Eddie Palmieri</p>
</li>
<li data-playlist-item="orange">
<p data-song="orange">Orange and Tan</p>
<p class="artist">James Devane</p>
</li>
<li data-playlist-item="green">
<p data-song="green">Green Eyes </p>
<span class="top-pick"> top pick</span>
<p class="artist">Eli Escobar </p>
</li>
<li data-playlist-item="green">
<p data-song="green">Green for Go</p>
<p class="artist">100% Manmade Fibre </p>
</li>
<li data-playlist-item="indigo">
<p data-song="indigo">music for indigo</p>
<p class="artist">Adrianne Lenker</p>
</li>
<li data-playlist-item="blue">
<p data-song="blue">Blue Moon</p>
<p class="artist">The Kills</p>
</li>
<li data-playlist-item="blue">
<p data-song="blue">Blue Pillow</p>
<p class="artist">Stark Reality</p>
</li>
<li data-playlist-item="purple">
<p data-song="purple highlight">My Purple Past</p>
<span class="top-pick"> top pick</span>
<p class="artist">Deerhoof</p>
</li>
<li data-playlist-item="purple">
<p data-song="purple">Angry Purple Birds</p>
<p class="artist">Theo Parrish</p>
</li>
<li data-playlist-item="black">
<p data-song="black">4 Blacks </p> <span class="top-pick"> top pick</span>
<p class="artist">Black Milk &amp; Nat Turner</p>
</li>
<li data-playlist-item="black">
<p data-song="black">Black Satin</p>
<p class="artist">Miles Davis</p>
</li>
<li data-playlist-item="pink">
<p data-song="pink">Pink + White</p>
<p class="artist">Frank Ocean</p>
</li>
<li data-playlist-item="pink">
<p data-song="pink">Pink Section</p>
<p class="artist">Thom Yorke</p>
</li>
<li data-playlist-item="white">
<p data-song="white highlight">By the Light of His White Stetson </p>
<span class="top-pick"> top pick</span>
<p class="artist">GracieHorse</p>
</li>
<li data-playlist-item="white">
<p data-song="white">My White Bicycle</p>
<p class="artist">Tomorrow</p>
</li>
</ul>

</main>

<div data-layout="footer">
<aside data-layout="contact-form">
<div>
<h2>Want to request a song? Have an idea for a playlist?</h2>
<p>Send us a message by filling out our contact form.</p>
</div>
<form data-form="">
<div class="field-group">
<div data-field="">
<label for="name">Name</label>
<input id="name" type="text" data-input="text" name="name" required="">
</div>
<div data-field="">
<label for="email">Email</label>
<input id="email" data-input="text email" type="email" name="email" required="">
</div>
</div>
<div data-field="">
<label for="message">Message</label>
<textarea id="message" type="textarea" data-input="text" required="" name="message"></textarea>
</div>
<div class="form-action">
<button data-button="">Send</button>
</div>
</form>
</aside>
<footer role="contentinfo" class="main-footer">
<nav data-nav="footer">
<ul data-navlist="footer">
<li>
<a href="#">Contact Us</a>
</li>
<li>
<a href="#">Help</a>
</li>
<li>
<a href="#">Host a Show</a>
</li>
<li>
<a href="#">Archives</a>
</li>
</ul>
</nav>
<p class="legal">&#169; 2025 Baseline Radio </p>
</footer>
</div>
</body>
</html>
46 changes: 46 additions & 0 deletions src/color-theme/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
const storageKey = "data-scheme";
const pressedButton = '[data-scheme][aria-pressed="true"]';

const getColorPreference = () => {
const storedScheme = localStorage.getItem(storageKey);
if (storedScheme) return storedScheme;
else
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
};

const setScheme = (scheme) => {
// Switch to the new scheme
document.documentElement.setAttribute("data-scheme", scheme);
// Remove aria-pressed from the previously selected button
document.querySelector(pressedButton)?.setAttribute("aria-pressed", "false");
// Set aria-pressed on the newly selected button
const target = document.querySelector(
`[data-button][data-scheme="${scheme}"]`
);
target?.setAttribute("aria-pressed", "true");
// Persist to localStorage
localStorage.setItem(storageKey, scheme);
};

const handleSchemeSelection = (event) => {
const target = event.currentTarget;
const isPressed = target.getAttribute("aria-pressed");
const scheme = target.getAttribute("data-scheme");
if (isPressed !== "true" && scheme) {
setScheme(scheme);
}
};

window.onload = () => {
const colorPreference = getColorPreference();
setScheme(colorPreference);

const themePicker = document.querySelector(`[data-options="theme"]`);
const schemeButtons = themePicker?.querySelectorAll(`[data-scheme]`);

schemeButtons?.forEach((button) => {
button.addEventListener("click", handleSchemeSelection);
});
};
Loading