her.esy.fun/src/posts/0012-solaryzed-theme/index.org

#+title: Solaryzed: A Generalisation of Solarized
#+date: [2020-03-01 Sun]
#+author: Yann Esposito
#+EMAIL: yann@esposito.host
#+keywords: colorscheme
#+DESCRIPTION: A generalization of solarized (https://solaryzed.esy.fun)
#+OPTIONS: auto-id:t toc:t
#+STARTUP: overview

The colorscheme of my website is the colorscheme I use for my terminal and
most of my environment.

This is inspired by both [[https://ethanschoonover.com/solarized/][Solarized]] and [[https://nordtheme.com][Nord]].

So I used [[https://ethanschoonover.com/solarized/][Solarized]] for many years.
And it was really difficult finding a new one that suits my taste.

Stil I disliked the blue-green dark background.
I wanted to change that background color.
Or having a grayer background.

Ethan Shoovnover the creator of Solarized gave plenty of information about
how he created it.

Also I stumbled upon the [[https://nordtheme.com][Nord]] theme.
And I really liked it.
But while the colors are great, it is not as easy to switch from light to
dark theme than with solarized because Solarized has a lot of nice
properties.

So I kept the main principle used to create Solarized but freed a few parameters.
The tint of the dark and light colors for the background and the text, as
well as the contrast of the colors.

And I created this minimal application in Purescript:

https://solaryzed.esy.fun

It is still not perfect, because the real theme I use for my website as a
slightly bigger contrast for text.

Here is the CSS you could use:

#+begin_export html
<style>#colors div { display: inline-block; }</style>
<div id="colors">
<div style="background: hsl(218.82, 20.99%, 15.88%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b03">b03</div>
<div style="background: hsl(222.35, 16.5%, 20.2%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b02">b02</div>
<div style="background: hsl(222.35, 8.72%, 38.24%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b01">b01</div>
<div style="background: hsl(221.25, 6.56%, 47.84%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b00">b00</div>
<div style="background: hsl(220.0, 6.98%, 57.84%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b0">b0</div>
<div style="background: hsl(222.86, 8.64%, 68.24%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b1">b1</div>
<div style="background: hsl(223.64, 26.83%, 91.96%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b2">b2</div>
<div style="background: hsl(223.64, 84.62%, 97.45%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b3">b3</div>
<div style="background: hsl(38.48, 36.22%, 49.8%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="y">y</div>
<div style="background: hsl(17.23, 38.52%, 47.84%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="o">o</div>
<div style="background: hsl(8.09, 35.74%, 51.18%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="r">r</div>
<div style="background: hsl(336.75, 33.06%, 52.55%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="m">m</div>
<div style="background: hsl(229.6, 32.75%, 55.1%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="v">v</div>
<div style="background: hsl(205.19, 52.19%, 50.78%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="b">b</div>
<div style="background: hsl(176.09, 75.0%, 36.08%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="c">c</div>
<div style="background: hsl(60.91, 28.7%, 45.1%); height: 60.0px; width: 60.0px; line-height: 60.0px; text-align: center" id="g">g</div>
</div>
#+end_export

#+begin_src css :tangle solaryzed.css
:root {
    color-scheme: light dark; /* support color scheme */
    --b03: #202631;
    --b02: #2b313c;
    --b01: #656b74;
    --b00: #727781;
    --b0:  #989ea8;
    --b1:  #b0bac7;
    --b2:  #e5e8ed;
    --b3:  #f4f7ff;
    --y:   #a98d50;
    --o:   #aa6550;
    --r:   #b85a64;
    --m:   #af53b0;
    --v:   #846f93;
    --b:   #5679a4;
    --c:   #4c8493;
    --g:   #728b5c;

    --bg:  var(--b3);
    --fg:  var(--b02);
    --fg0: var(--b0); /* lower contrast */
    --bg2: var(--b2); /* second color block background */
    --fg2: var(--b01); /* second color block foreground */
    --acc: var(--o); /* accent color */
}

@media (prefers-color-scheme: dark) {
    :root {
 /* Dark */
        --bg: var(--b03);
        --fg: var(--b0);
        --fg0: var(--b00); /* lower contrast */
        --bg2: var(--b02); /* second color block background */
        --fg2: var(--b1); /* second color block foreground */
        --acc: var(--g); /* accent color */
    }
}

body,.main {
    background: var(--bg);
    color: var(--fg);
}
#+end_src