diff options
Diffstat (limited to '2024/captions')
2 files changed, 648 insertions, 0 deletions
diff --git a/2024/captions/emacsconf-2024-theme--my-journey-of-finding-and-creating-the-perfect-emacs-theme--metrowind--main--chapters.vtt b/2024/captions/emacsconf-2024-theme--my-journey-of-finding-and-creating-the-perfect-emacs-theme--metrowind--main--chapters.vtt new file mode 100644 index 00000000..51441945 --- /dev/null +++ b/2024/captions/emacsconf-2024-theme--my-journey-of-finding-and-creating-the-perfect-emacs-theme--metrowind--main--chapters.vtt @@ -0,0 +1,29 @@ +WEBVTT + + +00:00:02.140 --> 00:00:47.560 +Introduction + +00:00:48.820 --> 00:01:14.470 +Deviant + +00:01:15.640 --> 00:02:50.320 +FlucUI + +00:02:51.910 --> 00:05:23.440 +Lab + +00:05:25.090 --> 00:06:13.930 +NotInk: grayscale + +00:06:13.930 --> 00:06:48.580 +Random theme + +00:06:50.020 --> 00:07:18.370 +Monte Carlo + +00:07:19.780 --> 00:08:10.870 +How to pick a random color palette + +00:08:12.070 --> 00:11:23.540 +XYZ diff --git a/2024/captions/emacsconf-2024-theme--my-journey-of-finding-and-creating-the-perfect-emacs-theme--metrowind--main.vtt b/2024/captions/emacsconf-2024-theme--my-journey-of-finding-and-creating-the-perfect-emacs-theme--metrowind--main.vtt new file mode 100644 index 00000000..3f132c9a --- /dev/null +++ b/2024/captions/emacsconf-2024-theme--my-journey-of-finding-and-creating-the-perfect-emacs-theme--metrowind--main.vtt @@ -0,0 +1,619 @@ +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! |