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!
