466 lines
15 KiB
HTML
466 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>CyberQueer Theme System — M-Archy Dotfiles</title>
|
||
<style>
|
||
/* ── CyberQueer Theme ──────────────────────────────────────────────── */
|
||
:root {
|
||
--bg: #1A1A1A;
|
||
--bg2: #242424;
|
||
--bg3: #2e2e2e;
|
||
--text: #D6ABAB;
|
||
--accent: #E40046;
|
||
--violet: #5018DD;
|
||
--danger: #F50505;
|
||
--border: #5018DD;
|
||
--radius: 10px;
|
||
--radius-sm: 5px;
|
||
}
|
||
|
||
/* ── Reset & Base ──────────────────────────────────────────────────── */
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
background-color: var(--bg);
|
||
color: var(--text);
|
||
font-family: 'Agave Nerd Font Mono', 'JetBrains Mono', 'Fira Code',
|
||
'Cascadia Code', 'Source Code Pro', monospace;
|
||
font-size: 15px;
|
||
line-height: 1.75;
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
padding: 2.5rem 2rem 5rem;
|
||
}
|
||
|
||
/* ── Typography ────────────────────────────────────────────────────── */
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-family: 'Agave Nerd Font Mono', monospace;
|
||
font-weight: 700;
|
||
line-height: 1.25;
|
||
margin-top: 2.2rem;
|
||
margin-bottom: 0.6rem;
|
||
}
|
||
|
||
h1 {
|
||
color: var(--accent);
|
||
font-size: 2.2rem;
|
||
border-bottom: 3px solid var(--accent);
|
||
padding-bottom: 0.4rem;
|
||
margin-top: 0;
|
||
}
|
||
|
||
h2 {
|
||
color: var(--accent);
|
||
font-size: 1.55rem;
|
||
border-bottom: 2px solid var(--violet);
|
||
padding-bottom: 0.3rem;
|
||
}
|
||
|
||
h3 {
|
||
color: var(--violet);
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
h4, h5, h6 {
|
||
color: var(--text);
|
||
font-size: 1rem;
|
||
}
|
||
|
||
p {
|
||
margin: 0.9rem 0;
|
||
}
|
||
|
||
strong { color: var(--accent); font-weight: 700; }
|
||
em { color: var(--violet); font-style: italic; }
|
||
|
||
/* ── Links ─────────────────────────────────────────────────────────── */
|
||
a {
|
||
color: var(--violet);
|
||
text-decoration: none;
|
||
border-bottom: 1px solid transparent;
|
||
transition: color 0.15s, border-color 0.15s;
|
||
}
|
||
|
||
a:hover {
|
||
color: var(--accent);
|
||
border-bottom-color: var(--accent);
|
||
}
|
||
|
||
/* ── Code ──────────────────────────────────────────────────────────── */
|
||
code {
|
||
font-family: inherit;
|
||
background: var(--bg2);
|
||
color: var(--violet);
|
||
border: 1px solid var(--violet);
|
||
border-radius: var(--radius-sm);
|
||
padding: 0.1em 0.42em;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
pre {
|
||
background: var(--bg2);
|
||
border: 2px solid var(--violet);
|
||
border-radius: var(--radius);
|
||
padding: 1.2rem 1.4rem;
|
||
overflow-x: auto;
|
||
margin: 1.2rem 0;
|
||
position: relative;
|
||
}
|
||
|
||
pre code {
|
||
background: transparent;
|
||
border: none;
|
||
padding: 0;
|
||
color: var(--text);
|
||
font-size: 0.875em;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Syntax-like token colouring (no JS required — structural only) */
|
||
pre code .kw { color: var(--accent); }
|
||
pre code .str { color: var(--violet); }
|
||
pre code .cm { color: #666; font-style: italic; }
|
||
|
||
/* ── Horizontal Rule ───────────────────────────────────────────────── */
|
||
hr {
|
||
border: none;
|
||
border-top: 2px solid var(--violet);
|
||
margin: 2rem 0;
|
||
opacity: 0.45;
|
||
}
|
||
|
||
/* ── Blockquote ────────────────────────────────────────────────────── */
|
||
blockquote {
|
||
border-left: 4px solid var(--accent);
|
||
background: var(--bg2);
|
||
margin: 1.2rem 0;
|
||
padding: 0.8rem 1.2rem;
|
||
border-radius: 0 var(--radius) var(--radius) 0;
|
||
color: var(--text);
|
||
opacity: 0.9;
|
||
}
|
||
|
||
blockquote p { margin: 0; }
|
||
|
||
/* ── Tables ────────────────────────────────────────────────────────── */
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
border: 2px solid var(--border);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
margin: 1.2rem 0;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
th {
|
||
background: var(--violet);
|
||
color: var(--bg);
|
||
text-align: left;
|
||
padding: 0.55rem 0.9rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
|
||
td {
|
||
padding: 0.5rem 0.9rem;
|
||
border-top: 1px solid var(--bg3);
|
||
vertical-align: top;
|
||
}
|
||
|
||
tr:nth-child(even) td { background: var(--bg2); }
|
||
tr:hover td { background: var(--bg3); }
|
||
|
||
/* ── Lists ─────────────────────────────────────────────────────────── */
|
||
ul, ol {
|
||
padding-left: 1.6rem;
|
||
margin: 0.7rem 0;
|
||
}
|
||
|
||
li { margin: 0.25rem 0; }
|
||
|
||
ul li::marker { color: var(--accent); }
|
||
ol li::marker { color: var(--violet); font-weight: 700; }
|
||
|
||
/* ── Nav sidebar (index page) ──────────────────────────────────────── */
|
||
nav ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
nav li { margin: 0.3rem 0; }
|
||
|
||
/* ── Page Header Bar ───────────────────────────────────────────────── */
|
||
.page-header {
|
||
border-bottom: 3px solid var(--accent);
|
||
padding-bottom: 0.6rem;
|
||
margin-bottom: 2rem;
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.page-header .site-title {
|
||
color: var(--accent);
|
||
font-size: 0.85rem;
|
||
opacity: 0.75;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ── Back link ─────────────────────────────────────────────────────── */
|
||
.back-link {
|
||
display: inline-block;
|
||
color: var(--violet);
|
||
font-size: 0.85rem;
|
||
margin-bottom: 1.5rem;
|
||
padding: 0.25rem 0.75rem;
|
||
border: 1px solid var(--violet);
|
||
border-radius: 30px;
|
||
transition: background 0.15s, color 0.15s;
|
||
}
|
||
|
||
.back-link:hover {
|
||
background: var(--violet);
|
||
color: var(--bg);
|
||
border-bottom-color: transparent;
|
||
}
|
||
|
||
/* ── Footer ────────────────────────────────────────────────────────── */
|
||
footer {
|
||
margin-top: 4rem;
|
||
padding-top: 1rem;
|
||
border-top: 1px solid var(--bg3);
|
||
color: var(--text);
|
||
opacity: 0.4;
|
||
font-size: 0.8rem;
|
||
text-align: center;
|
||
}
|
||
|
||
/* ── Responsive ────────────────────────────────────────────────────── */
|
||
@media (max-width: 680px) {
|
||
body { padding: 1.2rem 1rem 3rem; font-size: 14px; }
|
||
h1 { font-size: 1.7rem; }
|
||
h2 { font-size: 1.3rem; }
|
||
table { display: block; overflow-x: auto; }
|
||
}
|
||
|
||
/* ── Selection ─────────────────────────────────────────────────────── */
|
||
::selection {
|
||
background: var(--accent);
|
||
color: var(--bg);
|
||
}
|
||
|
||
/* ── Scrollbar ─────────────────────────────────────────────────────── */
|
||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||
::-webkit-scrollbar-track { background: var(--bg2); }
|
||
::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 4px; }
|
||
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="page-header">
|
||
<span class="site-title">M-Archy Dotfiles</span>
|
||
</header>
|
||
<a class="back-link" href="index.html">← Index</a>
|
||
<main>
|
||
<h1 id="cyberqueer-theme-system">CyberQueer Theme System<a class="toc-anchor" href="#cyberqueer-theme-system" title="Permanent link">¶</a></h1>
|
||
<p>The CyberQueer theme is a single-source colour system: every config file that needs colours references a small set of hex values that can be changed in one place and propagated everywhere with a single command.</p>
|
||
<hr />
|
||
<h2 id="the-palette">The Palette<a class="toc-anchor" href="#the-palette" title="Permanent link">¶</a></h2>
|
||
<p>Defined in <code>~/Dotfiles/colors.conf</code> (bare 6-digit hex, no <code>#</code> prefix):</p>
|
||
<pre><code class="language-ini">COLOR_TEXT=D6ABAB # Rose-white — foreground text, labels
|
||
COLOR_BG=1A1A1A # Near-black — base surface, backgrounds
|
||
COLOR_HIGHLIGHT=E40046 # Hot pink — primary accent, active borders
|
||
COLOR_DARK=5018DD # Violet — secondary accent, inactive borders
|
||
COLOR_RED=F50505 # Red — danger indicators, alerts
|
||
</code></pre>
|
||
<hr />
|
||
<h2 id="applying-the-theme">Applying the Theme<a class="toc-anchor" href="#applying-the-theme" title="Permanent link">¶</a></h2>
|
||
<pre><code class="language-bash"># Apply using the default colors.conf
|
||
bash ~/Dotfiles/apply-theme.sh
|
||
|
||
# Apply from a custom palette file
|
||
bash ~/Dotfiles/apply-theme.sh /path/to/custom-colors.conf
|
||
</code></pre>
|
||
<p><code>apply-theme.sh</code> will:</p>
|
||
<ol>
|
||
<li>Read <code>colors.conf</code> (or the file you pass)</li>
|
||
<li>Compare against the last-applied state in <code>~/.config/colors.state</code></li>
|
||
<li>Replace only <strong>changed</strong> colour values across all tracked files</li>
|
||
<li>Save the new state to <code>colors.state</code></li>
|
||
</ol>
|
||
<p>If nothing changed it exits immediately — safe to call repeatedly.</p>
|
||
<h3 id="first-run-bootstrap">First-Run Bootstrap<a class="toc-anchor" href="#first-run-bootstrap" title="Permanent link">¶</a></h3>
|
||
<p>On a fresh install where configs have been copied but no state file exists yet, <code>apply-theme.sh</code> bootstraps <code>~/.config/colors.state</code> with the repository defaults so the diff works correctly from the start.</p>
|
||
<hr />
|
||
<h2 id="what-gets-themed">What Gets Themed<a class="toc-anchor" href="#what-gets-themed" title="Permanent link">¶</a></h2>
|
||
<h3 id="user-configs-config">User Configs (<code>~/.config/…</code>)<a class="toc-anchor" href="#user-configs-config" title="Permanent link">¶</a></h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>File</th>
|
||
<th>What it styles</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>starship.toml</code></td>
|
||
<td>Shell prompt segment colours</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>yazi/theme.toml</code></td>
|
||
<td>File manager UI colours</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>hypr/hyprland.conf</code></td>
|
||
<td>Active/inactive window border gradients</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>hypr/hyprtoolkit.conf</code></td>
|
||
<td>Additional Hyprland colours</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>hypr/hyprlock.conf</code></td>
|
||
<td>Lock screen colours</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>kitty/current-theme.conf</code></td>
|
||
<td>Terminal colour palette</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>kitty/kitty.conf</code></td>
|
||
<td>Terminal background & accents</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>kitty/themes/cyberqueer.conf</code></td>
|
||
<td>Kitty colour scheme definition</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>waybar/style.css</code></td>
|
||
<td>Top bar widget colours</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>wofi/style.css</code></td>
|
||
<td>App launcher colours</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>walker/themes/cyberqueer.css</code></td>
|
||
<td>Walker launcher theme</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>nwg-dock-hyprland/style.css</code></td>
|
||
<td>Application dock</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>nwg-drawer/drawer.css</code></td>
|
||
<td>Application drawer</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>nwg-panel/menu-start.css</code></td>
|
||
<td>Panel start menu</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>vicinae/cyberqueer.toml</code></td>
|
||
<td>Gesture launcher</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>scripts/onscreenkb.sh</code></td>
|
||
<td>On-screen keyboard colours</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>spicetify/Themes/*/color.ini</code></td>
|
||
<td>Spotify client theme (×2 variants)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>ulauncher/user-themes/cyberqueer/manifest.json</code></td>
|
||
<td>uLauncher theme</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>ulauncher/user-themes/cyberqueer/theme.css</code></td>
|
||
<td>uLauncher CSS</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>ulauncher/user-themes/cyberqueer/generated.css</code></td>
|
||
<td>uLauncher generated CSS</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>Vencord/themes/cyberqueer.theme.css</code></td>
|
||
<td>Discord theme</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>Vencord/themes/system24/…/cyberqueer.theme.css</code></td>
|
||
<td>Discord system24 variant</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h3 id="system-files-applied-via-sudo">System Files (applied via <code>sudo</code>)<a class="toc-anchor" href="#system-files-applied-via-sudo" title="Permanent link">¶</a></h3>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>File</th>
|
||
<th>What it styles</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>/etc/ly/config.ini</code></td>
|
||
<td>TUI login manager colours</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>/usr/share/themes/cyberqueer/gtk-3.0/gtk.css</code></td>
|
||
<td>GTK 3 theme</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>/usr/share/themes/cyberqueer/gtk-4.0/gtk.css</code></td>
|
||
<td>GTK 4 theme</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<hr />
|
||
<h2 id="customising-the-palette">Customising the Palette<a class="toc-anchor" href="#customising-the-palette" title="Permanent link">¶</a></h2>
|
||
<p>Edit <code>~/Dotfiles/colors.conf</code>, then run <code>apply-theme.sh</code>:</p>
|
||
<pre><code class="language-bash"># Example: shift the accent to cyan
|
||
nano ~/Dotfiles/colors.conf
|
||
# → COLOR_HIGHLIGHT=00B4D8
|
||
|
||
bash ~/Dotfiles/apply-theme.sh
|
||
</code></pre>
|
||
<p>The tui-install.sh installer also offers a colorway dialog as its final step:
|
||
enter new hex values in the form; leave them unchanged to skip.</p>
|
||
<hr />
|
||
<h2 id="how-it-works-internally">How It Works Internally<a class="toc-anchor" href="#how-it-works-internally" title="Permanent link">¶</a></h2>
|
||
<p><code>apply-theme.sh</code> reads two key–value files and computes the diff:</p>
|
||
<pre><code>~/.config/colors.state (old values — what's currently applied)
|
||
colors.conf (new values — what you want)
|
||
</code></pre>
|
||
<p>For each changed key it runs:</p>
|
||
<pre><code class="language-bash">sed -i "s/${OLD_HEX}/${NEW_HEX}/gI" <file>
|
||
</code></pre>
|
||
<p>The case-insensitive (<code>I</code>) flag matches uppercase hex codes that some apps emit. After all replacements succeed, <code>colors.state</code> is updated.</p>
|
||
<h3 id="symlink-guard">Symlink Guard<a class="toc-anchor" href="#symlink-guard" title="Permanent link">¶</a></h3>
|
||
<p><code>apply-theme.sh</code> refuses to run if any deployed config path resolves back into <code>~/Dotfiles/</code> via symlink. This prevents theme changes from being committed directly into the git repository. The new-style install (via <code>tui-install.sh</code>) <strong>copies</strong> configs instead of symlinking them, so this guard is normally never triggered.</p>
|
||
<hr />
|
||
<h2 id="answerfile-theming">Answerfile Theming<a class="toc-anchor" href="#answerfile-theming" title="Permanent link">¶</a></h2>
|
||
<p>If you generate an answerfile with <code>generate-answerfile.sh</code>, custom colours can be embedded in it:</p>
|
||
<pre><code class="language-json">{
|
||
"colors": {
|
||
"COLOR_TEXT": "D6ABAB",
|
||
"COLOR_BG": "1A1A1A",
|
||
"COLOR_HIGHLIGHT": "E40046",
|
||
"COLOR_DARK": "5018DD",
|
||
"COLOR_RED": "F50505"
|
||
}
|
||
}
|
||
</code></pre>
|
||
<p><code>tui-install.sh</code> will apply these at the end of an automated install.</p>
|
||
</main>
|
||
<footer>
|
||
Generated by md-to-html.sh · CyberQueer theme · 2026-05-18
|
||
</footer>
|
||
</body>
|
||
</html>
|