Hi, EmacsConf. This is "Colour your Emacs with ease".
I'm Ryota Sawada, and today's agenda is:
start with a brief introduction.
I will be talking about colours quite a bit.
What colours do you like?
Colour spaces and some packages such
as color.el, ct.el. I'll be touching on a theme called
Hasliberg theme, which I created,
before wrapping up the talk.
A quick introduction about the talk. The slide is
available as an Org mode file at Codeberg. If you're
looking at it from Org mode, you probably want to have
rainbow mode turned on for the best viewing. This is the
case with the presentation today. I'm Ryota Sawada and I'm
available at rytswd at usual places.
What colour do you like?
You might be able to tell I like orange. That's
the colour that I use often.
Emacs gives me all the control I want,
so naturally I wanted to make it aesthetically
pleasing to my taste, which meant that
I would like to have a dark theme, subtle theme
with orange as a main accent colour, but not
too orange, so not everything very orange.
Maybe use another blue-ish colour
as another accent. Note that this presentation is
based on the Hasliberg theme, more on that
later. But when I started my Emacs journey, I didn't start
with creating a new theme from get-go. I started with a theme
called Nova Theme. I really liked it. I made a few tweaks
around Org Mode and headings, so that they were a bit more was
my liking, which was around orange being sprinkled across.
I got to it very nice looking and I really liked it, but when
I started a lot of coding tasks with it, I realized one
thing: that it was very colourful, and in a way, distracting.
it actually wasn't about Nova Theme's fault. It was just
many editors, including Emacs and VS Code and other editors
and modern themes, are filled with colours. Let's have a
look. At the top left, you can see Nova theme with a bit of a
pale greenish background with a few colours. Purple,
pink, blue, green. You can see some colours like that with
Nova theme. Nice looking colours, but still colourful. Modus
Vivendi Tinted, bottom left, is also very nice looking
modern theme, but quite colourful. The same can be said
for ef-themes, owl edition at top right,
and Doom Noe as another, bottom right.
That led me to think: how can I make my code editing
and coding tasks not too distracting, and I can focus on
writing code. That was something I could manage with Org
Mode, where I just specifically, basically used orange
shades and not too much more. That's what you're seeing at
the moment. I wanted to do something similar with coding
and any general code. That led me to the journey of
creating my own theme.
But before going to the theme, I need to talk about colour
spaces. sRGB, standard RGB, is probably something that
many people are familiar with. HSL is for hue, saturation,
lightness. LCH is for luminance or lightness, chroma, and
hue. Those are the colour spaces probably common used in
various spaces, but when it comes to perceptual uniformity,
there is an important difference between the colour
spaces. Human perception of colour is not very
straightforward. We can see in the reference here...
Let's have a look.
At the top you can see the shade coming from left
green to the right blue,
and in the top image, you can see half of
it, perhaps, is very similar green colour
and then when it comes to blue,
you can see more of the different colour gradients
coming into play. The bottom colour space is based on a
perceptually uniform colour space, which gives us a bit more
evenly distributed colour gradient, which will be
something more suitable for deciding on the theme setup and
the colour setup, where you can have various themes that are
defined for human perceptions.
Perceptual uniformity is important. For that, it is
important to mention about CIE, or "International
Commission of Illumination" in English. They created
important colour spaces called CIE XYZ which was from 1931,
CIELAB, and LUV, 1976,
respectively. Those are the colour spaces used in various
fields and industries and still relevant. There is a
quite a bit that you can read up on.
I'm not a colour expert so have some references here,
but the TLDR of all of that is
consider using LCH variants over RGB or HSL
for better perceptual uniformity.
Specifically CIE Lab-based LCH,
which is often called Lab LCH
or just LCH. CIELUV-based LCH
is called LUV LCH. There is a new rather modern LCH setup
called OK LCH which is based on OK Lab.
So those are the colour spaces
that are worth looking at when it comes to creating
shades.
How do you create shades? Color.el and ct.el are
great solutions. You can create shades and different
colours based on RGB and hex. You can see in the red example
here, FF0000 is a bright red. You can darken it by providing
less red values like CC or 88. You can see that the colours
are slightly darker than the FF0000. But what if you are
working with the complex colours such as FBB151, this
particular orange? That's where color.el, ct.el come
into play. Color.el is a built-in package in Emacs,
so you can use it by just requiring it.
color-darken-name and
providing the colour with the hex value with 40%
gives you a darker orange
without doing too much of a colour computation
by hand. This hex value is something that Emacs
understands and rainbow mode does as well. When it comes
to ct.el, it's not a built-in solution, but it's more
versatile. It works with various colour spaces so you can
see that ct-edit-hsl-l-dec by 40% would give
us a darker colour by 40%. We can also use LCH variant which
can use the LCH colour spaces for darkening the colour. This
results in slightly different colours for this particular
orange, but if you're working with the green or blue or some
other colours, it might be worth looking at LCH variant
rather than other colour spaces.
With that, let's have a look at Hasliberg theme.
This is a theme that I created personally
and the name is based on the Swiss Alps
and with the following ideas in mind. It focuses
on setting up shades. Shades, by that...
You can see how the top
of the heading here is a bright orange colour, and
other orange colours, this heading and this heading
are based on the top
orange colour and then giving some shade and the luminance
adjustment essentially. It follows a pattern from web
design and tailwind colour shades are a great example that
you can have a look.
It does not use ct.el as it aims to be fully
dependency free and does not consider colour contrast for
accessibility. This is because it's personal and I
don't have that particular need.
This is based on LuvLCh rather
than LAB LCH, and that's another reason
why I didn't use ct.el,
and it is highly experimental. But the code is
available at Codeberg and GitHub just for your reference.
Let's see Hasliberg theme in action. This is the theme
that we were looking at for org-mode as well, but for the
code, in this case Elisp. You can see that the colour is
mostly white and blue with orange sprinkled across for
string input. You can see some pink showing up as well.
Essentially, all the colour setup is done by shades, so most of
it is based on white or neutral, and there will be lighter and
darker variants that can be set for the primary colour of blue.
You can see the darker and brighter and lighter colours
being used. With that shade setup, I only have to provide a
few colours as the base colours. From there, I can define the
shades for the theme setup, which leads to creating a more
monotonic colour setup, where this one is a very monotonic,
very subtle difference of white colours used for the base
colours. I don't have to make too many changes to the colour
setup. I just have to provide the base colours that are
different. The same can be said for this orange, very orange
colour theme, which is based on the base colours of
orange-like colours and gives the shade of various
different setup. This means that I can use Hasliberg
Theme Nature colour palette, and that gives me more of a green
based colour where all the base colours are set up with a
greenish colour setup.
With that, I would like to wrap up with a few ideas when
adjusting themes and working with colours. Maybe consider
using CIELAB, CIELUV, or OKLab-based colour spaces that
would give you different shades which are easier to work
with for human perceptions. color.el and ct.el can be a
great tool for making shades and working with colour spaces.
Hasliberg theme is yet another theme, highly personal
and experimental, but could be an inspiration for your
theme journey. With that, why not sprinkle your Emacs with
your favourite colours? Thank you.