Skip to content
This repository was archived by the owner on Apr 9, 2026. It is now read-only.

Commit a9ff2f9

Browse files
MrRoweyMrRowey
committed
Add faction theme selector and improve footer UX
- Updated theme toggle text to 'Toggle Dark/Light Mode' for clarity - Added faction theme selector with Default, Aeon, UEF, Cybran, and Sera options - Faction themes dynamically update site colors (links, accents, highlights) - Theme preferences persist via localStorage - Adjusted grid layout to 1fr 3fr 1fr for better sidebar balance - Improved patch card hover transitions for smoother animation
1 parent 20b494d commit a9ff2f9

4 files changed

Lines changed: 211 additions & 2 deletions

File tree

‎pages/2026/3830.html‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -924,7 +924,7 @@ <h4 class="FooterTitle">Quick Actions</h4>
924924
<div class="FooterActions">
925925
<button id="themeToggleButton" class="ThemeToggle">
926926
<i class="fas fa-palette" aria-hidden="true"></i>
927-
<span class="ToggleText">Toggle Theme</span>
927+
<span class="ToggleText">Toggle Dark/Light Mode</span>
928928
</button>
929929
<button class="PrintButton" onclick="window.print()">
930930
<i class="fas fa-print" aria-hidden="true"></i>
@@ -933,6 +933,33 @@ <h4 class="FooterTitle">Quick Actions</h4>
933933
</div>
934934
</div>
935935

936+
<!-- Faction Theme Section -->
937+
<div class="FooterSection">
938+
<h4 class="FooterTitle">Faction Theme</h4>
939+
<div class="FactionThemes">
940+
<button class="FactionButton active" data-faction="default" aria-label="Default theme">
941+
<span class="FactionIcon">⚔️</span>
942+
<span class="FactionLabel">Default</span>
943+
</button>
944+
<button class="FactionButton" data-faction="aeon" aria-label="Aeon theme">
945+
<img src="/assets/images/faction/Aeon.svg" alt="Aeon" class="FactionLogo">
946+
<span class="FactionLabel">Aeon</span>
947+
</button>
948+
<button class="FactionButton" data-faction="uef" aria-label="UEF theme">
949+
<img src="/assets/images/faction/UEF.svg" alt="UEF" class="FactionLogo">
950+
<span class="FactionLabel">UEF</span>
951+
</button>
952+
<button class="FactionButton" data-faction="cybran" aria-label="Cybran theme">
953+
<img src="/assets/images/faction/Cybran.svg" alt="Cybran" class="FactionLogo">
954+
<span class="FactionLabel">Cybran</span>
955+
</button>
956+
<button class="FactionButton" data-faction="sera" aria-label="Seraphim theme">
957+
<img src="/assets/images/faction/Seraphim.svg" alt="Seraphim" class="FactionLogo">
958+
<span class="FactionLabel">Sera</span>
959+
</button>
960+
</div>
961+
</div>
962+
936963
<!-- About Section -->
937964
<div class="FooterSection">
938965
<h4 class="FooterTitle">About</h4>

‎scripts/coreUI.js‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,120 @@
248248
window.addEventListener('stylesLoaded', updateBackground);
249249
}
250250

