path: root/2024/captions/emacsconf-2024-theme--my-journey-of-finding-and-creating-the-perfect-emacs-theme--metrowind--main.vtt

WEBVTT captioned by MetroWind

NOTE Introduction

00:02.140 --> 00:05.440
Hi my name is MetroWind.

00:05.440 --> 00:12.910
In this talk I will take you through my journey into Emacs themes.

00:12.970 --> 00:15.730
I am a long-time Emacs user. I started using

00:15.760 --> 00:17.770
Emacs since version 21.

00:19.090 --> 00:22.960
The goal of this talk is to inspire more people into making themes.

00:24.070 --> 00:26.350
Maybe you are already making themes.

00:26.350 --> 00:29.410
In that case I hope you could find some tips and tricks

00:30.550 --> 00:33.670
you know in this one

00:33.670 --> 00:36.070
I will basically go through all the themes

00:36.130 --> 00:36.910
that I created.

00:37.960 --> 00:40.000
But I think the most important thing

00:40.000 --> 00:42.910
here is to understand why some of

00:42.910 --> 00:44.620
the some of the colors are picked,

00:44.860 --> 00:47.560
and the motivations behind them.

NOTE Deviant

00:48.820 --> 00:50.800
So the first theme I created is

00:50.800 --> 00:54.190
called Deviant. It looks like this.

00:55.810 --> 00:57.730
The inspiration for this one is a

00:57.730 --> 01:00.820
website called DeviantArt. Basically I just

01:00.850 --> 01:03.580
use their color palette, you know, from their design.

01:04.810 --> 01:10.750
It was a like a community for indie artists.

01:10.750 --> 01:12.820
I was really into that, you know,

01:12.820 --> 01:14.470
back in the day so that’s that.

NOTE FlucUI

01:15.640 --> 01:19.090
Otherwise, nothing special. The next theme

01:19.120 --> 01:21.220
I created was called FlucUI

01:24.820 --> 01:25.630
It’s in MELPA.

01:26.530 --> 01:27.640
And let me just show you.

01:35.260 --> 01:37.600
So yeah that's how it looks like.

01:42.280 --> 01:45.250
So... but where where did the colors

01:45.250 --> 01:49.060
come from, right? To understand that,

01:50.290 --> 01:55.270
I'll need to take you back in time, you know, to where iOS 7

01:55.330 --> 01:58.000
was released by Apple. That was a

01:58.000 --> 02:01.900
big deal, because that popularized the idea

02:01.930 --> 02:05.290
of flat UI color designs; sorry, flat UI

02:05.290 --> 02:10.360
designs. And after that, everybody followed suit,

02:10.360 --> 02:14.440
and changed their design, you know

02:14.440 --> 02:22.420
of all of their websites and applications to use some sort of flat UI design concepts.

02:23.470 --> 02:27.550
And about the same time, there came a website called flatuicolors.com.

02:28.720 --> 02:30.820
It hosted one color palette,

02:32.110 --> 02:34.030
and that was really good!

02:35.110 --> 02:39.490
So I picked that as the basis of my theme.

02:40.900 --> 02:43.959
And initially I named it FlatUI,

02:43.959 --> 02:46.717
But that name was taken in MELPA

02:46.717 --> 02:50.320
So i just rename it to something random, FlucUI.

NOTE Lab

02:51.910 --> 02:55.060
The next one is called lab.

02:57.310 --> 03:00.340
To understand why I needed to create the theme,

03:03.850 --> 03:08.620
it's because I thought some of the colors in FlucUI

03:10.780 --> 03:15.250
was standing out too much, like the green here.

03:18.010 --> 03:18.640
This one.

03:20.170 --> 03:22.090
I thought this was too bright.

03:22.780 --> 03:26.050
Just a little bit.

03:27.100 --> 03:30.100
So I thought I needed way to pick

03:30.100 --> 03:32.890
some colors that are about the same

03:32.890 --> 03:35.350
lightness essentially. So how would I do that?

03:35.350 --> 03:42.370
The answer is to go into a color space called LAB.

03:42.880 --> 03:45.130
Now normally you'd do color work in RGB,

03:46.420 --> 03:49.300
which is red, green, and blue.

03:49.660 --> 03:52.420
It doesn't tell you a lot about lightness.

03:53.830 --> 03:56.440
If you do a pure blue,

03:56.440 --> 03:58.600
it actually looks a lot darker than a

03:58.600 --> 04:01.510
pure red or pure green. So that

04:01.631 --> 04:04.990
that doesn't work. But in LAB,

04:04.990 --> 04:07.120
thing are different, because one of the channel

