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

Merged
dvdherron merged 26 commits into from
Dec 9, 2025
+768 −0
Merged

Add color theme demo #5

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
26 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
bd14473
clean up footer
dvdherron Dec 2, 2025
743f00b
Fix initial flash
jamesnw Dec 3, 2025
61f9507
fix theme button state
dvdherron Dec 4, 2025
3165032
Avoid race
jamesnw Dec 4, 2025
50a28a6
update playlist, clean up spacing
dvdherron Dec 4, 2025
f6030cd
clean up spacing
dvdherron Dec 5, 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
154 changes: 154 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,154 @@
<!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>
<ul class="nav-list">
<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">
<p>Baseline Radio footer information</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);
Copy link
Author

@dvdherron dvdherron Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jamesnw I think setting this attribute has to happen a bit earlier to prevent the flash that could happen if the storageKey is different from the OS setting. What do you think is the best way to adjust that?

Copy link
Collaborator

@jamesnw jamesnw Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I fixed it- I was syncing from localStorage on window.load, but that's too late, so I moved it outside of that callback.

Copy link
Author

@dvdherron dvdherron Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jamesnw Thanks! This fixed the flash but the aria-pressed state wasn't updating since they aren't visible in the DOM until later (if you refreshed the page "Auto" was always pressed).

I think we have to also call setScheme again on load? I made that change in 61f9507 .

Copy link
Collaborator

@jamesnw jamesnw Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

D'oh, this was all in the original code. Sorry. I added a comment for future me, and also re-checked the stored color theme, just to prevent the unlikely case that the color theme has changed.

Copy link
Author

@dvdherron dvdherron Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No worries! Changes look good 🙏🏽

// 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