251+
// ========================================
252+
// FACTION THEME MANAGEMENT
253+
// ========================================
254+
255+
const FACTION_KEY = 'factionTheme';
256+
257+
const FACTION_COLORS = {
258+
default: {
259+
primary: '#4a9eff',
260+
secondary: '#2e7dd1',
261+
accent: '#3b8ed9'
262+
},
263+
aeon: {
264+
primary: '#2ecc71',
265+
secondary: '#27ae60',
266+
accent: '#1e8449'
267+
},
268+
uef: {
269+
primary: '#3498db',
270+
secondary: '#2980b9',
271+
accent: '#21618c'
272+
},
273+
cybran: {
274+
primary: '#e74c3c',
275+
secondary: '#c0392b',
276+
accent: '#922b21'
277+
},
278+
sera: {
279+
primary: '#f39c12',
280+
secondary: '#e67e22',
281+
accent: '#d35400'
282+
}
283+
};
284+
285+
/**
286+
* Apply faction theme colors
287+
* @param {string} faction - 'default', 'aeon', 'uef', 'cybran', or 'sera'
288+
*/
289+
function applyFactionTheme(faction) {
290+
const colors = FACTION_COLORS[faction] || FACTION_COLORS.default;
291+
const root = document.documentElement;
292+
293+
// Apply CSS custom properties
294+
root.style.setProperty('--Link', colors.primary);
295+
root.style.setProperty('--Link-Hover', colors.secondary);
296+
root.style.setProperty('--Icon-Glow', colors.accent);
297+
298+
// Save preference
299+
try {
300+
localStorage.setItem(FACTION_KEY, faction);
301+
} catch (e) {
302+
console.warn('Unable to save faction theme preference');
303+
}
304+
305+
// Update button states
306+
updateFactionButtons(faction);
307+
308+
// Show notification
309+
const factionName = faction.charAt(0).toUpperCase() + faction.slice(1);
310+
showThemeNotification(`${factionName} theme applied`);
311+
}
312+
313+
/**
314+
* Update faction button active states
315+
* @param {string} activeFaction - The currently active faction
316+
*/
317+
function updateFactionButtons(activeFaction) {
318+
const buttons = document.querySelectorAll('.FactionButton');
319+
buttons.forEach(button => {
320+
const faction = button.getAttribute('data-faction');
321+
if (faction === activeFaction) {
322+
button.classList.add('active');
323+
} else {
324+
button.classList.remove('active');
325+
}
326+
});
327+
}
328+
329+
/**
330+
* Load saved faction theme
331+
*/
332+
function loadFactionTheme() {
333+
let savedFaction = 'default';
334+
335+
try {
336+
savedFaction = localStorage.getItem(FACTION_KEY) || 'default';
337+
} catch (e) {
338+
console.warn('Unable to load faction theme preference');
339+
}
340+
341+
applyFactionTheme(savedFaction);
342+
}
343+
344+
/**
345+
* Initialize faction theme management
346+
*/
347+
function initFactionTheme() {
348+
loadFactionTheme();
349+
350+
// Add event listeners to faction buttons
351+
const factionButtons = document.querySelectorAll('.FactionButton');
352+
factionButtons.forEach(button => {
353+
button.addEventListener('click', () => {
354+
const faction = button.getAttribute('data-faction');
355+
applyFactionTheme(faction);
356+
});
357+
});
358+
359+
// Expose function globally
360+
window.factionThemeManager = {
361+
applyTheme: applyFactionTheme
362+
};
363+
}
364+
251365
// ========================================
252366
// STYLE LOADING MANAGEMENT
253367
// ========================================
@@ -436,6 +550,7 @@
436550
function init() {
437551
initTheme();
438552
initBackground();
553+
initFactionTheme();
439554
initStyleLoader();
440555
initRandomFactions();
441556
}

‎style/components/patch_footer.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,3 +145,70 @@
145145
align-items: center;
146146
gap: 6px; /* Reduced from 8px */
147147
}
148+
/* ========================================
149+
FACTION THEME SELECTOR
150+
======================================== */
151+
152+
.FactionThemes {
153+
display: flex;
154+
flex-wrap: wrap;
155+
gap: 8px;
156+
justify-content: flex-start;
157+
}
158+
159+
.FactionButton {
160+
display: flex;
161+
flex-direction: column;
162+
align-items: center;
163+
justify-content: center;
164+
gap: 4px;
165+
background: var(--Card);
166+
border: 2px solid var(--Line);
167+
border-radius: 8px;
168+
padding: 8px 12px;
169+
cursor: pointer;
170+
transition: all 0.3s ease;
171+
font-family: inherit;
172+
font-size: 0.7em;
173+
color: var(--Text-Secondary);
174+
min-width: 70px;
175+
}
176+
177+
.FactionButton:hover {
178+
background: var(--added);
179+
border-color: var(--Link);
180+
transform: translateY(-2px);
181+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
182+
}
183+
184+
.FactionButton.active {
185+
background: var(--Link);
186+
border-color: var(--Link);
187+
color: white;
188+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
189+
}
190+
191+
.FactionLogo {
192+
width: 28px;
193+
height: 28px;
194+
object-fit: contain;
195+
filter: brightness(0.8);
196+
transition: filter 0.3s ease;
197+
}
198+
199+
.FactionButton:hover .FactionLogo,
200+
.FactionButton.active .FactionLogo {
201+
filter: brightness(1.2);
202+
}
203+
204+
.FactionIcon {
205+
font-size: 1.8em;
206+
display: block;
207+
}
208+
209+
.FactionLabel {
210+
display: block;
211+
font-weight: 600;
212+
text-align: center;
213+
white-space: nowrap;
214+
}

‎style/components/patch_layout.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
.Grid {
66
padding: 8px; /* Reduced from 10px */
77
display: grid;
8-
grid-template-columns: 1fr 3fr 0.75fr;
8+
grid-template-columns: 1fr 3fr 1fr;
99
gap: 16px; /* Reduced from 20px */
1010
margin: 0;
1111
padding-left: 0 !important;

0 commit comments

Comments
 (0)