WEBVTT captioned by sachac
NOTE Introduction
00:00:00.000 --> 00:00:11.327
Hi, EmacsConf. This is "Colour your Emacs with ease".
00:00:11.328 --> 00:00:14.848
I'm Ryota Sawada, and today's agenda is:
00:00:14.849 --> 00:00:16.649
start with a brief introduction.
00:00:16.650 --> 00:00:19.719
I will be talking about colours quite a bit.
00:00:19.720 --> 00:00:21.452
What colours do you like?
00:00:21.453 --> 00:00:23.599
Colour spaces and some packages such
00:00:23.600 --> 00:00:27.879
as color.el, ct.el. I'll be touching on a theme called
00:00:27.880 --> 00:00:31.056
Hasliberg theme, which I created,
00:00:31.057 --> 00:00:34.139
before wrapping up the talk.
00:00:34.140 --> 00:00:36.959
A quick introduction about the talk. The slide is
00:00:36.960 --> 00:00:40.559
available as an Org mode file at Codeberg. If you're
00:00:40.560 --> 00:00:43.519
looking at it from Org mode, you probably want to have
00:00:43.520 --> 00:00:47.639
rainbow mode turned on for the best viewing. This is the
00:00:47.640 --> 00:00:52.559
case with the presentation today. I'm Ryota Sawada and I'm
00:00:52.560 --> 00:00:58.667
available at rytswd at usual places.
NOTE What colour do you like?
00:00:58.668 --> 00:01:01.290
What colour do you like?
00:01:01.291 --> 00:01:04.999
You might be able to tell I like orange. That's
00:01:05.000 --> 00:01:07.856
the colour that I use often.
00:01:07.857 --> 00:01:09.958
Emacs gives me all the control I want,
00:01:09.959 --> 00:01:13.119
so naturally I wanted to make it aesthetically
00:01:13.120 --> 00:01:16.023
pleasing to my taste, which meant that
00:01:16.024 --> 00:01:19.725
I would like to have a dark theme, subtle theme
00:01:19.726 --> 00:01:23.767
with orange as a main accent colour, but not
00:01:23.768 --> 00:01:26.803
too orange, so not everything very orange.
00:01:26.804 --> 00:01:29.673
Maybe use another blue-ish colour
00:01:29.674 --> 00:01:32.929
as another accent. Note that this presentation is
00:01:32.930 --> 00:01:36.199
based on the Hasliberg theme, more on that
00:01:36.200 --> 00:01:40.599
later. But when I started my Emacs journey, I didn't start
00:01:40.600 --> 00:01:45.199
with creating a new theme from get-go. I started with a theme
00:01:45.200 --> 00:01:49.479
called Nova Theme. I really liked it. I made a few tweaks
00:01:49.480 --> 00:01:55.039
around Org Mode and headings, so that they were a bit more was
00:01:55.040 --> 00:02:00.759
my liking, which was around orange being sprinkled across.
00:02:00.760 --> 00:02:07.959
I got to it very nice looking and I really liked it, but when
00:02:07.960 --> 00:02:13.839
I started a lot of coding tasks with it, I realized one
00:02:13.840 --> 00:02:19.799
thing: that it was very colourful, and in a way, distracting.
00:02:19.800 --> 00:02:24.039
it actually wasn't about Nova Theme's fault. It was just
00:02:24.040 --> 00:02:27.479
many editors, including Emacs and VS Code and other editors
00:02:27.480 --> 00:02:31.679
and modern themes, are filled with colours. Let's have a
00:02:31.680 --> 00:02:38.039
look. At the top left, you can see Nova theme with a bit of a
00:02:38.040 --> 00:02:42.239
pale greenish background with a few colours. Purple,
00:02:42.240 --> 00:02:47.399
pink, blue, green. You can see some colours like that with
00:02:47.400 --> 00:02:51.519
Nova theme. Nice looking colours, but still colourful. Modus
00:02:51.520 --> 00:02:56.079
Vivendi Tinted, bottom left, is also very nice looking
00:02:56.080 --> 00:02:59.360
modern theme, but quite colourful. The same can be said
00:02:59.361 --> 00:03:03.134
for ef-themes, owl edition at top right,
00:03:03.135 --> 00:03:07.979
and Doom Noe as another, bottom right.
00:03:07.980 --> 00:03:13.759
That led me to think: how can I make my code editing
00:03:13.760 --> 00:03:18.599
and coding tasks not too distracting, and I can focus on
00:03:18.600 --> 00:03:22.759
writing code. That was something I could manage with Org
00:03:22.760 --> 00:03:26.399
Mode, where I just specifically, basically used orange
00:03:26.400 --> 00:03:29.399
shades and not too much more. That's what you're seeing at
00:03:29.400 --> 00:03:33.519
the moment. I wanted to do something similar with coding
00:03:33.520 --> 00:03:37.959
and any general code. That led me to the journey of
00:03:37.960 --> 00:03:42.119
creating my own theme.
NOTE Colour spaces: HSL, LCH , and more
00:03:42.120 --> 00:03:44.679
But before going to the theme, I need to talk about colour
00:03:44.680 --> 00:03:49.079
spaces. sRGB, standard RGB, is probably something that
00:03:49.080 --> 00:03:53.439
many people are familiar with. HSL is for hue, saturation,
00:03:53.440 --> 00:03:58.359
lightness. LCH is for luminance or lightness, chroma, and
00:03:58.360 --> 00:04:03.319
hue. Those are the colour spaces probably common used in
00:04:03.320 --> 00:04:07.999
various spaces, but when it comes to perceptual uniformity,
00:04:08.000 --> 00:04:11.599
there is an important difference between the colour
00:04:11.600 --> 00:04:14.799
spaces. Human perception of colour is not very
00:04:14.800 --> 00:04:17.879
straightforward. We can see in the reference here...
00:04:17.880 --> 00:04:19.506
Let's have a look.
00:04:19.507 --> 00:04:23.159
At the top you can see the shade coming from left
00:04:23.160 --> 00:04:26.370
green to the right blue,
00:04:26.371 --> 00:04:30.959
and in the top image, you can see half of
00:04:30.960 --> 00:04:34.520
it, perhaps, is very similar green colour
00:04:34.521 --> 00:04:36.141
and then when it comes to blue,
00:04:36.142 --> 00:04:40.239
you can see more of the different colour gradients
00:04:40.240 --> 00:04:45.559
coming into play. The bottom colour space is based on a
00:04:45.560 --> 00:04:50.479
perceptually uniform colour space, which gives us a bit more
00:04:50.480 --> 00:04:55.039
evenly distributed colour gradient, which will be
00:04:55.040 --> 00:04:59.039
something more suitable for deciding on the theme setup and
00:04:59.040 --> 00:05:03.999
the colour setup, where you can have various themes that are
00:05:04.000 --> 00:05:10.439
defined for human perceptions.
00:05:10.440 --> 00:05:14.319
Perceptual uniformity is important. For that, it is
00:05:14.320 --> 00:05:17.879
important to mention about CIE, or "International
00:05:17.880 --> 00:05:23.479
Commission of Illumination" in English. They created
00:05:23.480 --> 00:05:29.479
important colour spaces called CIE XYZ which was from 1931,
00:05:29.480 --> 00:05:33.319
CIELAB, and LUV, 1976,
00:05:33.320 --> 00:05:37.519
respectively. Those are the colour spaces used in various
00:05:37.520 --> 00:05:41.839
fields and industries and still relevant. There is a
00:05:41.840 --> 00:05:44.898
quite a bit that you can read up on.
00:05:44.899 --> 00:05:48.960
I'm not a colour expert so have some references here,
00:05:48.961 --> 00:05:52.519
but the TLDR of all of that is
00:05:52.520 --> 00:05:57.525
consider using LCH variants over RGB or HSL
00:05:57.526 --> 00:06:00.606
for better perceptual uniformity.
00:06:00.607 --> 00:06:03.959
Specifically CIE Lab-based LCH,
00:06:03.960 --> 00:06:06.709
which is often called Lab LCH
00:06:06.710 --> 00:06:10.359
or just LCH. CIELUV-based LCH
00:06:10.360 --> 00:06:16.519
is called LUV LCH. There is a new rather modern LCH setup
00:06:16.520 --> 00:06:19.996
called OK LCH which is based on OK Lab.
00:06:19.997 --> 00:06:22.099
So those are the colour spaces
00:06:22.100 --> 00:06:24.279
that are worth looking at when it comes to creating
00:06:24.280 --> 00:06:25.884
shades.
NOTE color.el and ct.el
00:06:25.885 --> 00:06:29.759
How do you create shades? Color.el and ct.el are
00:06:29.760 --> 00:06:33.199
great solutions. You can create shades and different
00:06:33.200 --> 00:06:37.799
colours based on RGB and hex. You can see in the red example
00:06:37.800 --> 00:06:43.839
here, FF0000 is a bright red. You can darken it by providing
00:06:43.840 --> 00:06:48.639
less red values like CC or 88. You can see that the colours
00:06:48.640 --> 00:06:52.839
are slightly darker than the FF0000. But what if you are
00:06:52.840 --> 00:06:57.439
working with the complex colours such as FBB151, this
00:06:57.440 --> 00:07:01.879
particular orange? That's where color.el, ct.el come
00:07:01.880 --> 00:07:05.743
into play. Color.el is a built-in package in Emacs,
00:07:05.744 --> 00:07:08.340
so you can use it by just requiring it.
00:07:08.341 --> 00:07:10.399
color-darken-name and
00:07:10.400 --> 00:07:13.905
providing the colour with the hex value with 40%
00:07:13.906 --> 00:07:16.886
gives you a darker orange
00:07:16.887 --> 00:07:20.039
without doing too much of a colour computation
00:07:20.040 --> 00:07:23.839
by hand. This hex value is something that Emacs
00:07:23.840 --> 00:07:27.319
understands and rainbow mode does as well. When it comes
00:07:27.320 --> 00:07:30.839
to ct.el, it's not a built-in solution, but it's more
00:07:30.840 --> 00:07:34.839
versatile. It works with various colour spaces so you can
00:07:34.840 --> 00:07:41.239
see that ct-edit-hsl-l-dec by 40% would give
00:07:41.240 --> 00:07:47.759
us a darker colour by 40%. We can also use LCH variant which
00:07:47.760 --> 00:07:53.479
can use the LCH colour spaces for darkening the colour. This
00:07:53.480 --> 00:07:56.919
results in slightly different colours for this particular
00:07:56.920 --> 00:08:00.199
orange, but if you're working with the green or blue or some
00:08:00.200 --> 00:08:04.177
other colours, it might be worth looking at LCH variant
00:08:04.178 --> 00:08:08.399
rather than other colour spaces.
NOTE Hasliberg theme
00:08:08.400 --> 00:08:11.203
With that, let's have a look at Hasliberg theme.
00:08:11.204 --> 00:08:13.707
This is a theme that I created personally
00:08:13.708 --> 00:08:16.409
and the name is based on the Swiss Alps
00:08:16.410 --> 00:08:20.479
and with the following ideas in mind. It focuses
00:08:20.480 --> 00:08:25.031
on setting up shades. Shades, by that...
00:08:25.032 --> 00:08:26.999
You can see how the top
00:08:27.000 --> 00:08:31.839
of the heading here is a bright orange colour, and
00:08:31.840 --> 00:08:35.758
other orange colours, this heading and this heading
00:08:35.759 --> 00:08:37.719
are based on the top
00:08:37.720 --> 00:08:40.839
orange colour and then giving some shade and the luminance
00:08:40.840 --> 00:08:44.639
adjustment essentially. It follows a pattern from web
00:08:44.640 --> 00:08:49.039
design and tailwind colour shades are a great example that
00:08:49.040 --> 00:08:50.815
you can have a look.
00:08:50.816 --> 00:08:54.439
It does not use ct.el as it aims to be fully
00:08:54.440 --> 00:08:57.999
dependency free and does not consider colour contrast for
00:08:58.000 --> 00:09:02.119
accessibility. This is because it's personal and I
00:09:02.120 --> 00:09:04.746
don't have that particular need.
00:09:04.747 --> 00:09:06.839
This is based on LuvLCh rather
00:09:06.840 --> 00:09:08.788
than LAB LCH, and that's another reason
00:09:08.789 --> 00:09:11.049
why I didn't use ct.el,
00:09:11.050 --> 00:09:14.119
and it is highly experimental. But the code is
00:09:14.120 --> 00:09:18.279
available at Codeberg and GitHub just for your reference.
00:09:18.280 --> 00:09:23.719
Let's see Hasliberg theme in action. This is the theme
00:09:23.720 --> 00:09:27.159
that we were looking at for org-mode as well, but for the
00:09:27.160 --> 00:09:32.199
code, in this case Elisp. You can see that the colour is
00:09:32.200 --> 00:09:37.559
mostly white and blue with orange sprinkled across for
00:09:37.560 --> 00:09:41.559
string input. You can see some pink showing up as well.
00:09:41.560 --> 00:09:46.399
Essentially, all the colour setup is done by shades, so most of
00:09:46.400 --> 00:09:51.319
it is based on white or neutral, and there will be lighter and
00:09:51.320 --> 00:09:56.159
darker variants that can be set for the primary colour of blue.
00:09:56.160 --> 00:09:59.959
You can see the darker and brighter and lighter colours
00:09:59.960 --> 00:10:05.279
being used. With that shade setup, I only have to provide a
00:10:05.280 --> 00:10:09.599
few colours as the base colours. From there, I can define the
00:10:09.600 --> 00:10:15.959
shades for the theme setup, which leads to creating a more
00:10:15.960 --> 00:10:20.359
monotonic colour setup, where this one is a very monotonic,
00:10:20.360 --> 00:10:25.059
very subtle difference of white colours used for the base
00:10:25.060 --> 00:10:29.039
colours. I don't have to make too many changes to the colour
00:10:29.040 --> 00:10:32.079
setup. I just have to provide the base colours that are
00:10:32.080 --> 00:10:36.399
different. The same can be said for this orange, very orange
00:10:36.400 --> 00:10:39.359
colour theme, which is based on the base colours of
00:10:39.360 --> 00:10:43.639
orange-like colours and gives the shade of various
00:10:43.640 --> 00:10:50.719
different setup. This means that I can use Hasliberg
00:10:50.720 --> 00:10:56.159
Theme Nature colour palette, and that gives me more of a green
00:10:56.160 --> 00:11:00.839
based colour where all the base colours are set up with a
00:11:00.840 --> 00:11:06.239
greenish colour setup.
NOTE Wrap up
00:11:06.240 --> 00:11:10.399
With that, I would like to wrap up with a few ideas when
00:11:10.400 --> 00:11:13.759
adjusting themes and working with colours. Maybe consider
00:11:13.760 --> 00:11:19.359
using CIELAB, CIELUV, or OKLab-based colour spaces that
00:11:19.360 --> 00:11:24.719
would give you different shades which are easier to work
00:11:24.720 --> 00:11:29.199
with for human perceptions. color.el and ct.el can be a
00:11:29.200 --> 00:11:32.559
great tool for making shades and working with colour spaces.
00:11:32.560 --> 00:11:36.239
Hasliberg theme is yet another theme, highly personal
00:11:36.240 --> 00:11:38.999
and experimental, but could be an inspiration for your
00:11:39.000 --> 00:11:44.119
theme journey. With that, why not sprinkle your Emacs with
00:11:44.120 --> 00:11:48.400
your favourite colours? Thank you.
