165 lines
13 KiB
Plaintext
165 lines
13 KiB
Plaintext
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="generator" content="pandoc" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
|
<meta name="author" content="By John Mercouris" />
|
|
<title>Theming Nyxt, midnight theme</title>
|
|
<style type="text/css">
|
|
code{white-space: pre-wrap;}
|
|
span.smallcaps{font-variant: small-caps;}
|
|
span.underline{text-decoration: underline;}
|
|
div.column{display: inline-block; vertical-align: top; width: 50%;}
|
|
</style>
|
|
<style type="text/css">
|
|
a.sourceLine { display: inline-block; line-height: 1.25; }
|
|
a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
|
|
a.sourceLine:empty { height: 1.2em; position: absolute; }
|
|
.sourceCode { overflow: visible; }
|
|
code.sourceCode { white-space: pre; position: relative; }
|
|
div.sourceCode { margin: 1em 0; }
|
|
pre.sourceCode { margin: 0; }
|
|
@media screen {
|
|
div.sourceCode { overflow: auto; }
|
|
}
|
|
@media print {
|
|
code.sourceCode { white-space: pre-wrap; }
|
|
a.sourceLine { text-indent: -1em; padding-left: 1em; }
|
|
}
|
|
pre.numberSource a.sourceLine
|
|
{ position: relative; }
|
|
pre.numberSource a.sourceLine:empty
|
|
{ position: absolute; }
|
|
pre.numberSource a.sourceLine::before
|
|
{ content: attr(data-line-number);
|
|
position: absolute; left: -5em; text-align: right; vertical-align: baseline;
|
|
border: none; pointer-events: all;
|
|
-webkit-touch-callout: none; -webkit-user-select: none;
|
|
-khtml-user-select: none; -moz-user-select: none;
|
|
-ms-user-select: none; user-select: none;
|
|
padding: 0 4px; width: 4em;
|
|
color: #aaaaaa;
|
|
}
|
|
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
|
|
div.sourceCode
|
|
{ }
|
|
@media screen {
|
|
a.sourceLine::before { text-decoration: underline; }
|
|
}
|
|
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
|
|
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
|
|
code span.at { color: #7d9029; } /* Attribute */
|
|
code span.bn { color: #40a070; } /* BaseN */
|
|
code span.bu { } /* BuiltIn */
|
|
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
|
|
code span.ch { color: #4070a0; } /* Char */
|
|
code span.cn { color: #880000; } /* Constant */
|
|
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
|
|
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
|
|
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
|
|
code span.dt { color: #902000; } /* DataType */
|
|
code span.dv { color: #40a070; } /* DecVal */
|
|
code span.er { color: #ff0000; font-weight: bold; } /* Error */
|
|
code span.ex { } /* Extension */
|
|
code span.fl { color: #40a070; } /* Float */
|
|
code span.fu { color: #06287e; } /* Function */
|
|
code span.im { } /* Import */
|
|
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
|
|
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
|
|
code span.op { color: #666666; } /* Operator */
|
|
code span.ot { color: #007020; } /* Other */
|
|
code span.pp { color: #bc7a00; } /* Preprocessor */
|
|
code span.sc { color: #4070a0; } /* SpecialChar */
|
|
code span.ss { color: #bb6688; } /* SpecialString */
|
|
code span.st { color: #4070a0; } /* String */
|
|
code span.va { color: #19177c; } /* Variable */
|
|
code span.vs { color: #4070a0; } /* VerbatimString */
|
|
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
|
|
</style>
|
|
<!--[if lt IE 9]>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1 class="title">Theming Nyxt, midnight theme</h1>
|
|
<p class="author">By John Mercouris</p>
|
|
</header>
|
|
<p>Theming Nyxt is straightforward and powerful. Every class has an associated style slot (attribute) composed of CSS. You can change/append to this slot to modify the default theme, or create your own from scratch.</p>
|
|
<p>For the purposes of this article, we'll be modifying the default theme to make a dark version.</p>
|
|
<p><img src="../static/image/article/dark-theme-sloth.png" /></p>
|
|
<p>The first thing we'll change is the appearance of the prompt-buffer:</p>
|
|
<div class="sourceCode" id="minibuffer style" data-org-language="lisp"><pre class="sourceCode commonlisp"><code class="sourceCode commonlisp"><a class="sourceLine" id="minibuffer style-1" data-line-number="1">(define-configuration prompt-buffer</a>
|
|
<a class="sourceLine" id="minibuffer style-2" data-line-number="2"> ((style (str:concat</a>
|
|
<a class="sourceLine" id="minibuffer style-3" data-line-number="3"> %slot-default%</a>
|
|
<a class="sourceLine" id="minibuffer style-4" data-line-number="4"> (cl-css:css</a>
|
|
<a class="sourceLine" id="minibuffer style-5" data-line-number="5"> '((body</a>
|
|
<a class="sourceLine" id="minibuffer style-6" data-line-number="6"> :background-color <span class="st">"black"</span></a>
|
|
<a class="sourceLine" id="minibuffer style-7" data-line-number="7"> :color <span class="st">"#808080"</span>)</a>
|
|
<a class="sourceLine" id="minibuffer style-8" data-line-number="8"> (<span class="st">"#prompt-area"</span></a>
|
|
<a class="sourceLine" id="minibuffer style-9" data-line-number="9"> :background-color <span class="st">"black"</span>)</a>
|
|
<a class="sourceLine" id="minibuffer style-10" data-line-number="10"> <span class="co">;; The area you input text in.</span></a>
|
|
<a class="sourceLine" id="minibuffer style-11" data-line-number="11"> (<span class="st">"#input"</span></a>
|
|
<a class="sourceLine" id="minibuffer style-12" data-line-number="12"> :background-color <span class="st">"white"</span>)</a>
|
|
<a class="sourceLine" id="minibuffer style-13" data-line-number="13"> (<span class="st">".source-name"</span></a>
|
|
<a class="sourceLine" id="minibuffer style-14" data-line-number="14"> :color <span class="st">"black"</span></a>
|
|
<a class="sourceLine" id="minibuffer style-15" data-line-number="15"> :background-color <span class="st">"gray"</span>)</a>
|
|
<a class="sourceLine" id="minibuffer style-16" data-line-number="16"> (<span class="st">".source-content"</span></a>
|
|
<a class="sourceLine" id="minibuffer style-17" data-line-number="17"> :background-color <span class="st">"black"</span>)</a>
|
|
<a class="sourceLine" id="minibuffer style-18" data-line-number="18"> (<span class="st">".source-content th"</span></a>
|
|
<a class="sourceLine" id="minibuffer style-19" data-line-number="19"> :border <span class="st">"1px solid lightgray"</span></a>
|
|
<a class="sourceLine" id="minibuffer style-20" data-line-number="20"> :background-color <span class="st">"black"</span>)</a>
|
|
<a class="sourceLine" id="minibuffer style-21" data-line-number="21"> <span class="co">;; The currently highlighted option.</span></a>
|
|
<a class="sourceLine" id="minibuffer style-22" data-line-number="22"> (<span class="st">"#selection"</span></a>
|
|
<a class="sourceLine" id="minibuffer style-23" data-line-number="23"> :background-color <span class="st">"#37a8e4"</span></a>
|
|
<a class="sourceLine" id="minibuffer style-24" data-line-number="24"> :color <span class="st">"black"</span>)</a>
|
|
<a class="sourceLine" id="minibuffer style-25" data-line-number="25"> (.marked :background-color <span class="st">"darkgray"</span></a>
|
|
<a class="sourceLine" id="minibuffer style-26" data-line-number="26"> :font-weight <span class="st">"bold"</span></a>
|
|
<a class="sourceLine" id="minibuffer style-27" data-line-number="27"> :color <span class="st">"white"</span>)</a>
|
|
<a class="sourceLine" id="minibuffer style-28" data-line-number="28"> (.selected :background-color <span class="st">"black"</span></a>
|
|
<a class="sourceLine" id="minibuffer style-29" data-line-number="29"> :color <span class="st">"white"</span>)))))))</a></code></pre></div>
|
|
<p>What we've done here is concatenated the <code>%slot-default</code> of the minibuffer style with our own CSS that changes the background color and text color.</p>
|
|
<p><img src="../static/image/article/dark-theme-link-hint.png" /></p>
|
|
<p>Next, let's handle the appearance of internal buffers. Internal buffers are used when you create any kind of buffer that is populated by Nyxt (help buffers, list messages, list buffers, etc).</p>
|
|
<div class="sourceCode" id="internal buffer style" data-org-language="lisp"><pre class="sourceCode commonlisp"><code class="sourceCode commonlisp"><a class="sourceLine" id="internal buffer style-1" data-line-number="1"><span class="co">;;; Panel buffers are the same in regards to style.</span></a>
|
|
<a class="sourceLine" id="internal buffer style-2" data-line-number="2">(define-configuration (internal-buffer panel-buffer)</a>
|
|
<a class="sourceLine" id="internal buffer style-3" data-line-number="3"> ((style</a>
|
|
<a class="sourceLine" id="internal buffer style-4" data-line-number="4"> (str:concat</a>
|
|
<a class="sourceLine" id="internal buffer style-5" data-line-number="5"> %slot-default%</a>
|
|
<a class="sourceLine" id="internal buffer style-6" data-line-number="6"> (cl-css:css</a>
|
|
<a class="sourceLine" id="internal buffer style-7" data-line-number="7"> '((body</a>
|
|
<a class="sourceLine" id="internal buffer style-8" data-line-number="8"> :background-color <span class="st">"black"</span></a>
|
|
<a class="sourceLine" id="internal buffer style-9" data-line-number="9"> :color <span class="st">"lightgray"</span>)</a>
|
|
<a class="sourceLine" id="internal buffer style-10" data-line-number="10"> (hr</a>
|
|
<a class="sourceLine" id="internal buffer style-11" data-line-number="11"> :color <span class="st">"darkgray"</span>)</a>
|
|
<a class="sourceLine" id="internal buffer style-12" data-line-number="12"> (a</a>
|
|
<a class="sourceLine" id="internal buffer style-13" data-line-number="13"> :color <span class="st">"lightgray"</span>)</a>
|
|
<a class="sourceLine" id="internal buffer style-14" data-line-number="14"> (.button</a>
|
|
<a class="sourceLine" id="internal buffer style-15" data-line-number="15"> :color <span class="st">"lightgray"</span></a>
|
|
<a class="sourceLine" id="internal buffer style-16" data-line-number="16"> :background-color <span class="st">"gray"</span>)))))))</a></code></pre></div>
|
|
<p>Here we've added styling for <code><hr></code> elements and for <code>.buttons</code>.</p>
|
|
<p><img src="../static/image/article/dark-theme-messages.png" /></p>
|
|
<p><img src="../static/image/article/dark-theme-tutorial.png" /></p>
|
|
<p><img src="../static/image/article/dark-theme-buffer-class.png" /></p>
|
|
<p>Finally, we come to our first, and only special case, windows. For windows we must set the <code>message-buffer-style</code> to control the appearance of the message area at the bottom of the window.</p>
|
|
<div class="sourceCode" id="message buffer style" data-org-language="lisp"><pre class="sourceCode commonlisp"><code class="sourceCode commonlisp"><a class="sourceLine" id="message buffer style-1" data-line-number="1">(define-configuration window</a>
|
|
<a class="sourceLine" id="message buffer style-2" data-line-number="2"> ((message-buffer-style</a>
|
|
<a class="sourceLine" id="message buffer style-3" data-line-number="3"> (str:concat</a>
|
|
<a class="sourceLine" id="message buffer style-4" data-line-number="4"> %slot-default%</a>
|
|
<a class="sourceLine" id="message buffer style-5" data-line-number="5"> (cl-css:css</a>
|
|
<a class="sourceLine" id="message buffer style-6" data-line-number="6"> '((body</a>
|
|
<a class="sourceLine" id="message buffer style-7" data-line-number="7"> :background-color <span class="st">"black"</span></a>
|
|
<a class="sourceLine" id="message buffer style-8" data-line-number="8"> :color <span class="st">"white"</span>)))))))</a></code></pre></div>
|
|
<p>Et voila!</p>
|
|
<p><img src="../static/image/article/dark-theme-dashboard.png" /></p>
|
|
<p>We hope you enjoy making Nyxt your own. Please feel free to share your themes that you create on our communication channels, we'd love to see what you can come up with! Thanks for reading :-)</p>
|
|
<h2 id="future-work">Future Work</h2>
|
|
<p>We believe that this system could be further enhanced by the creation of a <code>define-theme</code> macro/framework (built on top of the <code>define-configuration</code> macro). This framework could provide facilities to design and manage themes.</p>
|
|
<div class="sourceCode" id="theme" data-org-language="lisp"><pre class="sourceCode commonlisp"><code class="sourceCode commonlisp"><a class="sourceLine" id="theme-1" data-line-number="1">(define-theme my-theme</a>
|
|
<a class="sourceLine" id="theme-2" data-line-number="2"> ((buffer <span class="st">"custom-css-here)</span></a>
|
|
<a class="sourceLine" id="theme-3" data-line-number="3"><span class="st"> (internal-buffer "</span>other-css-there<span class="st">")))</span></a></code></pre></div>
|
|
<p>Installation/uninstallation of themes could be fully functional. You could test and develop as many themes as you like without leaving your system in a corrupt state. We're excited to see what we can come up with together!</p>
|
|
</body>
|
|
</html>
|