2020-03-01 23:19:29 +00:00
|
|
|
#+title: Solaryzed: A Generalisation of Solarized
|
|
|
|
#+date: [2020-03-01 Sun]
|
|
|
|
#+author: Yann Esposito
|
|
|
|
#+EMAIL: yann@esposito.host
|
2020-03-01 23:29:20 +00:00
|
|
|
#+keywords: colorscheme
|
2020-05-02 11:37:25 +00:00
|
|
|
#+DESCRIPTION: A generalization of solarized (https://solaryzed.esy.fun).
|
2020-05-02 13:30:40 +00:00
|
|
|
#+DESCRIPTION: I tried to keep the same fundamentals and to free some variables.
|
2020-03-01 23:19:29 +00:00
|
|
|
#+OPTIONS: auto-id:t toc:t
|
|
|
|
#+STARTUP: overview
|
|
|
|
|
2020-05-02 17:31:18 +00:00
|
|
|
After many years using [[https://ethanschoonover.com/solarized/][Solarized]] I changed to a new one.
|
|
|
|
I use it for my terminal, emacs and most of my tools.
|
2020-03-01 23:19:29 +00:00
|
|
|
|
2020-03-09 22:55:55 +00:00
|
|
|
This is inspired by both [[https://ethanschoonover.com/solarized/][Solarized]] and [[https://nordtheme.com][Nord]].
|
2020-05-02 17:31:18 +00:00
|
|
|
I switched because I wanted a greyer theme.
|
2020-03-09 22:55:55 +00:00
|
|
|
|
|
|
|
Ethan Shoovnover the creator of Solarized gave plenty of information about
|
2020-05-02 17:31:18 +00:00
|
|
|
the creation of his colorscheme.
|
|
|
|
And I stumbled upon the [[https://nordtheme.com][Nord]] theme.
|
2020-03-09 22:55:55 +00:00
|
|
|
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.
|
2020-03-01 23:19:29 +00:00
|
|
|
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
|
2020-03-09 22:55:55 +00:00
|
|
|
|
|
|
|
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:
|
|
|
|
|
2020-05-02 17:31:18 +00:00
|
|
|
|
2020-03-09 22:55:55 +00:00
|
|
|
#+begin_export html
|
2020-05-02 17:31:18 +00:00
|
|
|
<style>#colors div {
|
|
|
|
display: inline-block;
|
|
|
|
height: 60.0px;
|
|
|
|
width: 60.0px;
|
|
|
|
margin: 2px 0;
|
|
|
|
font-weight: bold;
|
|
|
|
line-height: 60.0px;
|
|
|
|
text-align: center; }
|
|
|
|
#colors { padding: 20px; margin: 10px 0; }
|
|
|
|
</style>
|
2020-03-09 22:55:55 +00:00
|
|
|
<div id="colors">
|
2020-05-02 17:31:18 +00:00
|
|
|
#+end_export
|
|
|
|
#+MACRO: colorbox @@html:<div style="background: $3; color:$2" id="$1">$1</div>@@
|
|
|
|
{{{colorbox(b03,white,#202631)}}}
|
|
|
|
{{{colorbox(b02,white,#2b303c)}}}
|
|
|
|
{{{colorbox(b01,white,#595e6a)}}}
|
|
|
|
{{{colorbox(b00,white,#727782)}}}
|
|
|
|
{{{colorbox(b0,black,#8c919b)}}}
|
|
|
|
{{{colorbox(b1,black,#a7abb5)}}}
|
|
|
|
{{{colorbox(b2,black,#e5e8f0)}}}
|
|
|
|
{{{colorbox(b3,black,#f3f6fe)}}}
|
2020-06-25 14:28:35 +00:00
|
|
|
@@html:<br/>@@
|
2020-05-02 17:31:18 +00:00
|
|
|
{{{colorbox(y,white,#ad8c51)}}}
|
|
|
|
{{{colorbox(o,white,#a9664b)}}}
|
|
|
|
{{{colorbox(r,white,#af6256)}}}
|
|
|
|
{{{colorbox(m,white,#ae5e7d)}}}
|
|
|
|
{{{colorbox(v,white,#6774b2)}}}
|
|
|
|
{{{colorbox(b,white,#408cc3)}}}
|
|
|
|
{{{colorbox(c,white,#17a198)}}}
|
|
|
|
{{{colorbox(g,white,#939452)}}}
|
|
|
|
#+begin_export html
|
2020-03-09 22:55:55 +00:00
|
|
|
</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
|