<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="repartee — A modern terminal IRC client built with Ratatui, Tokio, and Rust. Scripting, theming, encrypted logging, and more.">
<meta name="keywords" content="irc, terminal, tui, client, chat, repartee, ratatui, tokio, rust">
<meta name="author" content="outragedevs">
<meta property="og:title" content="Theming — repartee">
<meta property="og:description" content="A modern terminal IRC client built with Ratatui, Tokio, and Rust. Inspired by irssi, designed for the future.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://outragedevs.github.io/repartee/">
<meta property="og:image" content="https://outragedevs.github.io/repartee/images/chat.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{title}} — repartee">
<meta name="twitter:description" content="A modern terminal IRC client built with Ratatui, Tokio, and Rust.">
<meta name="twitter:image" content="https://outragedevs.github.io/repartee/images/chat.png">
<title>{{title}} — repartee</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<button class="hamburger" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<div class="page-wrapper">
<aside class="sidebar">
<div class="sidebar-header">
<a href="index.html" class="brand">repartee</a>
<span class="brand-tagline">Documentation</span>
</div>
<nav class="sidebar-nav">
<ul>
<li><a href="index.html">Home</a></li>
</ul>
<div class="nav-section">
<span class="nav-section-title">Getting Started</span>
<ul>
<li><a href="installation.html">Installation</a></li>
<li><a href="first-connection.html">First Connection</a></li>
<li><a href="configuration.html">Configuration</a></li>
</ul>
</div>
<div class="nav-section">
<span class="nav-section-title">Reference</span>
<ul>
<li><a href="commands.html">Commands</a></li>
</ul>
</div>
<div class="nav-section">
<span class="nav-section-title">Scripting</span>
<ul>
<li><a href="scripting-getting-started.html">Getting Started</a></li>
<li><a href="scripting-api.html">API Reference</a></li>
<li><a href="scripting-examples.html">Examples</a></li>
</ul>
</div>
<div class="nav-section">
<span class="nav-section-title">Customization</span>
<ul>
<li><a href="theming.html" class="active">Theming</a></li>
<li><a href="theming-format-strings.html">Format Strings</a></li>
<li><a href="logging.html">Logging & Search</a></li>
</ul>
</div>
<div class="nav-section">
<span class="nav-section-title">Usage</span>
<ul>
<li><a href="web-frontend.html">Web Frontend</a></li>
<li><a href="sessions.html">Sessions & Detach</a></li>
</ul>
</div>
<div class="nav-section">
<span class="nav-section-title">Project</span>
<ul>
<li><a href="architecture.html">Architecture</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div>
</nav>
<div class="sidebar-footer">
Built with <a href="https://www.rust-lang.org">Rust</a>
·
<a href="https://github.com/outragedevs/repartee">GitHub</a>
</div>
</aside>
<div class="sidebar-overlay"></div>
<div class="content-wrapper">
<main class="content">
<h1>Theming</h1>
<p>repartee uses irssi-compatible format strings with 24-bit color support.</p>
<h2>Theme files</h2>
<p>Themes are TOML files stored in <code>~/.repartee/themes/</code>. Set the active theme in your config:</p>
<pre><code class="language-toml">[general]
theme = "mytheme"
</code></pre>
<p>This loads <code>~/.repartee/themes/mytheme.theme</code>.</p>
<h2>Theme structure</h2>
<p>A theme file has two sections: <code>colors</code> and <code>abstracts</code>.</p>
<pre><code class="language-toml">[colors]
bg = "1a1b26"
bg_alt = "24283b"
fg = "a9b1d6"
fg_alt = "565f89"
highlight = "e0af68"
nick_self = "7aa2f7"
timestamp = "565f89"
separator = "3b4261"
[abstracts]
line_start = "{timestamp $Z}{sb_background}"
timestamp = "%Z565f89$*"
own_msg = "{ownmsgnick $0}$1"
pubmsg = "{pubmsgnick $0}$1"
</code></pre>
<h2>Colors</h2>
<p>The <code>[colors]</code> section defines hex RGB values (without <code>#</code>) for UI elements:</p>
<table>
<thead>
<tr>
<th>Key</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td><code>bg</code></td>
<td>Main background color</td>
</tr>
<tr>
<td><code>bg_alt</code></td>
<td>Alternate background (topic bar, status line)</td>
</tr>
<tr>
<td><code>fg</code></td>
<td>Main text color</td>
</tr>
<tr>
<td><code>fg_alt</code></td>
<td>Muted text color</td>
</tr>
<tr>
<td><code>highlight</code></td>
<td>Highlight/mention color</td>
</tr>
<tr>
<td><code>nick_self</code></td>
<td>Your own nick color</td>
</tr>
<tr>
<td><code>timestamp</code></td>
<td>Timestamp color</td>
</tr>
<tr>
<td><code>separator</code></td>
<td>Border/separator color</td>
</tr>
</tbody></table>
<h2>Abstracts</h2>
<p>Abstracts are named format string templates that can reference each other. They control how every UI element is rendered — from message lines to the status bar.</p>
<p>See <a href="theming-format-strings.html">Format Strings</a> for the full format string syntax.</p>
<h2>Default theme</h2>
<p>If no theme is set, repartee uses built-in defaults with a dark color scheme inspired by Tokyo Night.</p>
<nav class="page-nav">
<a href="scripting-examples.html" class="page-nav-link prev">
<span class="page-nav-label">← Previous</span>
<span class="page-nav-title">Examples</span>
</a>
<a href="theming-format-strings.html" class="page-nav-link next">
<span class="page-nav-label">Next →</span>
<span class="page-nav-title">Format Strings</span>
</a>
</nav>
<footer class="site-footer">
Built with <a href="https://www.rust-lang.org">Rust</a> ·
<a href="https://github.com/outragedevs/repartee">GitHub</a> ·
MIT License
</footer>
</main>
</div>
</div>
<script>
(function() {
const hamburger = document.querySelector('.hamburger');
const sidebar = document.querySelector('.sidebar');
const overlay = document.querySelector('.sidebar-overlay');
function toggleSidebar() {
hamburger.classList.toggle('active');
sidebar.classList.toggle('open');
overlay.classList.toggle('visible');
document.body.style.overflow = sidebar.classList.contains('open') ? 'hidden' : '';
}
function closeSidebar() {
hamburger.classList.remove('active');
sidebar.classList.remove('open');
overlay.classList.remove('visible');
document.body.style.overflow = '';
}
hamburger.addEventListener('click', toggleSidebar);
overlay.addEventListener('click', closeSidebar);
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && sidebar.classList.contains('open')) {
closeSidebar();
}
});
})();
</script>
</body>
</html>