Colour your Emacs with ease

Ryota Sawada (he/him) - Pronunciation: Ree-yo-tah, https://hachyderm.io/@rytswd https://x.com/rytswd

The following image shows where the talk is in the schedule for Sat 2024-12-07. Solid lines show talks with Q&A via BigBlueButton. Dashed lines show talks with Q&A via IRC or Etherpad.

Format: 12-min talk ; Q&A: BigBlueButton conference room https://media.emacsconf.org/2024/current/bbb-color.html Etherpad: https://pad.emacsconf.org/2024-color
Etherpad: https://pad.emacsconf.org/2024-color
Discuss on IRC: #emacsconf-gen
Status: Q&A open for participation

00:00.000 Introduction
00:58.668 What colour do you like?
03:42.120 Colour spaces: HSL, LCH , and more
06:25.885 color.el and ct.el
08:08.400 Hasliberg theme
11:06.240 Wrap up

Description

Emacs comes with various themes to pick from, and there are myriad different themes out on the Internet. After choosing a theme, you can make any adjustments to add or remove certain colours exactly as you wish. Emacs provides you so much control over how you work, write, code, and everything in between, including the colour choice. You are certainly left equipped with all the controls for your theme as well.

However, when it comes to colour, there is a bit of difficulty: RGB. Hexadecimal colour codes are ubiquitous and relatively easy to understand. Yet, they are difficult to work with, especially when you need to make different shades and variants. In recent years, CSS started to support not just sRGB (standard RGB), but other colour spaces such as HSL, Oklab, etc. With Emacs, we also have a great set of tools from color.el, as well as this amazing package called ct.el (https://github.com/neeasade/ct.el)

In this talk, we will have a quick look at different colour spaces than sRGB, namely HSL and LCH. We will check out how ct.el can make a set of colour shades and variants at ease, and how they can help define themes. Finally, Ryota will share his own theme called Hasliberg Theme, which is using the full power of LCH.

Resources (will be public starting Dec 7):

• https://codeberg.org/rytswd/emacsconf-2024
• https://github.com/rytswd/hasliberg-theme

About the speaker:

Ryota started his Emacs journey more than a decade ago, but was forced to put it aside for work requirements soon after. A few years ago, he made a return to Emacs, and now is using Emacs almost exclusively for any sort of coding tasks. This talk focuses on the modern Emacs setup where he thinks his Emacs looks and works better than many other editors. He works for Civo as a Principal Engineer.

Transcript

[00:00:00.000] Introduction

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.

[00:00:58.668] What colour do you like?

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.

[00:03:42.120] Colour spaces: HSL, LCH , and more

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.

[00:06:25.885] color.el and ct.el

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.

[00:08:08.400] Hasliberg theme

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.

[00:11:06.240] Wrap up

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.

Captioner: sachac

Questions or comments? Please e-mail emacsconf-org-private@gnu.org