docs/demos/native-appearance-slice3.html
Ref: Size: 7.8 KiB History
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Native appearance · slice 3</title>
<style>
:root { color-scheme:dark; --ink:#f3e8d0; --muted:#c4aa8d; --bg:#211b1a; --panel:#2b211f; --panel2:#342824; --teal:#2f6f70; --amber:#d8a84e; --line:#76594b; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:radial-gradient(circle at 78% 0,#3b2922 0,transparent 42%),var(--bg); color:var(--ink); font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { width:min(1080px,calc(100% - 40px)); margin:auto; padding:58px 0 52px; } .eyebrow { color:var(--amber); font-size:.76rem; font-weight:750; letter-spacing:.16em; text-transform:uppercase; }
h1 { max-width:760px; margin:10px 0 14px; font-size:clamp(2.2rem,6vw,4.5rem); line-height:1.02; letter-spacing:-.055em; } .lede { max-width:700px; margin:0 0 30px; color:var(--muted); font-size:1.15rem; }
.status { display:inline-flex; align-items:center; gap:9px; padding:8px 13px; border:1px solid #8b6a4d; border-radius:999px; background:#372821; color:#ffd995; font-size:.86rem; } .status i { width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px #d8a84e22; }
.video-card { margin:42px 0 0; padding:14px; border:1px solid #76594b99; border-radius:20px; background:#171313aa; box-shadow:0 22px 70px #09070766; } video { display:block; width:100%; height:auto; aspect-ratio:1100/700; border-radius:12px; background:#100d0d; }
figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; padding:13px 4px 1px; color:var(--muted); font-size:.9rem; } a { color:#a8d6c6; text-underline-offset:3px; }
section { margin-top:52px; } h2 { margin:0 0 16px; font-size:1.45rem; letter-spacing:-.02em; } .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
article { padding:21px; border:1px solid #76594b66; border-radius:14px; background:linear-gradient(145deg,#342824cc,#2b211fcc); } article h3 { margin:0 0 7px; font-size:1rem; color:#ffe6b6; } article p { margin:0; color:var(--muted); }
pre { overflow:auto; margin:0; padding:18px 20px; border:1px solid #76594b66; border-radius:14px; background:#171313cc; color:#ffe6b6; } .review { border-left:3px solid var(--amber); padding:4px 0 4px 17px; color:#ead9bd; } .review p { margin:0; }
footer { margin-top:52px; color:#9d8775; font-size:.82rem; } @media (max-width:650px) { main { width:calc(100% - 26px); padding-top:36px; } .grid { grid-template-columns:1fr; } figcaption { display:block; } figcaption span { display:block; margin-top:5px; } }
</style>
</head>
<body>
<main>
<div class="eyebrow">muxg · native appearance · slice 3</div>
<h1>Your Ghostty themes, in muxg.</h1>
<p class="lede">Choose a theme file, add your own color overrides, and reopen the client. The saved shells keep running.</p>
<div class="status"><i aria-hidden="true"></i>Validated · demo approved 6 September 2026</div>
<figure class="video-card">
<video controls playsinline preload="metadata" poster="preview.png" width="1100" height="700" aria-label="Ghostty themes in the actual muxg application">
<source src="demo.mp4" type="video/mp4">Your browser cannot play this video. <a href="demo.mp4">Download the recording</a>.
</video>
<figcaption><span id="metadata">30.4 seconds · 1100 × 700 · NVIDIA Sway at 200% · restart cuts at 12.4s and 24.0s</span><span>No audio · <a href="demo.mp4">direct video</a></span></figcaption>
</figure>
<section><h2>What this slice achieves</h2><div class="grid">
<article><h3>Reuse a theme file</h3><p>Load by name from mux’s themes directory, or use an absolute path. The demo uses unmodified Catppuccin Mocha and Latte Ghostty files.</p></article>
<article><h3>Colors throughout the client</h3><p>Terminal defaults, indexed colors and cursor come from the theme. Headers, dividers, menus and bell feedback derive from the final colors. Application truecolor stays exact.</p></article>
<article><h3>Overrides you can predict</h3><p>Defaults → theme → explicit config → CLI. Config entries override the chosen theme regardless of where they appear in the file. A CLI override lasts for that launch.</p></article>
<article><h3>Apply changes on restart</h3><p>Existing clients keep their colors. Reopening applies the new settings to saved panes while the original daemon sessions keep running. Font settings continue to work.</p></article>
</div></section>
<section><h2>Try a theme</h2>
<pre><code># ~/.config/mux/config
font-family = "CommitMono Nerd Font Mono"
font-size = 12
theme = Catppuccin Mocha
# Optional personal override:
background = #202030</code></pre>
<p>Place the theme file at <code>~/.config/mux/themes/Catppuccin Mocha</code>, or use an absolute path after <code>theme =</code>. If you set <code>XDG_CONFIG_HOME</code>, use its <code>mux/themes/</code> directory instead. The themes are copied by you; mux does not bundle a catalogue.</p>
<pre><code>muxg --theme "Catppuccin Latte" --background dcebe8</code></pre>
<p>The demo uses the <a href="https://github.com/mbadolato/iTerm2-Color-Schemes/blob/master/ghostty/Catppuccin%20Mocha">Mocha</a> and <a href="https://github.com/mbadolato/iTerm2-Color-Schemes/blob/master/ghostty/Catppuccin%20Latte">Latte</a> files from iTerm2-Color-Schemes.</p>
</section>
<section><h2>The supported subset</h2>
<p><code>background</code>, <code>foreground</code>, <code>cursor-color</code>, and <code>palette = N=RRGGBB</code>. Six-digit hex colors may begin with <code>#</code>; palette indices are decimal 0–255. Unspecified entries keep their original defaults.</p>
<p>Unsupported theme keys produce a file/line warning and are ignored. The imported files include cursor-text and text-selection colors, which mux does not implement. Unknown keys in mux’s own config, malformed supported colors, duplicate entries, and missing theme files prevent startup with a diagnostic. Theme files do not change fonts or load other files.</p>
<p>No hot reload, automatic light/dark switching, named X11 colors, or dynamic color expressions. <a href="https://ghostty.org/docs/config/reference">Ghostty’s full format</a> supports more than this subset.</p>
</section>
<section><h2>What to review</h2><div class="review"><p>Check readability of the light and dark headers and menus, the color override, and the startup diagnostic. Prefix <strong>Ctrl+\</strong> then <strong>Enter</strong> opens the host picker; <strong>Esc</strong> closes it. The recorded demo is approved. Ligatures are deferred for now; the next planning focus is the gap between the GUI and TUI.</p></div></section>
<section><h2>Validation and limits</h2><p id="validation">Full CI, native units/core, and the full native integration suite passed. Real theme tests verified saved shell identities, kernel PTY sizes, off-origin pixels, light/dark menus, overrides and diagnostics. NVIDIA Wayland scale transitions passed at 200% → 100% → 150% → 200%. Both NVIDIA stress runs passed: final frame p99 17.84 ms with defaults and 17.81 ms with the configured light theme (20 ms limit); sampled input-to-painted upper bounds were 55.4 ms and 70.3 ms (250 ms limit, 5 ms polling). Frame timing includes framebuffer readback and vsync. These are current-build headless results, not a speedup or physical-display claim.</p>
<p>The first CI attempt exposed a QUIC shutdown timeout. A separate prerequisite fix now notifies peers before freeing connections; the focused test and full CI passed afterward. The original failure is retained in the sprint record.</p>
<p>Earlier intermittent NVIDIA frame-budget misses and an offscreen surface-growth readback issue remain recorded. No physical-display or new macOS validation is claimed.</p></section>
<footer>Native appearance slice 3 · private review artifact</footer>
</main></body></html>