snxraven/peardock
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add light mode theme setting and remove offline banner
Release rolling / release (push) Has been cancelled
Details

Browse Source 
Dark remains default; users can pick light or match system under Settings → Appearance. Drop the full-height connection-lost banner that stretched across the window.
This commit is contained in:
Raven Scott
2026-07-16 17:03:08 -04:00
parent f72a1d0a41
commit 3a3df4ec10
6 changed files with 1254 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+54 -15
View File
@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PearDock</title>
<meta name="description" content="Decentralized Docker management on the Holepunch stack">
<meta name="theme-color" content="#2dd4bf">
<meta name="theme-color" content="#0a0c10">
<meta name="msapplication-TileColor" content="#0f1117">
<meta name="msapplication-config" content="assets/favicons/browserconfig.xml">
<link rel="icon" href="assets/favicons/favicon.ico" sizes="any">
@@ -16,6 +16,35 @@
<link rel="apple-touch-icon" href="assets/favicons/apple-touch-icon.png">
<link rel="manifest" href="assets/favicons/site.webmanifest">
<!-- Apply color theme before paint to avoid dark→light flash -->
<script>
(function () {
try {
var raw = JSON.parse(localStorage.getItem('peardock.settings.v1') || '{}');
var pref = String(raw.theme || 'dark').toLowerCase();
if (pref !== 'light' && pref !== 'system') pref = 'dark';
var resolved = pref;
if (pref === 'system') {
resolved =
window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches
? 'light'
: 'dark';
}
document.documentElement.setAttribute('data-theme', resolved === 'light' ? 'light' : 'dark');
document.documentElement.setAttribute('data-theme-pref', pref);
if (resolved === 'light') {
var meta = document.querySelector('meta[name="theme-color"]');
if (meta) meta.setAttribute('content', '#f3f5f8');
var tile = document.querySelector('meta[name="msapplication-TileColor"]');
if (tile) tile.setAttribute('content', '#f3f5f8');
}
} catch (e) {
document.documentElement.setAttribute('data-theme', 'dark');
document.documentElement.setAttribute('data-theme-pref', 'dark');
}
})();
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
@@ -26,16 +55,12 @@
<link rel="stylesheet" href="ui/styles.css">
<link rel="stylesheet" href="ui/modern.css">
<link rel="stylesheet" href="ui/ops.css">
<link rel="stylesheet" href="ui/theme-light.css">
</head>
<body>
<div id="offline-banner" role="status" aria-live="polite">
<i class="fas fa-plug-circle-xmark"></i>
<span id="offline-banner-text">Connection lost — reconnecting…</span>
<button type="button" class="btn btn-sm btn-outline-light" id="offline-banner-dismiss">Dismiss</button>
</div>
<div id="titlebar">
<div class="titlebar-left">
<pear-ctrl></pear-ctrl>
@@ -2682,6 +2707,29 @@ services:
<!-- Appearance -->
<div class="settings-panel" id="settings-panel-appearance" data-settings-panel="appearance">
<div class="settings-section">
<h3>Theme</h3>
<div class="row g-3">
<div class="col-md-4">
<label class="form-label" for="settings-theme">Color mode</label>
<select id="settings-theme" class="form-select bg-dark text-white">
<option value="dark" selected>Dark (default)</option>
<option value="light">Light</option>
<option value="system">Match system</option>
</select>
<div class="form-text">Dark is the default. Light uses a professional cool-slate palette. Match system follows your OS setting.</div>
</div>
<div class="col-md-4">
<label class="form-label" for="settings-accent">Accent color</label>
<select id="settings-accent" class="form-select bg-dark text-white">
<option value="teal">Teal (default)</option>
<option value="cyan">Cyan</option>
<option value="violet">Violet</option>
</select>
<div class="form-text">Highlights, focus rings, and active nav.</div>
</div>
</div>
</div>
<div class="settings-section mt-4">
<h3>Layout &amp; density</h3>
<div class="row g-3">
<div class="col-md-4">
@@ -2701,15 +2749,6 @@ services:
</select>
<div class="form-text">Applied on next launch and when you save.</div>
</div>
<div class="col-md-4">
<label class="form-label" for="settings-accent">Accent color</label>
<select id="settings-accent" class="form-select bg-dark text-white">
<option value="teal">Teal (default)</option>
<option value="cyan">Cyan</option>
<option value="violet">Violet</option>
</select>
<div class="form-text">Highlights, focus rings, and active nav.</div>
</div>
<div class="col-md-4">
<label class="form-label" for="settings-reduce-motion">Motion</label>
<select id="settings-reduce-motion" class="form-select bg-dark text-white">