@ -10,11 +10,13 @@
@@ -10,11 +10,13 @@
type TextSize = 'small' | 'medium' | 'large';
type LineSpacing = 'tight' | 'normal' | 'loose';
type ContentWidth = 'narrow' | 'medium' | 'wide';
type DesignTheme = 'fog' | 'forum' | 'terminal' | 'socialmedia';
let textSize = $state< TextSize > ('medium');
let lineSpacing = $state< LineSpacing > ('normal');
let contentWidth = $state< ContentWidth > ('medium');
let isDark = $state(false);
let designTheme = $state< DesignTheme > ('fog');
let expiringEvents = $state(false);
let includeClientTag = $state(true);
@ -36,11 +38,17 @@
@@ -36,11 +38,17 @@
const storedLineSpacing = localStorage.getItem('lineSpacing') as LineSpacing | null;
const storedContentWidth = localStorage.getItem('contentWidth') as ContentWidth | null;
const storedTheme = localStorage.getItem('theme');
const storedDesignTheme = localStorage.getItem('designTheme') as DesignTheme | null;
textSize = storedTextSize || 'medium';
lineSpacing = storedLineSpacing || 'normal';
contentWidth = storedContentWidth || 'medium';
designTheme = storedDesignTheme || 'fog';
// Terminal theme always uses dark mode
if (designTheme === 'terminal') {
isDark = true;
} else {
// Read theme from localStorage first, then fallback to DOM/system preference
if (storedTheme) {
isDark = storedTheme === 'dark';
@ -48,6 +56,7 @@
@@ -48,6 +56,7 @@
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
isDark = document.documentElement.classList.contains('dark') || prefersDark;
}
}
// Apply preferences immediately to ensure consistent layout
applyPreferences();
@ -120,6 +129,15 @@
@@ -120,6 +129,15 @@
document.documentElement.setAttribute('data-content-width', contentWidth);
localStorage.setItem('contentWidth', contentWidth);
// Apply design theme
document.documentElement.setAttribute('data-design-theme', designTheme);
localStorage.setItem('designTheme', designTheme);
// Terminal theme always uses dark mode
if (designTheme === 'terminal') {
isDark = true;
}
// Apply theme
if (isDark) {
document.documentElement.classList.add('dark');
@ -145,11 +163,24 @@
@@ -145,11 +163,24 @@
applyPreferences();
}
function handleThemeToggle() {
function handleModeToggle() {
// Terminal theme always uses dark mode - don't allow toggling
if (designTheme === 'terminal') {
return;
}
isDark = !isDark;
applyPreferences();
}
function handleDesignThemeChange(theme: DesignTheme) {
designTheme = theme;
// Terminal theme always uses dark mode
if (theme === 'terminal') {
isDark = true;
}
applyPreferences();
}
function handleExpiringEventsToggle() {
expiringEvents = !expiringEvents;
localStorage.setItem('aitherboard_expiringEvents', expiringEvents ? 'true' : 'false');
@ -264,22 +295,73 @@
@@ -264,22 +295,73 @@
< / p >
< / div >
<!-- Them e Toggle -->
<!-- Mod e Toggle -->
< div class = "preference-section bg-fog-post dark:bg-fog-dark-post border border-fog-border dark:border-fog-dark-border p-4 rounded" >
< div class = "preference-label mb-3" >
< span class = "font-semibold text-fog-text dark:text-fog-dark-text" > Them e< / span >
< span class = "font-semibold text-fog-text dark:text-fog-dark-text" > Mod e< / span >
< / div >
< div class = "preference-controls" >
< button
onclick={ handleThem eToggle }
onclick={ handleMod eToggle }
class="toggle-button"
class:active={ isDark }
aria-label={ isDark ? 'Switch to light mode' : 'Switch to dark mode' }
disabled={ designTheme === 'terminal' }
aria-label={ designTheme === 'terminal' ? 'Terminal theme is always dark' : ( isDark ? 'Switch to light mode' : 'Switch to dark mode' )}
title={ designTheme === 'terminal' ? 'Terminal theme is always dark' : undefined }
>
< Icon name = { isDark ? 'sun' : 'moon' } size= { 16 } />
< span > { isDark ? 'Light' : 'Dark' } </ span >
< / button >
{ #if designTheme === 'terminal' }
< span class = "text-fog-text-light dark:text-fog-dark-text-light ml-2" style = "font-size: 0.875em;" >
(Terminal theme is always dark)
< / span >
{ /if }
< / div >
< / div >
<!-- Design Theme -->
< div class = "preference-section bg-fog-post dark:bg-fog-dark-post border border-fog-border dark:border-fog-dark-border p-4 rounded" >
< div class = "preference-label mb-3" >
< span class = "font-semibold text-fog-text dark:text-fog-dark-text" > Design Theme< / span >
< / div >
< div class = "preference-controls" >
< button
onclick={() => handleDesignThemeChange ( 'fog' )}
class="option-button"
class:active={ designTheme === 'fog' }
aria-label="Fog theme"
>
Fog
< / button >
< button
onclick={() => handleDesignThemeChange ( 'forum' )}
class="option-button"
class:active={ designTheme === 'forum' }
aria-label="forum theme"
>
Forum
< / button >
< button
onclick={() => handleDesignThemeChange ( 'terminal' )}
class="option-button"
class:active={ designTheme === 'terminal' }
aria-label="Terminal theme"
>
Terminal
< / button >
< button
onclick={() => handleDesignThemeChange ( 'socialmedia' )}
class="option-button"
class:active={ designTheme === 'socialmedia' }
aria-label="socialmedia theme"
>
Social Media
< / button >
< / div >
< p class = "text-fog-text-light dark:text-fog-dark-text-light mt-2" style = "font-size: 0.875em;" >
Choose a design theme to change the visual style of the interface.
< / p >
< / div >
<!-- Text Size -->
