💾 Archived View for bacaliu.de › %CE%B5%E1%BD%96_themes.html captured on 2023-07-10 at 13:48:27.
-=-=-=-=-=-=-
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 2023-06-26 Mo 07:33 -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>εὖ-Themes</title>
<meta name="description" content="Selecting one of the many εὖ-Themes to use on this website." />
<meta name="keywords" content="εὖ-Themes, Colorscheme, Bacaliu.de" />
<meta name="generator" content="Org Mode" />
<meta property="og:type" content="article">
<meta property="og:site_name" content="Bacaliu.de">
<link rel="stylesheet" type="text/css" href="/css/modus.css">
<link rel="shortcut icon" href="/favicon.ico" sizes="65x65">
<script src=/static/js/htmx.min.js></script>
<link rel="stylesheet" type="text/css" href="/css/colors/auto.css"
id="ef-theme"
hx-swap="outerHTML" hx-get="/data/colorscheme"
hx-trigger="load">
</head>
<body>
<header id="preamble" class="status">
<a id='top'></a>
<pre style='text-align: left; font-size: min(2vw, 1rem); display: inline-block;'>
___ _ _ _
| _ ) __ _ __ __ _| (_)_ _ __| |___
| _ \/ _` / _/ _` | | | || |_/ _` / -_)
|___/\__,_\__\__,_|_|_|\_,_(_)__,_\___|
</pre><br>
<a href='#top'>↑</a>
- <a href='/index.html'>Home</a>
- <a href='/search.html'>Search</a>
- <a href='#bottom'>↓</a>
<br>
<div hx-get="/data/colorlist" hx-trigger="load"></div>
<hr>
</header>
<main id="content" class="content">
<header>
<h1 class="title">εὖ-Themes</h1>
<p class="subtitle" role="doc-subtitle">all the colors!</p>
</header>
<div id="outline-container-select-colorscheme" class="outline-2">
<h2 id="select-colorscheme"><span class="section-number-2">1.</span> <a href="#select-colorscheme">select a Colorscheme</a></h2>
<div class="outline-text-2" id="text-1">
{{list_colors() | safe}}
{{lazy_load("set_colors", "/data/colors.set") | safe}}
<div class="org-src-container">
<label class="org-src-name"><span class="listing-number">Listing 1: </span>Preview</label><pre class="src src-python"><span class="org-tree-sitter-hl-faceXkeyword">import</span> numpy
<span class="org-tree-sitter-hl-faceXkeyword">def</span> <span class="org-tree-sitter-hl-faceXfunction">doing</span>():
<span class="org-tree-sitter-hl-faceXkeyword">for</span> <span class="org-tree-sitter-hl-faceXvariable">i</span> <span class="org-tree-sitter-hl-faceXoperator">in</span> <span class="org-tree-sitter-hl-faceXfunctionXcall"><span class="org-tree-sitter-hl-faceXfunctionXbuiltin">range</span></span>(<span class="org-tree-sitter-hl-faceXnumber">0</span>, <span class="org-tree-sitter-hl-faceXnumber">42</span>):
<span class="org-tree-sitter-hl-faceXfunctionXcall"><span class="org-tree-sitter-hl-faceXfunctionXbuiltin">print</span></span>(<span class="org-tree-sitter-hl-faceXstring">f"</span>{i}<span class="org-tree-sitter-hl-faceXstring">^2 equals </span>{i**2:.4d}<span class="org-tree-sitter-hl-faceXstring">"</span>)
</pre>
</div>
</div>
</div>
<div id="outline-container-aboutcolorscheme" class="outline-2">
<h2 id="aboutcolorscheme"><span class="section-number-2">2.</span> <a href="#aboutcolorscheme">about:colorscheme</a></h2>
<div class="outline-text-2" id="text-2">
<p>
Protesilaos Stavrou, creator of the modus-themes, recently made more themes with high contrast: the εὖ-Themes (<a href="#citeproc_bib_item_1">Stavrou 2022</a>).<br>
</p>
<p>
Until now my css-file (which currently is still named <kbd>modus.css</kbd>) contained a light and a dark theme depending on the media-query . The colors were hard-coded into the css-file.<br>
</p>
<p>
This is still the case, for fallback reasons. I can still use the same css-file to create plain HTML-documents for lecture-notes and any visitor who don't specifies their preference get the most accessable choice.<br>
</p>
<p>
To allow more schemes, I need them to be in a seperate file to load them when needed. There are a few steps.<br>
</p>
</div>
<div id="outline-container-create-css-version" class="outline-3">
<h3 id="create-css-version"><span class="section-number-3">2.1.</span> <a href="#create-css-version">Create a css-version of the theme</a></h3>
<div class="outline-text-3" id="text-2-1">
<p>
From within Emacs calling <code>ef-themes-list-colors</code> I got a buffer with following structure<br>
</p>
<pre class="example">
#111111 #111111 bg-main
#cfdfd5 #cfdfd5 fg-main
#222522 #222522 bg-dim
#808f80 #808f80 fg-dim
#303230 #303230 bg-alt
...
</pre>
<p>
By pasting the contents into files named <kbd><name>.src</kbd> and using this small shell-script I got the css.<br>
</p>
<div class="org-src-container">
<label class="org-src-name"><span class="listing-number">Listing 2: </span>Theme-to-css-conversion</label><pre class="src src-sh"><span class="org-comment-delimiter">#</span><span class="org-comment">!/usr/bin/</span><span class="org-keyword">env</span><span class="org-comment"> sh</span>
<span class="org-keyword">for</span> file<span class="org-keyword"> in</span> $(command ls | grep <span class="org-string">"src$"</span>); <span class="org-keyword">do</span>
<span class="org-variable-name">out</span>=$(<span class="org-builtin">echo</span> <span class="org-string">"$file"</span> | sed <span class="org-string">'s/\.src/\.css/g'</span>)
<span class="org-builtin">echo</span> <span class="org-string">":root{"</span> > <span class="org-string">"$out"</span>
sed <span class="org-string">'s/\(#[0-9a-f]\{6\}\).\{25\}\s*\(.*\)/ --\2: \1;/g'</span> <span class="org-sh-escaped-newline">\</span>
<span class="org-string">"$file"</span> >> <span class="org-string">"$out"</span>
<span class="org-builtin">echo</span> <span class="org-string">"}"</span> >> <span class="org-string">"$out"</span>
<span class="org-keyword">done</span>
</pre>
</div>
</div>
</div>
<div id="outline-container-preparing-main-css" class="outline-3">
<h3 id="preparing-main-css"><span class="section-number-3">2.2.</span> <a href="#preparing-main-css">Preparing the main css-file</a></h3>
<div class="outline-text-3" id="text-2-2">
<p>
A few names changed, but mostly the old css-file using the modus-themes worked.<br>
</p>
<p>
I made sure to use the semantic colors (like <code>--link</code> for links and <code>--keyword</code> inside src-blocks) instead of hard-coded versions like <code>--blue-warmer</code> etc.<br>
</p>
</div>
</div>
<div id="outline-container-selecting-themes" class="outline-3">
<h3 id="selecting-themes"><span class="section-number-3">2.3.</span> <a href="#selecting-themes">selecting the themes</a></h3>
<div class="outline-text-3" id="text-2-3">
<p>
Instead of using cookies and needing to get inside the european laws of Datenschutz, I just hash the ip-address, the user-agent together with the current date and save a file named after this hash with the user's preference. Therefore every 24 hours you must enter your choice again.<br>
</p>
</div>
</div>
</div>
<div id="outline-container-bibliography" class="outline-2">
<h2 id="bibliography"><span class="section-number-2">3.</span> <a href="#bibliography">Bibliography</a></h2>
<div class="outline-text-2" id="text-3">
<style>.csl-entry{text-indent: -0; margin-left: 0;}</style><div class="csl-bib-body">
<div class="csl-entry"><a id="citeproc_bib_item_1"></a>Stavrou, P. 2022. <a href="https://protesilaos.com/codelog/2022-08-15-intro-ef-themes-emacs">“Emacs: introduction to the ef-themes,</a>” <i>Protesilaos stavrou</i>.</div>
</div>
</div>
</div>
<div id="outline-container-nav" class="outline-2">
<h2 id="nav"><a href="#nav">Nav</a></h2>
<div class="outline-text-2" id="text-nav">
<ul class="org-ul">
<li>Tags: <a href="./tags/Emacs.html">Emacs</a> - <a href="./tags/Meta.html">Meta</a><br></li>
</ul>
<!-- BEGIN insert Backlinks (but there are no) -->
<ul class="org-ul">
<li>Formats: <a href="./εὖ_themes.md">md</a> - <a href="./εὖ_themes.txt">txt</a> - <a href="./εὖ_themes.html">html</a> - <a href="./εὖ_themes.gmi">gmi</a></li>
</ul>
</div>
</div>
</main>
<footer id="postamble" class="status">
<hr>
2023-03-18
<br>
<img alt="CC BY-4.0" style="border-width:0; vertical-align: middle; height: 1em;" src="/icons/cc-by-4.0-80x15.svg">
<a rel='license' href='http://creativecommons.org/licenses/by/4.0/'>
CC BY-4.0.
</a>
<br>
running at <a href='https://www.hosting.de/'>hosting.de</a>
<br>
Creator: <a href="https://www.gnu.org/software/emacs/">Emacs</a> 28.2 (<a href="https://orgmode.org">Org</a> mode 9.5.5);
<br>
<a href='/impressum-datenschutz.html' id='impressum-dings'>
Impressum und Datenschutzerklärung
</a>
<a id='bottom'></a>
</footer>
</body>
</html>