04:07.360 --> 04:10.810
is L which is lightness. The other

04:10.810 --> 04:13.600
two channels are a and b, which are just

04:13.750 --> 04:17.140
for colors. This is great because

04:17.140 --> 04:19.630
I could just fix L meaning

04:19.630 --> 04:21.790
I fixed the lightness, and then I can

04:21.790 --> 04:25.300
vary a and b however I want.

04:25.300 --> 04:27.850
The color will stay roughly in the same

04:27.850 --> 04:30.310
lightness, which is exactly what I wanted.

04:31.780 --> 04:34.210
So for that I created a

04:34.210 --> 04:38.230
Mac app, where I could just

04:38.230 --> 04:40.330
fix lightness like I said, and then

04:40.330 --> 04:42.550
I could click on this colorful thing,

04:42.670 --> 04:45.010
to pick a color. The app will

04:45.010 --> 04:47.950
pick another five according to some pattern.

04:48.430 --> 04:50.140
And then I could just like hard-code

04:50.140 --> 04:51.640
these colors in Emacs.

04:52.930 --> 04:54.160
Let me show you.

04:56.230 --> 04:58.000
apply theme... lab...

04:59.590 --> 05:02.110
Yeah not very different from FlucUI colors,

05:02.140 --> 05:04.300
which was intentional.

05:05.350 --> 05:08.200
The idea here again is

05:08.380 --> 05:10.660
all the colors will be in about

05:10.660 --> 05:13.570
the same lightness, which I guess it was.

05:14.230 --> 05:18.250
So yeah... So this one was

05:18.280 --> 05:20.830
a success. I use it for a

05:20.830 --> 05:23.440
really long time. And then I got bored...

NOTE NotInk: grayscale

05:25.090 --> 05:28.150
So I needed something interesting.

05:28.150 --> 05:31.900
The idea at the time was then to create a theme

05:33.460 --> 05:36.310
that doesn't have any colors essentially.

05:36.310 --> 05:41.740
A grayscale theme. So I called

05:41.740 --> 05:44.830
it NotInk. It is also in Melpa

05:46.060 --> 05:46.960
It looks like this.

05:49.210 --> 05:50.650
Yeah like I said, everything is grey.

05:51.310 --> 05:53.530
There's no color. But to my

05:53.530 --> 05:56.500
surprise, this is actually very useable.

05:56.500 --> 05:59.500
I didn't have any problem in readability;

05:59.500 --> 06:02.170
I didn't have any problem distinguishing, you know,

06:02.170 --> 06:05.857
different elements in the code. So a

06:05.857 --> 06:09.460
big surprise. And also a big success actually.

06:10.720 --> 06:13.930
And then I got bored.

NOTE Random theme

06:13.930 --> 06:16.360
I just decided to install a whole bunch

06:16.360 --> 06:17.710
of themes from MELPA,

06:18.310 --> 06:20.650
and every time I start Emacs I

06:20.650 --> 06:21.760
just pick a random theme.

06:23.200 --> 06:25.660
There are some caveats to that,

06:25.660 --> 06:27.280
which I don't want to get into.

06:28.660 --> 06:31.210
But let me just show you.

06:31.210 --> 06:33.130
apply-random-theme, so it picked one for

06:33.130 --> 06:37.030
me. And then it picked another... another...

06:37.060 --> 06:37.600
So yeah.

06:39.490 --> 06:42.340
It's an interesting setup. I'm still using

06:42.340 --> 06:45.010
this setup today. Actually a good one

06:46.150 --> 06:48.580
Walls of text...

NOTE Monte Carlo

06:50.020 --> 06:52.240
Now the final theme I want to look into,

06:53.380 --> 06:55.750
which is the latest, is called Monte Carlo.

06:56.650 --> 06:59.110
...which you know, idea here is to

06:59.110 --> 07:01.947
bring the idea of picking a random

07:01.990 --> 07:05.620
theme to the next level.

07:05.620 --> 07:08.440
So this is just one theme that generates

07:08.470 --> 07:11.530
a random color palette for me everytime.

07:12.880 --> 07:15.400
Not in MELPA, because I'm not ...

07:15.419 --> 07:18.370
I'm not completely satisfied with it.

NOTE How to pick a random color palette

07:19.780 --> 07:22.510
But anyway... How do I... How do I pick

07:22.540 --> 07:23.830
a random color palette right?

07:25.030 --> 07:29.680
The answer is again to look at a different color space.

07:29.680 --> 07:32.890
This time it's called HLC, which is hue,

07:32.950 --> 07:36.370
lightness, and chroma. So hue is just

07:36.670 --> 07:40.270
colors, red, green, blue, or yellow, whatever.

