oib/aitbc
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

refactor(theme): remove light theme and enforce dark mode across all apps

Browse Source
This commit is contained in:
oib
2026-02-27 14:00:33 +01:00
parent 521f7ec04a
commit d023654e74
15 changed files with 89 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
website/assets/js/global-header.js
View File

@@ -1,15 +1,11 @@
(function () {
// Immediately restore theme on script load
const savedTheme = localStorage.getItem('theme') || localStorage.getItem('exchangeTheme');
if (savedTheme) {
if (savedTheme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
document.documentElement.classList.add('dark');
} else {
document.documentElement.removeAttribute('data-theme');
document.documentElement.classList.remove('dark');
}
}
// Always enforce dark theme
document.documentElement.setAttribute('data-theme', 'dark');
document.documentElement.classList.add('dark');
// Clean up any old user preferences
if (localStorage.getItem('theme')) localStorage.removeItem('theme');
if (localStorage.getItem('exchangeTheme')) localStorage.removeItem('exchangeTheme');
const NAV_ITEMS = [
{ key: 'home', label: 'Home', href: '/' },
@@ -19,8 +15,6 @@
{ key: 'docs', label: 'Docs', href: '/docs/index.html' },
];
const CTA = { label: 'Launch Marketplace', href: '/marketplace/' };
function determineActiveKey(pathname) {
if (pathname.startsWith('/explorer')) return 'explorer';
if (pathname.startsWith('/marketplace')) return 'marketplace';
@@ -48,81 +42,11 @@
</div>
</a>
<nav class="global-nav">${navLinks}</nav>
<div class="global-header__actions">
<button type="button" class="global-dark-toggle" data-role="global-theme-toggle">
<span class="global-dark-toggle__emoji">🌙</span>
<span class="global-dark-toggle__text">Dark</span>
</button>
</div>
</div>
</header>
`;
}
function getCurrentTheme() {
if (document.documentElement.hasAttribute('data-theme')) {
return document.documentElement.getAttribute('data-theme');
}
if (document.documentElement.classList.contains('dark')) return 'dark';
if (document.body && document.body.classList.contains('light')) return 'light';
return 'light';
}
function updateToggleLabel(theme) {
const emojiEl = document.querySelector('.global-dark-toggle__emoji');
const textEl = document.querySelector('.global-dark-toggle__text');
if (!emojiEl || !textEl) return;
if (theme === 'dark') {
emojiEl.textContent = '🌙';
textEl.textContent = 'Dark';
} else {
emojiEl.textContent = '☀️';
textEl.textContent = 'Light';
}
}
function setGlobalTheme(theme) {
if (theme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
document.documentElement.classList.add('dark');
document.body.classList.remove('light');
} else {
document.documentElement.removeAttribute('data-theme');
document.documentElement.classList.remove('dark');
document.body.classList.add('light');
}
localStorage.setItem('theme', theme);
localStorage.setItem('exchangeTheme', theme); // for backwards compat
}
function getGlobalTheme() {
return localStorage.getItem('theme') || localStorage.getItem('exchangeTheme') || 'dark';
}
function bindThemeToggle() {
const toggle = document.querySelector('[data-role="global-theme-toggle"]');
if (!toggle) return;
toggle.addEventListener('click', () => {
// Don't call window.toggleDarkMode anymore because it causes state desync.
// We take full control of the global theme here.
const current = getCurrentTheme();
const next = current === 'dark' ? 'light' : 'dark';
setGlobalTheme(next);
// If the page has a specific app-level override, trigger it
if (typeof window.setTheme === 'function' && window.location.pathname === '/') {
window.setTheme(next);
}
setTimeout(() => updateToggleLabel(getCurrentTheme()), 0);
});
updateToggleLabel(getCurrentTheme());
}
function initHeader() {
const activeKey = determineActiveKey(window.location.pathname);
const headerHTML = buildHeader(activeKey);
@@ -135,8 +59,6 @@
} else {
document.body.insertAdjacentHTML('afterbegin', headerHTML);
}
bindThemeToggle();
}
if (document.readyState === 'loading') {