Skip to content

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

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

Draft
Copilot wants to merge 6 commits into
base: main
Choose a base branch
from
+686 −16
Draft

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b45b1c6
Initial plan
Copilot Mar 3, 2026
7ccf9c4
Add light/dark mode support with navigation toggle button
Copilot Mar 3, 2026
47209e3
Simplify toggle to icon-only light/dark, fix team dark mode, fix char…
Copilot Mar 3, 2026
01e3ad9
Plan: event detail dark mode, nav text fix, team name centering
Copilot Mar 3, 2026
e57674b
Plan: live chart colour updates on theme switch + pending dark mode f…
Copilot Mar 3, 2026
72306a7
Fix dark mode: result box, live chart updates, event page white box
Copilot Mar 3, 2026
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
61 changes: 61 additions & 0 deletions _includes/random-number-generator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,67 @@ <h3 id="result-header" class="result-header"></h3>
}
}

/* Dark mode overrides */
[data-theme="dark"] .form-label {
color: #d1d5db;
}

[data-theme="dark"] .form-input {
background: #374151;
border-color: #4b5563;
color: #f9fafb;
}

[data-theme="dark"] .form-input:focus {
background: #1f2937;
border-color: #667eea;
}

[data-theme="dark"] .form-input:hover {
background: #374151;
border-color: #6b7280;
}

[data-theme="dark"] .card.result-card {
background: #1f2937;
border-color: #059669;
}

[data-theme="dark"] .result-header {
color: #34d399;
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .form-label {
color: #d1d5db;
}

:root:not([data-theme="light"]) .form-input {
background: #374151;
border-color: #4b5563;
color: #f9fafb;
}

:root:not([data-theme="light"]) .form-input:focus {
background: #1f2937;
border-color: #667eea;
}

:root:not([data-theme="light"]) .form-input:hover {
background: #374151;
border-color: #6b7280;
}

:root:not([data-theme="light"]) .card.result-card {
background: #1f2937;
border-color: #059669;
}

:root:not([data-theme="light"]) .result-header {
color: #34d399;
}
}

/* Mobile responsive */
@media (max-width: 640px) {
.random-generator-container {
Expand Down
64 changes: 64 additions & 0 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Theme: apply saved preference immediately to avoid flash of wrong theme -->
<script>
try {
var savedTheme = localStorage.getItem('theme-preference');
if (savedTheme === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
else if (savedTheme === 'light') document.documentElement.setAttribute('data-theme', 'light');
} catch(e) {}
</script>
<title>{% if page.title %}{{ page.title }} – {% endif %}{{ site.name }} – {{ site.description }}</title>
{% seo title=false %}
{% include meta.html %}
Expand Down Expand Up @@ -71,6 +79,7 @@ <h1 class="site-name">{{ site.name }}</h1>
<span class="nav-icon">🤝</span>
<span class="nav-text">Join us!</span>
</a>
<button class="theme-toggle-btn" id="theme-toggle" aria-label="Switch color theme" title="Switch color theme"></button>
</nav>
</div>
</div>
Expand Down Expand Up @@ -138,5 +147,60 @@ <h1 class="site-name">{{ site.name }}</h1>
}
});
</script>
<!-- Theme toggle script -->
<script>
(function() {
var STORAGE_KEY = 'theme-preference';

var ICONS = {
light: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>',
dark: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>'
};

function getStoredTheme() {
try { return localStorage.getItem(STORAGE_KEY); } catch(e) { return null; }
}

function getEffectiveTheme() {
var stored = getStoredTheme();
if (stored === 'dark' || stored === 'light') return stored;
return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
}

function applyTheme(theme) {
try { localStorage.setItem(STORAGE_KEY, theme); } catch(e) {}
document.documentElement.setAttribute('data-theme', theme);
updateButton(theme);
document.dispatchEvent(new CustomEvent('themechange'));
}

function updateButton(theme) {
var btn = document.getElementById('theme-toggle');
if (btn) {
btn.innerHTML = ICONS[theme];
btn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
btn.setAttribute('title', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
}
}

document.addEventListener('DOMContentLoaded', function() {
// Migrate any legacy 'system' value
var stored = getStoredTheme();
if (stored && stored !== 'light' && stored !== 'dark') {
try { localStorage.removeItem(STORAGE_KEY); } catch(e) {}
document.documentElement.removeAttribute('data-theme');
}

updateButton(getEffectiveTheme());

var btn = document.getElementById('theme-toggle');
if (btn) {
btn.addEventListener('click', function() {
applyTheme(getEffectiveTheme() === 'dark' ? 'light' : 'dark');
});
}
});
})();
</script>
</body>
</html>
91 changes: 91 additions & 0 deletions _layouts/event.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,97 @@
display: none;
}
}

/* Dark mode overrides */
[data-theme="dark"] .event-detail-card {
background: #1f2937;
border-color: #374151;
}

[data-theme="dark"] .event-detail-title {
color: #f9fafb;
}

[data-theme="dark"] .event-meta-section {
border-bottom-color: #374151;
}

[data-theme="dark"] .meta-badge {
background: #374151;
color: #d1d5db;
}

[data-theme="dark"] .talk-card {
background: #111827;
border-color: #374151;
}

[data-theme="dark"] .talk-title {
color: #f9fafb;
}

[data-theme="dark"] .slides-container,
[data-theme="dark"] .video-container {
background: #1f2937;
border-color: #374151;
}

[data-theme="dark"] .slides-container h4,
[data-theme="dark"] .video-container h4 {
color: #d1d5db;
}

[data-theme="dark"] .no-slides-message {
background: rgba(245, 158, 11, 0.1);
border-color: #d97706;
color: #fcd34d;
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .event-detail-card {
background: #1f2937;
border-color: #374151;
}

:root:not([data-theme="light"]) .event-detail-title {
color: #f9fafb;
}

:root:not([data-theme="light"]) .event-meta-section {
border-bottom-color: #374151;
}

:root:not([data-theme="light"]) .meta-badge {
background: #374151;
color: #d1d5db;
}

:root:not([data-theme="light"]) .talk-card {
background: #111827;
border-color: #374151;
}

:root:not([data-theme="light"]) .talk-title {
color: #f9fafb;
}

:root:not([data-theme="light"]) .slides-container,
:root:not([data-theme="light"]) .video-container {
background: #1f2937;
border-color: #374151;
}

:root:not([data-theme="light"]) .slides-container h4,
:root:not([data-theme="light"]) .video-container h4 {
color: #d1d5db;
}

:root:not([data-theme="light"]) .no-slides-message {
background: rgba(245, 158, 11, 0.1);
border-color: #d97706;
color: #fcd34d;
}
}
</style>

{% assign event_date = page.date | date: "%Y-%m-%d" %}
Expand Down
Loading