Skip to content

Add global dynamic theme hue slider to Settings#2

Draft
Copilot wants to merge 2 commits into
mainfrom
copilot/dynamic-theme-slider
Draft

Add global dynamic theme hue slider to Settings#2
Copilot wants to merge 2 commits into
mainfrom
copilot/dynamic-theme-slider

Conversation

Copilot AI commented May 29, 2026

Copy link
Copy Markdown

This change introduces a dynamic theme control so players can shift the game’s color styling at runtime from Settings. The selected theme hue is applied globally and restored across sessions.

  • Theme control in Settings

    • Added a new Theme hue range slider to .settings-menu-ui > .container.
    • Slider is injected once when Settings UI appears, without modifying bundled game code paths.
  • Global runtime theming

    • Added a dedicated mod script (mods/dynamic_theme.js) and loaded it from index.html.
    • The script sets a root CSS variable (--cwctrack-theme-hue) and applies:
      • filter: hue-rotate(var(--cwctrack-theme-hue))
      • to #screen, #ui, and #transition-layer so the theme affects the full game presentation.
  • Persistence

    • Hue value is stored in localStorage (cwctrackThemeHue) and restored on startup.
    • Input values are clamped to 0..360 before apply/store.
  • Focused automated coverage

    • Extended tests/main-menu.spec.js with a targeted test that verifies the slider exists and updates the theme CSS variable.
slider.addEventListener("input", () => {
  const hue = clampHue(Number(slider.value));
  document.documentElement.style.setProperty("--cwctrack-theme-hue", `${hue}deg`);
  localStorage.setItem("cwctrackThemeHue", String(hue));
});

Copilot AI linked an issue May 29, 2026 that may be closed by this pull request
Copilot AI changed the title [WIP] Add dynamic theme slider for game styling Add global dynamic theme hue slider to Settings May 29, 2026
Copilot finished work on behalf of cwcinc May 29, 2026 20:47
Copilot AI requested a review from cwcinc May 29, 2026 20:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[ REQUEST ] Dynamic Theme

2 participants