87 lines
4.4 KiB
HTML
87 lines
4.4 KiB
HTML
<h2>Which Palette?</h2>
|
|
<p class="subtitle">Modern terminal themes each have a distinct personality. Which palette should drive the redesign?</p>
|
|
|
|
<style>
|
|
.swatch-row { display: flex; gap: 6px; margin: 10px 0 6px; flex-wrap: wrap; }
|
|
.swatch { width: 28px; height: 28px; border-radius: 4px; display: inline-block; }
|
|
.palette-preview {
|
|
font-family: ui-monospace, 'JetBrains Mono', monospace;
|
|
font-size: 12px;
|
|
padding: 10px 14px;
|
|
border-radius: 8px;
|
|
margin-top: 8px;
|
|
line-height: 1.6;
|
|
}
|
|
</style>
|
|
|
|
<div class="options">
|
|
<div class="option" data-choice="dracula" onclick="toggleSelect(this)">
|
|
<div class="letter">A</div>
|
|
<div class="content">
|
|
<h3>Dracula</h3>
|
|
<p>Dark purple background, vibrant pink/cyan/green accents. The most iconic dark theme — moody yet colorful.</p>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background:#282a36" title="Background"></span>
|
|
<span class="swatch" style="background:#44475a" title="Current Line"></span>
|
|
<span class="swatch" style="background:#ff79c6" title="Pink"></span>
|
|
<span class="swatch" style="background:#8be9fd" title="Cyan"></span>
|
|
<span class="swatch" style="background:#50fa7b" title="Green"></span>
|
|
<span class="swatch" style="background:#bd93f9" title="Purple"></span>
|
|
<span class="swatch" style="background:#ffb86c" title="Orange"></span>
|
|
<span class="swatch" style="background:#f1fa8c" title="Yellow"></span>
|
|
</div>
|
|
<div class="palette-preview" style="background:#282a36;color:#f8f8f2">
|
|
<span style="color:#ff79c6">fn</span> <span style="color:#50fa7b">visit</span>(<span style="color:#8be9fd">url</span>: <span style="color:#bd93f9">str</span>) {<br>
|
|
<span style="color:#ffb86c">// navigate to resource</span><br>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="option" data-choice="catppuccin" onclick="toggleSelect(this)">
|
|
<div class="letter">B</div>
|
|
<div class="content">
|
|
<h3>Catppuccin Mocha</h3>
|
|
<p>Warm, desaturated dark background with soft pastel accents. Gentle on the eyes, cozy and modern.</p>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background:#1e1e2e" title="Base"></span>
|
|
<span class="swatch" style="background:#313244" title="Surface0"></span>
|
|
<span class="swatch" style="background:#f38ba8" title="Red"></span>
|
|
<span class="swatch" style="background:#89dceb" title="Sky"></span>
|
|
<span class="swatch" style="background:#a6e3a1" title="Green"></span>
|
|
<span class="swatch" style="background:#cba6f7" title="Mauve"></span>
|
|
<span class="swatch" style="background:#fab387" title="Peach"></span>
|
|
<span class="swatch" style="background:#f9e2af" title="Yellow"></span>
|
|
</div>
|
|
<div class="palette-preview" style="background:#1e1e2e;color:#cdd6f4">
|
|
<span style="color:#f38ba8">fn</span> <span style="color:#a6e3a1">visit</span>(<span style="color:#89dceb">url</span>: <span style="color:#cba6f7">str</span>) {<br>
|
|
<span style="color:#fab387">// navigate to resource</span><br>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="option" data-choice="tokyonight" onclick="toggleSelect(this)">
|
|
<div class="letter">C</div>
|
|
<div class="content">
|
|
<h3>Tokyo Night</h3>
|
|
<p>Deep blue-navy background, electric blue and magenta highlights. Calm, cool, city-at-night aesthetic.</p>
|
|
<div class="swatch-row">
|
|
<span class="swatch" style="background:#1a1b26" title="Background"></span>
|
|
<span class="swatch" style="background:#24283b" title="Surface"></span>
|
|
<span class="swatch" style="background:#f7768e" title="Red"></span>
|
|
<span class="swatch" style="background:#7dcfff" title="Cyan"></span>
|
|
<span class="swatch" style="background:#9ece6a" title="Green"></span>
|
|
<span class="swatch" style="background:#bb9af7" title="Purple"></span>
|
|
<span class="swatch" style="background:#ff9e64" title="Orange"></span>
|
|
<span class="swatch" style="background:#e0af68" title="Yellow"></span>
|
|
</div>
|
|
<div class="palette-preview" style="background:#1a1b26;color:#c0caf5">
|
|
<span style="color:#f7768e">fn</span> <span style="color:#9ece6a">visit</span>(<span style="color:#7dcfff">url</span>: <span style="color:#bb9af7">str</span>) {<br>
|
|
<span style="color:#ff9e64">// navigate to resource</span><br>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|