07:40.810 --> 07:44.200
Lightness is lightness. Chroma is saturation,

07:45.160 --> 07:47.800
essentially. This is great because I could

07:48.160 --> 07:52.150
fix both lightness and saturation, and only

07:52.150 --> 07:55.180
vary in hue to pick my colors.

07:57.580 --> 08:00.190
Now the problem is

08:01.660 --> 08:03.220
once I have the color palette in

08:03.250 --> 08:06.105
HLC, how would I convert it to

08:06.105 --> 08:09.250
sRGB, because Emacs only knows

08:09.250 --> 08:10.870
about colors in sRGB.

NOTE XYZ

08:12.070 --> 08:14.230
The answer here is to go through

08:14.230 --> 08:16.450
another color space called XYZ.

08:17.950 --> 08:21.340
This is an extremely important color space,

08:21.670 --> 08:25.870
because basically all other color spaces are

08:25.870 --> 08:27.790
defined on top of XYZ.

08:28.930 --> 08:31.180
So you would have like transformations

08:31.180 --> 08:34.450
from XYZ to all other

08:34.480 --> 08:37.570
color spaces. Now if you invert this

08:37.750 --> 08:41.440
these transformations, you could go from,

08:41.440 --> 08:43.870
for example, HLC back into XYZ

08:43.900 --> 08:46.960
and then go to another color

08:46.960 --> 08:48.910
space of your choosing, right.

08:49.750 --> 08:51.400
So this is how to convert colors

08:51.430 --> 08:54.970
between color spaces. In this case,

08:55.270 --> 08:57.850
I have to convert colors from HLC

08:57.850 --> 08:59.920
to LAB, and from LAB to XYZ,

08:59.920 --> 09:02.530
and from XYZ to sRGB.

09:02.530 --> 09:05.710
So this time the conversions are

09:05.710 --> 09:08.200
all done in Emacs Lisp, and I

09:08.200 --> 09:13.270
have the code in here in this URL.

09:13.270 --> 09:14.830
You could take a look, or you

09:14.830 --> 09:17.350
could actually just use maybe some package

09:18.310 --> 09:19.390
to convert colors.

09:20.470 --> 09:23.740
Anyway let me show you how

09:23.740 --> 09:26.560
this works. So in this case I

09:26.590 --> 09:29.200
could apply theme, Monte Carlo.

09:30.670 --> 09:33.760
So this is now a random theme.

09:33.790 --> 09:36.730
Actually, well, a theme with random colors,

09:37.150 --> 09:39.580
because I could apply the same theme,

09:40.960 --> 09:41.920
and it will look different.

09:45.250 --> 09:45.790
Every time.

09:48.640 --> 09:52.060
I could also look at the colors it picked.

09:53.750 --> 09:55.100
as a list of colors.

09:57.740 --> 10:00.260
I could also look at this like

10:00.260 --> 10:04.370
fancy chart of colors. This is

10:04.370 --> 10:06.920
too small. So let me show you this.

10:06.920 --> 10:10.400
So basically the same thing.

10:10.400 --> 10:15.650
This is actually a cross-section in HLC space,

10:16.310 --> 10:18.650
and the colors it picked are these like

10:18.650 --> 10:19.520
white circles.

10:20.660 --> 10:23.060
So that's that.

10:24.740 --> 10:26.150
But like I said, I'm not

10:26.150 --> 10:30.170
fully satisfied, because most of time the

10:30.170 --> 10:32.540
colors are pretty boring from it.

10:33.770 --> 10:36.320
I could think of some

10:36.320 --> 10:38.570
ways to improve this. For example I

10:38.570 --> 10:43.485
could choose different patterns for the color

10:43.490 --> 10:47.540
samples. but I don't know of any

10:47.900 --> 10:49.880
good patterns. So I need to try

10:49.880 --> 10:52.130
things out. And then another way is

10:52.130 --> 10:59.960
probably to use different color spaces like the HSL, or HSV.

10:59.960 --> 11:01.100
Again I need to try this out.

11:02.240 --> 11:04.880
So yeah there are room for improvements.

11:05.120 --> 11:07.220
If you... If you have and idea,

11:07.520 --> 11:09.860
you know, let me know, and we

11:09.860 --> 11:10.580
can try it out.

11:11.960 --> 11:13.610
So that's the end of my talk.

11:13.880 --> 11:17.390
Hopefully you have some new ideas.

11:17.450 --> 11:20.240
Thanks for listening in, and yeah.

11:20.240 --> 11:22.400
Go create more themes because we can't have enough.

11:22.400 --> 11:23.540
Thanks!