My journey of finding and creating the “perfect” Emacs theme

MetroWind (he/him) - IRC: MetroWind, Fediverse (pleroma): mw@pleroma.xeno.darksair.org - Matrix: @mw:darksair.org

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-theme.html Etherpad: https://pad.emacsconf.org/2024-theme
Etherpad: https://pad.emacsconf.org/2024-theme
Discuss on IRC: #emacsconf-gen
Status: Q&A open for participation

00:02.140 Introduction
00:48.820 Deviant
01:15.640 FlucUI
02:51.910 Lab
05:25.090 NotInk: grayscale
06:13.930 Random theme
06:50.020 Monte Carlo
07:19.780 How to pick a random color palette
08:12.070 XYZ

Description

In this talk I will share my experience of finding and creating the “perfect” Emacs theme. I will go through the five themes I have created and discuss the motivations and ideas behind them, which will also introduce various color spaces. And I will look into the future to see if there is hope to find the "perfect" theme.

About the speaker:

I'm a long time Emacs user (since Emacs 21). I don't write a lot of elisp but I'm spend vast majority of my screen time with Emacs, and I'm picky about how it looks. This talk shows how may hoops I'm willing to jump through to make it look "right".

Transcript

[00:00:02.140] Introduction

Hi my name is MetroWind. In this talk I will take you through my journey into Emacs themes. I am a long-time Emacs user. I started using Emacs since version 21. The goal of this talk is to inspire more people into making themes. Maybe you are already making themes. In that case I hope you could find some tips and tricks you know in this one I will basically go through all the themes that I created. But I think the most important thing here is to understand why some of the some of the colors are picked, and the motivations behind them.

[00:00:48.820] Deviant

So the first theme I created is called Deviant. It looks like this. The inspiration for this one is a website called DeviantArt. Basically I just use their color palette, you know, from their design. It was a like a community for indie artists. I was really into that, you know, back in the day so that’s that.

[00:01:15.640] FlucUI

Otherwise, nothing special. The next theme I created was called FlucUI It’s in MELPA. And let me just show you. So yeah that's how it looks like. So... but where where did the colors come from, right? To understand that, I'll need to take you back in time, you know, to where iOS 7 was released by Apple. That was a big deal, because that popularized the idea of flat UI color designs; sorry, flat UI designs. And after that, everybody followed suit, and changed their design, you know of all of their websites and applications to use some sort of flat UI design concepts. And about the same time, there came a website called flatuicolors.com. It hosted one color palette, and that was really good! So I picked that as the basis of my theme. And initially I named it FlatUI, But that name was taken in MELPA So i just rename it to something random, FlucUI.

[00:02:51.910] Lab

The next one is called lab. To understand why I needed to create the theme, it's because I thought some of the colors in FlucUI was standing out too much, like the green here. This one. I thought this was too bright. Just a little bit. So I thought I needed way to pick some colors that are about the same lightness essentially. So how would I do that? The answer is to go into a color space called LAB. Now normally you'd do color work in RGB, which is red, green, and blue. It doesn't tell you a lot about lightness. If you do a pure blue, it actually looks a lot darker than a pure red or pure green. So that that doesn't work. But in LAB, thing are different, because one of the channel is L which is lightness. The other two channels are a and b, which are just for colors. This is great because I could just fix L meaning I fixed the lightness, and then I can vary a and b however I want. The color will stay roughly in the same lightness, which is exactly what I wanted. So for that I created a Mac app, where I could just fix lightness like I said, and then I could click on this colorful thing, to pick a color. The app will pick another five according to some pattern. And then I could just like hard-code these colors in Emacs. Let me show you. apply theme... lab... Yeah not very different from FlucUI colors, which was intentional. The idea here again is all the colors will be in about the same lightness, which I guess it was. So yeah... So this one was a success. I use it for a really long time. And then I got bored...

[00:05:25.090] NotInk: grayscale

So I needed something interesting. The idea at the time was then to create a theme that doesn't have any colors essentially. A grayscale theme. So I called it NotInk. It is also in Melpa It looks like this. Yeah like I said, everything is grey. There's no color. But to my surprise, this is actually very useable. I didn't have any problem in readability; I didn't have any problem distinguishing, you know, different elements in the code. So a big surprise. And also a big success actually. And then I got bored.

[00:06:13.930] Random theme

I just decided to install a whole bunch of themes from MELPA, and every time I start Emacs I just pick a random theme. There are some caveats to that, which I don't want to get into. But let me just show you. apply-random-theme, so it picked one for me. And then it picked another... another... So yeah. It's an interesting setup. I'm still using this setup today. Actually a good one Walls of text...

[00:06:50.020] Monte Carlo

Now the final theme I want to look into, which is the latest, is called Monte Carlo. ...which you know, idea here is to bring the idea of picking a random theme to the next level. So this is just one theme that generates a random color palette for me everytime. Not in MELPA, because I'm not ... I'm not completely satisfied with it.

[00:07:19.780] How to pick a random color palette

But anyway... How do I... How do I pick a random color palette right? The answer is again to look at a different color space. This time it's called HLC, which is hue, lightness, and chroma. So hue is just colors, red, green, blue, or yellow, whatever. Lightness is lightness. Chroma is saturation, essentially. This is great because I could fix both lightness and saturation, and only vary in hue to pick my colors. Now the problem is once I have the color palette in HLC, how would I convert it to sRGB, because Emacs only knows about colors in sRGB.

[00:08:12.070] XYZ

The answer here is to go through another color space called XYZ. This is an extremely important color space, because basically all other color spaces are defined on top of XYZ. So you would have like transformations from XYZ to all other color spaces. Now if you invert this these transformations, you could go from, for example, HLC back into XYZ and then go to another color space of your choosing, right. So this is how to convert colors between color spaces. In this case, I have to convert colors from HLC to LAB, and from LAB to XYZ, and from XYZ to sRGB. So this time the conversions are all done in Emacs Lisp, and I have the code in here in this URL. You could take a look, or you could actually just use maybe some package to convert colors. Anyway let me show you how this works. So in this case I could apply theme, Monte Carlo. So this is now a random theme. Actually, well, a theme with random colors, because I could apply the same theme, and it will look different. Every time. I could also look at the colors it picked. as a list of colors. I could also look at this like fancy chart of colors. This is too small. So let me show you this. So basically the same thing. This is actually a cross-section in HLC space, and the colors it picked are these like white circles. So that's that. But like I said, I'm not fully satisfied, because most of time the colors are pretty boring from it. I could think of some ways to improve this. For example I could choose different patterns for the color samples. but I don't know of any good patterns. So I need to try things out. And then another way is probably to use different color spaces like the HSL, or HSV. Again I need to try this out. So yeah there are room for improvements. If you... If you have and idea, you know, let me know, and we can try it out. So that's the end of my talk. Hopefully you have some new ideas. Thanks for listening in, and yeah. Go create more themes because we can't have enough. Thanks!

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