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

Add light/dark red theme with toggle and refresh styling

templates/about_us.html

@@ -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

@@ -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

@@ -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

@@ -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');