Fretux/anomaly-front-stats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #7 from Fretuks/add-dark/light-mode-styling-and-toggle

Browse Source 
Add light/dark red theme with toggle and refresh styling
This commit is contained in:
Fretux
2026-01-14 21:58:16 +01:00
committed by GitHub
parent 67c7e8995d 33be541cf9
commit c4537535ea
5 changed files with 396 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+280 -204
View File
File diff suppressed because it is too large Load Diff
templates/about_us.html
+29 -3
View File
@@ -19,14 +19,20 @@
<p class="af-subtitle">The Founders</p>
</div>
</div>
<button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
Menu
</button>
<nav class="af-nav" id="af-nav" aria-label="Primary">
<a class="af-nav-link" href="{{ url_for('index') }}">Home</a>
<a class="af-nav-link" href="{{ url_for('calculator') }}">Calculator</a>
<a class="af-nav-link" href="{{ url_for('suggestion') }}">Feedback</a>
</nav>
<div class="af-header-actions">
<button class="af-theme-toggle" type="button" aria-pressed="false">
<span class="af-theme-toggle-indicator" aria-hidden="true"></span>
<span class="af-theme-toggle-label">Dark mode</span>
</button>
<button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
Menu
</button>
</div>
</header>
<main class="af-shell">
@@ -104,6 +110,26 @@
<script>
const navToggle = document.querySelector('.af-nav-toggle');
const nav = document.getElementById('af-nav');
const themeToggle = document.querySelector('.af-theme-toggle');
const themeLabel = document.querySelector('.af-theme-toggle-label');
const THEME_KEY = 'af-theme';
const setTheme = (theme) => {
document.body.classList.toggle('theme-dark', theme === 'dark');
document.body.classList.toggle('theme-light', theme === 'light');
themeToggle.setAttribute('aria-pressed', theme === 'dark');
themeLabel.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
localStorage.setItem(THEME_KEY, theme);
};
const storedTheme = localStorage.getItem(THEME_KEY);
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
setTheme(storedTheme || (prefersDark ? 'dark' : 'light'));
themeToggle.addEventListener('click', () => {
const isDark = document.body.classList.contains('theme-dark');
setTheme(isDark ? 'light' : 'dark');
});
navToggle.addEventListener('click', () => {
const isOpen = nav.classList.toggle('is-open');
templates/calculator.html
+29 -3
View File
@@ -19,14 +19,20 @@
<p class="af-subtitle">Weapon Factory</p>
</div>
</div>
<button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
Menu
</button>
<nav class="af-nav" id="af-nav" aria-label="Primary">
<a class="af-nav-link" href="{{ url_for('index') }}">Home</a>
<a class="af-nav-link" href="{{ url_for('suggestion') }}">Feedback</a>
<a class="af-nav-link" href="{{ url_for('about_us') }}">About</a>
</nav>
<div class="af-header-actions">
<button class="af-theme-toggle" type="button" aria-pressed="false">
<span class="af-theme-toggle-indicator" aria-hidden="true"></span>
<span class="af-theme-toggle-label">Dark mode</span>
</button>
<button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
Menu
</button>
</div>
</header>
<main class="af-shell">
<section class="af-hero">
@@ -205,6 +211,26 @@
<script>
const navToggle = document.querySelector('.af-nav-toggle');
const nav = document.getElementById('af-nav');
const themeToggle = document.querySelector('.af-theme-toggle');
const themeLabel = document.querySelector('.af-theme-toggle-label');
const THEME_KEY = 'af-theme';
const setTheme = (theme) => {
document.body.classList.toggle('theme-dark', theme === 'dark');
document.body.classList.toggle('theme-light', theme === 'light');
themeToggle.setAttribute('aria-pressed', theme === 'dark');
themeLabel.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
localStorage.setItem(THEME_KEY, theme);
};
const storedTheme = localStorage.getItem(THEME_KEY);
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
setTheme(storedTheme || (prefersDark ? 'dark' : 'light'));
themeToggle.addEventListener('click', () => {
const isDark = document.body.classList.contains('theme-dark');
setTheme(isDark ? 'light' : 'dark');
});
navToggle.addEventListener('click', () => {
const isOpen = nav.classList.toggle('is-open');
templates/index.html
+29 -3
View File
@@ -19,14 +19,20 @@
<p class="af-subtitle">Operations hub</p>
</div>
</div>
<button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
Menu
</button>
<nav class="af-nav" id="af-nav" aria-label="Primary">
<a class="af-nav-link" href="{{ url_for('calculator') }}">Calculator</a>
<a class="af-nav-link" href="{{ url_for('suggestion') }}">Feedback</a>
<a class="af-nav-link" href="{{ url_for('about_us') }}">About</a>
</nav>
<div class="af-header-actions">
<button class="af-theme-toggle" type="button" aria-pressed="false">
<span class="af-theme-toggle-indicator" aria-hidden="true"></span>
<span class="af-theme-toggle-label">Dark mode</span>
</button>
<button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
Menu
</button>
</div>
</header>
<main class="af-shell">
<section class="af-hero">
@@ -86,6 +92,26 @@
<script>
const navToggle = document.querySelector('.af-nav-toggle');
const nav = document.getElementById('af-nav');
const themeToggle = document.querySelector('.af-theme-toggle');
const themeLabel = document.querySelector('.af-theme-toggle-label');
const THEME_KEY = 'af-theme';
const setTheme = (theme) => {
document.body.classList.toggle('theme-dark', theme === 'dark');
document.body.classList.toggle('theme-light', theme === 'light');
themeToggle.setAttribute('aria-pressed', theme === 'dark');
themeLabel.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
localStorage.setItem(THEME_KEY, theme);
};
const storedTheme = localStorage.getItem(THEME_KEY);
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
setTheme(storedTheme || (prefersDark ? 'dark' : 'light'));
themeToggle.addEventListener('click', () => {
const isDark = document.body.classList.contains('theme-dark');
setTheme(isDark ? 'light' : 'dark');
});
navToggle.addEventListener('click', () => {
const isOpen = nav.classList.toggle('is-open');
templates/suggestion.html
+29 -3
View File
@@ -19,14 +19,20 @@
<p class="af-subtitle">Radio Tower</p>
</div>
</div>
<button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
Menu
</button>
<nav class="af-nav" id="af-nav" aria-label="Primary">
<a class="af-nav-link" href="{{ url_for('index') }}">Home</a>
<a class="af-nav-link" href="{{ url_for('calculator') }}">Calculator</a>
<a class="af-nav-link" href="{{ url_for('about_us') }}">About</a>
</nav>
<div class="af-header-actions">
<button class="af-theme-toggle" type="button" aria-pressed="false">
<span class="af-theme-toggle-indicator" aria-hidden="true"></span>
<span class="af-theme-toggle-label">Dark mode</span>
</button>
<button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
Menu
</button>
</div>
</header>
<main class="af-shell">
<section class="af-card">
@@ -65,6 +71,26 @@
<script>
const navToggle = document.querySelector('.af-nav-toggle');
const nav = document.getElementById('af-nav');
const themeToggle = document.querySelector('.af-theme-toggle');
const themeLabel = document.querySelector('.af-theme-toggle-label');
const THEME_KEY = 'af-theme';
const setTheme = (theme) => {
document.body.classList.toggle('theme-dark', theme === 'dark');
document.body.classList.toggle('theme-light', theme === 'light');
themeToggle.setAttribute('aria-pressed', theme === 'dark');
themeLabel.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
localStorage.setItem(THEME_KEY, theme);
};
const storedTheme = localStorage.getItem(THEME_KEY);
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
setTheme(storedTheme || (prefersDark ? 'dark' : 'light'));
themeToggle.addEventListener('click', () => {
const isDark = document.body.classList.contains('theme-dark');
setTheme(isDark ? 'light' : 'dark');
});
navToggle.addEventListener('click', () => {
const isOpen = nav.classList.toggle('is-open');