will/unitforge
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(frontend): add theme switcher with light dark and system modes
Some checks failed
Build Multi-Arch Container Image / test (push) Has been cancelled
Details
Build Multi-Arch Container Image / build-and-push (push) Has been cancelled
Details
Build Multi-Arch Container Image / security-scan (push) Has been cancelled
Details
Build Multi-Arch Container Image / deploy-staging (push) Has been cancelled
Details
Build Multi-Arch Container Image / deploy-production (push) Has been cancelled
Details
Nightly Build / notify-results (push) Has been cancelled
Details
Nightly Build / check-changes (push) Has been cancelled
Details
Nightly Build / nightly-tests (3.10) (push) Has been cancelled
Details
Nightly Build / nightly-tests (3.11) (push) Has been cancelled
Details
Nightly Build / nightly-tests (3.12) (push) Has been cancelled
Details
Nightly Build / nightly-tests (3.8) (push) Has been cancelled
Details
Nightly Build / nightly-tests (3.9) (push) Has been cancelled
Details
Nightly Build / build-nightly (push) Has been cancelled
Details
Nightly Build / performance-test (push) Has been cancelled
Details
Nightly Build / security-scan-nightly (push) Has been cancelled
Details
Nightly Build / cleanup-old-nightlies (push) Has been cancelled
Details

Browse Source
This commit is contained in:
William Valentin
2025-09-21 20:28:33 -07:00
parent f38e0c1276
commit c48cd87d16
6 changed files with 670 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/templates/templates.html
View File

@@ -20,6 +20,34 @@
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="description" content="{{ app_name }} Templates — generate production-ready systemd unit files from curated templates." />
<meta name="apple-mobile-web-app-title" content="{{ app_name }}" />
<script>
(function () {
const storageKey = 'unitforge-theme';
try {
const stored = localStorage.getItem(storageKey);
const theme = stored === 'light' || stored === 'dark' ? stored : 'system';
const root = document.documentElement;
root.setAttribute('data-theme-preference', theme);
if (theme === 'light' || theme === 'dark') {
root.setAttribute('data-theme', theme);
} else {
root.removeAttribute('data-theme');
}
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) {
const prefersDark = typeof window !== 'undefined' &&
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
const appliedTheme = theme === 'system' ? (prefersDark ? 'dark' : 'light') : theme;
meta.setAttribute('content', appliedTheme === 'dark' ? '#0b1120' : '#0d6efd');
}
} catch (error) {
console.warn('Theme bootstrap failed:', error);
}
})();
</script>
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/static/vendor/fontawesome/css/all.min.css" />
<link href="/static/css/style.css" rel="stylesheet" />
@@ -55,6 +83,59 @@
<a class="nav-link" href="/cli">CLI</a>
</li>
</ul>
<ul class="navbar-nav align-items-lg-center gap-2 mt-3 mt-lg-0 ms-lg-3">
<li class="nav-item dropdown w-100 w-lg-auto">
<button
class="btn btn-outline-light dropdown-toggle w-100 w-lg-auto"
id="themeDropdown"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
data-theme-toggle
>
<i class="fas fa-circle-half-stroke me-2" data-theme-icon></i>
<span data-theme-label>System</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="light"
role="menuitemradio"
aria-checked="false"
>
<i class="fas fa-sun me-2 text-warning"></i>
Light
</button>
</li>
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="dark"
role="menuitemradio"
aria-checked="false"
>
<i class="fas fa-moon me-2 text-info"></i>
Dark
</button>
</li>
<li>
<button
class="dropdown-item d-flex align-items-center"
type="button"
data-theme-option="system"
role="menuitemradio"
aria-checked="true"
>
<i class="fas fa-circle-half-stroke me-2 text-secondary"></i>
System
</button>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>