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

Expand Appearance settings with accents, scale, radius, and chrome
Release rolling / release (push) Successful in 7m33s
Details

Browse Source 
Add twelve accent colors with swatch picker, UI scale, corner radius,
and titlebar/sidebar chrome styles. Preferences live-apply and persist
in the settings cache for both dark and light themes.
This commit is contained in:
Raven Scott
2026-07-17 23:47:07 -04:00
parent a78ef40966
commit a6fea51eaf
6 changed files with 485 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+46 -7
View File
@@ -2725,16 +2725,37 @@ services:
<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>
<label class="form-label" for="settings-chrome">Chrome surface</label>
<select id="settings-chrome" class="form-select bg-dark text-white">
<option value="glass" selected>Glass (blur)</option>
<option value="solid">Solid</option>
<option value="flat">Flat minimal</option>
</select>
<div class="form-text">Highlights, focus rings, and active nav.</div>
<div class="form-text">Titlebar and sidebar material.</div>
</div>
</div>
</div>
<div class="settings-section mt-4">
<h3>Accent color</h3>
<p class="text-muted small mb-2">Highlights, focus rings, active nav, and progress bars. Applies immediately.</p>
<div id="settings-accent-swatches" class="pd-accent-swatches" aria-label="Accent color"></div>
<label class="form-label visually-hidden" for="settings-accent">Accent color</label>
<select id="settings-accent" class="form-select bg-dark text-white mt-2 pd-accent-select">
<option value="teal" selected>Teal (default)</option>
<option value="cyan">Cyan</option>
<option value="emerald">Emerald</option>
<option value="blue">Blue</option>
<option value="indigo">Indigo</option>
<option value="violet">Violet</option>
<option value="fuchsia">Fuchsia</option>
<option value="rose">Rose</option>
<option value="amber">Amber</option>
<option value="orange">Orange</option>
<option value="sky">Sky</option>
<option value="lime">Lime</option>
</select>
<div class="form-text">Use the swatches or the list — both stay in sync.</div>
</div>
<div class="settings-section mt-4">
<h3>Layout &amp; density</h3>
<div class="row g-3">
@@ -2747,13 +2768,31 @@ services:
</select>
<div class="form-text">Row and card spacing for dense fleets or touch targets.</div>
</div>
<div class="col-md-4">
<label class="form-label" for="settings-ui-scale">UI scale</label>
<select id="settings-ui-scale" class="form-select bg-dark text-white">
<option value="sm">Compact</option>
<option value="md" selected>Default</option>
<option value="lg">Large</option>
</select>
<div class="form-text">Base type size across the app.</div>
</div>
<div class="col-md-4">
<label class="form-label" for="settings-radius">Corner radius</label>
<select id="settings-radius" class="form-select bg-dark text-white">
<option value="sharp">Sharp</option>
<option value="default" selected>Default</option>
<option value="round">Round</option>
</select>
<div class="form-text">Cards, buttons, and inputs.</div>
</div>
<div class="col-md-4">
<label class="form-label" for="settings-sidebar">Sidebar</label>
<select id="settings-sidebar" class="form-select bg-dark text-white">
<option value="expanded">Expanded by default</option>
<option value="collapsed">Collapsed rail by default</option>
</select>
<div class="form-text">Applied on next launch and when you save.</div>
<div class="form-text">Applied on launch and when changed.</div>
</div>
<div class="col-md-4">
<label class="form-label" for="settings-reduce-motion">Motion</label>