Dark mode: fix nav text, team name centering, event/RNG page whites, live chart colour updates

[Copilot]

Several pages had incomplete dark mode support, and chart colours only updated after a full page reload.

Nav bar & team page

• Nav links were overridden to indigo (#818cf8) by the generic a {} dark-mode rule in style.scss — fixed by adding an explicit .nav-link override inside the dark-theme mixin
• Team member name (h3) and role were text-align: left — changed to center to match the rest of the card

Event detail page (event.html)

Hard-coded white/light backgrounds in the inline <style> block. Added [data-theme="dark"] + @media (prefers-color-scheme: dark) overrides for:

• .event-detail-card (the large white box)
• .talk-card, .slides-container, .video-container
• .meta-badge, .event-detail-title, h4 inline colours, .no-slides-message

Random number generator (random-number-generator.html + generate-random-numbers.js)

• CSS overrides added for .form-label, .form-input, .result-card, .result-header
• Root cause of the persistent white result box: generate-random-numbers.js was writing resultCard.style.background and resultHeader.style.color as inline styles (specificity 1,0,0), which defeated every CSS rule. Fixed by reading the active theme at call time and applying the correct value directly:

const isDark = attr === 'dark' ||
  (!attr && window.matchMedia?.('(prefers-color-scheme: dark)').matches);

resultCard.style.background = isDark ? '#1f2937' : 'linear-gradient(...)';
resultHeader.style.color    = isDark ? '#34d399' : '#065f46';

Live chart colour updates (default.html + statistics.md)

Charts read isDark once at DOMContentLoaded; toggling the mode had no effect without a reload.

• applyTheme() in default.html now dispatches a themechange CustomEvent after applying the new theme
• statistics.md extracts a getChartColors() helper, stores all three Chart.js instances in a chartInstances[] array, and listens for themechange to update tick/grid colours and call chart.update('none') on each — no reload needed

document.addEventListener('themechange', function() {
  const { tickColor, gridColor } = getChartColors();
  chartInstances.forEach(function(chart) {
    if (chart.options.scales?.y?.ticks) chart.options.scales.y.ticks.color = tickColor;
    if (chart.options.scales?.y?.grid)  chart.options.scales.y.grid.color  = gridColor;
    if (chart.options.scales?.x?.ticks) chart.options.scales.x.ticks.color = tickColor;
    chart.update('none');
  });
});

Note: the "Interactive charts unavailable" fallback visible in local preview is pre-existing and intentional — it triggers when the CDN (cdn.jsdelivr.net) is unreachable (e.g. in sandboxed environments). Charts load normally on the live GitHub Pages site.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Light/dark mode support</issue_title>
<issue_description>It looks like there is currently no Support for light and dark mode so please implement this make sure it's implemented on all the different sub pages and share screenshots once you've done the implementation Thank you</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Light/dark mode support #155

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
cloudnativelinz-github-io	Ready	Preview, Comment	Mar 3, 2026 0:57am