diff options
Diffstat (limited to '2024')
4 files changed, 891 insertions, 1 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! diff --git a/2024/info/theme-after.md b/2024/info/theme-after.md index 93a9ea39..d127825b 100644 --- a/2024/info/theme-after.md +++ b/2024/info/theme-after.md @@ -1,6 +1,237 @@ <!-- Automatically generated by emacsconf-publish-after-page --> +<a name="theme-mainVideo-transcript"></a> +# Transcript + + +[[!template new="1" text="""Introduction""" start="00:00:02.140" video="mainVideo-theme" id="subtitle"]] + +[[!template text="""Hi my name is MetroWind.""" start="00:00:02.140" video="mainVideo-theme" id="subtitle"]] +[[!template text="""In this talk I will take you through my journey into Emacs themes.""" start="00:00:05.440" video="mainVideo-theme" id="subtitle"]] +[[!template text="""I am a long-time Emacs user. I started using""" start="00:00:12.970" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Emacs since version 21.""" start="00:00:15.760" video="mainVideo-theme" id="subtitle"]] +[[!template text="""The goal of this talk is to inspire more people into making themes.""" start="00:00:19.090" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Maybe you are already making themes.""" start="00:00:24.070" video="mainVideo-theme" id="subtitle"]] +[[!template text="""In that case I hope you could find some tips and tricks""" start="00:00:26.350" video="mainVideo-theme" id="subtitle"]] +[[!template text="""you know in this one""" start="00:00:30.550" video="mainVideo-theme" id="subtitle"]] +[[!template text="""I will basically go through all the themes""" start="00:00:33.670" video="mainVideo-theme" id="subtitle"]] +[[!template text="""that I created.""" start="00:00:36.130" video="mainVideo-theme" id="subtitle"]] +[[!template text="""But I think the most important thing""" start="00:00:37.960" video="mainVideo-theme" id="subtitle"]] +[[!template text="""here is to understand why some of""" start="00:00:40.000" video="mainVideo-theme" id="subtitle"]] +[[!template text="""the some of the colors are picked,""" start="00:00:42.910" video="mainVideo-theme" id="subtitle"]] +[[!template text="""and the motivations behind them.""" start="00:00:44.860" video="mainVideo-theme" id="subtitle"]] + +[[!template new="1" text="""Deviant""" start="00:00:48.820" video="mainVideo-theme" id="subtitle"]] + +[[!template text="""So the first theme I created is""" start="00:00:48.820" video="mainVideo-theme" id="subtitle"]] +[[!template text="""called Deviant. It looks like this.""" start="00:00:50.800" video="mainVideo-theme" id="subtitle"]] +[[!template text="""The inspiration for this one is a""" start="00:00:55.810" video="mainVideo-theme" id="subtitle"]] +[[!template text="""website called DeviantArt. Basically I just""" start="00:00:57.730" video="mainVideo-theme" id="subtitle"]] +[[!template text="""use their color palette, you know, from their design.""" start="00:01:00.850" video="mainVideo-theme" id="subtitle"]] +[[!template text="""It was a like a community for indie artists.""" start="00:01:04.810" video="mainVideo-theme" id="subtitle"]] +[[!template text="""I was really into that, you know,""" start="00:01:10.750" video="mainVideo-theme" id="subtitle"]] +[[!template text="""back in the day so that’s that.""" start="00:01:12.820" video="mainVideo-theme" id="subtitle"]] + +[[!template new="1" text="""FlucUI""" start="00:01:15.640" video="mainVideo-theme" id="subtitle"]] + +[[!template text="""Otherwise, nothing special. The next theme""" start="00:01:15.640" video="mainVideo-theme" id="subtitle"]] +[[!template text="""I created was called FlucUI""" start="00:01:19.120" video="mainVideo-theme" id="subtitle"]] +[[!template text="""It’s in MELPA.""" start="00:01:24.820" video="mainVideo-theme" id="subtitle"]] +[[!template text="""And let me just show you.""" start="00:01:26.530" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So yeah that's how it looks like.""" start="00:01:35.260" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So... but where where did the colors""" start="00:01:42.280" video="mainVideo-theme" id="subtitle"]] +[[!template text="""come from, right? To understand that,""" start="00:01:45.250" video="mainVideo-theme" id="subtitle"]] +[[!template text="""I'll need to take you back in time, you know, to where iOS 7""" start="00:01:50.290" video="mainVideo-theme" id="subtitle"]] +[[!template text="""was released by Apple. That was a""" start="00:01:55.330" video="mainVideo-theme" id="subtitle"]] +[[!template text="""big deal, because that popularized the idea""" start="00:01:58.000" video="mainVideo-theme" id="subtitle"]] +[[!template text="""of flat UI color designs; sorry, flat UI""" start="00:02:01.930" video="mainVideo-theme" id="subtitle"]] +[[!template text="""designs. And after that, everybody followed suit,""" start="00:02:05.290" video="mainVideo-theme" id="subtitle"]] +[[!template text="""and changed their design, you know""" start="00:02:10.360" video="mainVideo-theme" id="subtitle"]] +[[!template text="""of all of their websites and applications to use some sort of flat UI design concepts.""" start="00:02:14.440" video="mainVideo-theme" id="subtitle"]] +[[!template text="""And about the same time, there came a website called flatuicolors.com.""" start="00:02:23.470" video="mainVideo-theme" id="subtitle"]] +[[!template text="""It hosted one color palette,""" start="00:02:28.720" video="mainVideo-theme" id="subtitle"]] +[[!template text="""and that was really good!""" start="00:02:32.110" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So I picked that as the basis of my theme.""" start="00:02:35.110" video="mainVideo-theme" id="subtitle"]] +[[!template text="""And initially I named it FlatUI,""" start="00:02:40.900" video="mainVideo-theme" id="subtitle"]] +[[!template text="""But that name was taken in MELPA""" start="00:02:43.959" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So i just rename it to something random, FlucUI.""" start="00:02:46.717" video="mainVideo-theme" id="subtitle"]] + +[[!template new="1" text="""Lab""" start="00:02:51.910" video="mainVideo-theme" id="subtitle"]] + +[[!template text="""The next one is called lab.""" start="00:02:51.910" video="mainVideo-theme" id="subtitle"]] +[[!template text="""To understand why I needed to create the theme,""" start="00:02:57.310" video="mainVideo-theme" id="subtitle"]] +[[!template text="""it's because I thought some of the colors in FlucUI""" start="00:03:03.850" video="mainVideo-theme" id="subtitle"]] +[[!template text="""was standing out too much, like the green here.""" start="00:03:10.780" video="mainVideo-theme" id="subtitle"]] +[[!template text="""This one.""" start="00:03:18.010" video="mainVideo-theme" id="subtitle"]] +[[!template text="""I thought this was too bright.""" start="00:03:20.170" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Just a little bit.""" start="00:03:22.780" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So I thought I needed way to pick""" start="00:03:27.100" video="mainVideo-theme" id="subtitle"]] +[[!template text="""some colors that are about the same""" start="00:03:30.100" video="mainVideo-theme" id="subtitle"]] +[[!template text="""lightness essentially. So how would I do that?""" start="00:03:32.890" video="mainVideo-theme" id="subtitle"]] +[[!template text="""The answer is to go into a color space called LAB.""" start="00:03:35.350" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Now normally you'd do color work in RGB,""" start="00:03:42.880" video="mainVideo-theme" id="subtitle"]] +[[!template text="""which is red, green, and blue.""" start="00:03:46.420" video="mainVideo-theme" id="subtitle"]] +[[!template text="""It doesn't tell you a lot about lightness.""" start="00:03:49.660" video="mainVideo-theme" id="subtitle"]] +[[!template text="""If you do a pure blue,""" start="00:03:53.830" video="mainVideo-theme" id="subtitle"]] +[[!template text="""it actually looks a lot darker than a""" start="00:03:56.440" video="mainVideo-theme" id="subtitle"]] +[[!template text="""pure red or pure green. So that""" start="00:03:58.600" video="mainVideo-theme" id="subtitle"]] +[[!template text="""that doesn't work. But in LAB,""" start="00:04:01.631" video="mainVideo-theme" id="subtitle"]] +[[!template text="""thing are different, because one of the channel""" start="00:04:04.990" video="mainVideo-theme" id="subtitle"]] +[[!template text="""is L which is lightness. The other""" start="00:04:07.360" video="mainVideo-theme" id="subtitle"]] +[[!template text="""two channels are a and b, which are just""" start="00:04:10.810" video="mainVideo-theme" id="subtitle"]] +[[!template text="""for colors. This is great because""" start="00:04:13.750" video="mainVideo-theme" id="subtitle"]] +[[!template text="""I could just fix L meaning""" start="00:04:17.140" video="mainVideo-theme" id="subtitle"]] +[[!template text="""I fixed the lightness, and then I can""" start="00:04:19.630" video="mainVideo-theme" id="subtitle"]] +[[!template text="""vary a and b however I want.""" start="00:04:21.790" video="mainVideo-theme" id="subtitle"]] +[[!template text="""The color will stay roughly in the same""" start="00:04:25.300" video="mainVideo-theme" id="subtitle"]] +[[!template text="""lightness, which is exactly what I wanted.""" start="00:04:27.850" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So for that I created a""" start="00:04:31.780" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Mac app, where I could just""" start="00:04:34.210" video="mainVideo-theme" id="subtitle"]] +[[!template text="""fix lightness like I said, and then""" start="00:04:38.230" video="mainVideo-theme" id="subtitle"]] +[[!template text="""I could click on this colorful thing,""" start="00:04:40.330" video="mainVideo-theme" id="subtitle"]] +[[!template text="""to pick a color. The app will""" start="00:04:42.670" video="mainVideo-theme" id="subtitle"]] +[[!template text="""pick another five according to some pattern.""" start="00:04:45.010" video="mainVideo-theme" id="subtitle"]] +[[!template text="""And then I could just like hard-code""" start="00:04:48.430" video="mainVideo-theme" id="subtitle"]] +[[!template text="""these colors in Emacs.""" start="00:04:50.140" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Let me show you.""" start="00:04:52.930" video="mainVideo-theme" id="subtitle"]] +[[!template text="""apply theme... lab...""" start="00:04:56.230" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Yeah not very different from FlucUI colors,""" start="00:04:59.590" video="mainVideo-theme" id="subtitle"]] +[[!template text="""which was intentional.""" start="00:05:02.140" video="mainVideo-theme" id="subtitle"]] +[[!template text="""The idea here again is""" start="00:05:05.350" video="mainVideo-theme" id="subtitle"]] +[[!template text="""all the colors will be in about""" start="00:05:08.380" video="mainVideo-theme" id="subtitle"]] +[[!template text="""the same lightness, which I guess it was.""" start="00:05:10.660" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So yeah... So this one was""" start="00:05:14.230" video="mainVideo-theme" id="subtitle"]] +[[!template text="""a success. I use it for a""" start="00:05:18.280" video="mainVideo-theme" id="subtitle"]] +[[!template text="""really long time. And then I got bored...""" start="00:05:20.830" video="mainVideo-theme" id="subtitle"]] + +[[!template new="1" text="""NotInk: grayscale""" start="00:05:25.090" video="mainVideo-theme" id="subtitle"]] + +[[!template text="""So I needed something interesting.""" start="00:05:25.090" video="mainVideo-theme" id="subtitle"]] +[[!template text="""The idea at the time was then to create a theme""" start="00:05:28.150" video="mainVideo-theme" id="subtitle"]] +[[!template text="""that doesn't have any colors essentially.""" start="00:05:33.460" video="mainVideo-theme" id="subtitle"]] +[[!template text="""A grayscale theme. So I called""" start="00:05:36.310" video="mainVideo-theme" id="subtitle"]] +[[!template text="""it NotInk. It is also in Melpa""" start="00:05:41.740" video="mainVideo-theme" id="subtitle"]] +[[!template text="""It looks like this.""" start="00:05:46.060" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Yeah like I said, everything is grey.""" start="00:05:49.210" video="mainVideo-theme" id="subtitle"]] +[[!template text="""There's no color. But to my""" start="00:05:51.310" video="mainVideo-theme" id="subtitle"]] +[[!template text="""surprise, this is actually very useable.""" start="00:05:53.530" video="mainVideo-theme" id="subtitle"]] +[[!template text="""I didn't have any problem in readability;""" start="00:05:56.500" video="mainVideo-theme" id="subtitle"]] +[[!template text="""I didn't have any problem distinguishing, you know,""" start="00:05:59.500" video="mainVideo-theme" id="subtitle"]] +[[!template text="""different elements in the code. So a""" start="00:06:02.170" video="mainVideo-theme" id="subtitle"]] +[[!template text="""big surprise. And also a big success actually.""" start="00:06:05.857" video="mainVideo-theme" id="subtitle"]] +[[!template text="""And then I got bored.""" start="00:06:10.720" video="mainVideo-theme" id="subtitle"]] + +[[!template new="1" text="""Random theme""" start="00:06:13.930" video="mainVideo-theme" id="subtitle"]] + +[[!template text="""I just decided to install a whole bunch""" start="00:06:13.930" video="mainVideo-theme" id="subtitle"]] +[[!template text="""of themes from MELPA,""" start="00:06:16.360" video="mainVideo-theme" id="subtitle"]] +[[!template text="""and every time I start Emacs I""" start="00:06:18.310" video="mainVideo-theme" id="subtitle"]] +[[!template text="""just pick a random theme.""" start="00:06:20.650" video="mainVideo-theme" id="subtitle"]] +[[!template text="""There are some caveats to that,""" start="00:06:23.200" video="mainVideo-theme" id="subtitle"]] +[[!template text="""which I don't want to get into.""" start="00:06:25.660" video="mainVideo-theme" id="subtitle"]] +[[!template text="""But let me just show you.""" start="00:06:28.660" video="mainVideo-theme" id="subtitle"]] +[[!template text="""apply-random-theme, so it picked one for""" start="00:06:31.210" video="mainVideo-theme" id="subtitle"]] +[[!template text="""me. And then it picked another... another...""" start="00:06:33.130" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So yeah.""" start="00:06:37.060" video="mainVideo-theme" id="subtitle"]] +[[!template text="""It's an interesting setup. I'm still using""" start="00:06:39.490" video="mainVideo-theme" id="subtitle"]] +[[!template text="""this setup today. Actually a good one""" start="00:06:42.340" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Walls of text...""" start="00:06:46.150" video="mainVideo-theme" id="subtitle"]] + +[[!template new="1" text="""Monte Carlo""" start="00:06:50.020" video="mainVideo-theme" id="subtitle"]] + +[[!template text="""Now the final theme I want to look into,""" start="00:06:50.020" video="mainVideo-theme" id="subtitle"]] +[[!template text="""which is the latest, is called Monte Carlo.""" start="00:06:53.380" video="mainVideo-theme" id="subtitle"]] +[[!template text="""...which you know, idea here is to""" start="00:06:56.650" video="mainVideo-theme" id="subtitle"]] +[[!template text="""bring the idea of picking a random""" start="00:06:59.110" video="mainVideo-theme" id="subtitle"]] +[[!template text="""theme to the next level.""" start="00:07:01.990" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So this is just one theme that generates""" start="00:07:05.620" video="mainVideo-theme" id="subtitle"]] +[[!template text="""a random color palette for me everytime.""" start="00:07:08.470" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Not in MELPA, because I'm not ...""" start="00:07:12.880" video="mainVideo-theme" id="subtitle"]] +[[!template text="""I'm not completely satisfied with it.""" start="00:07:15.419" video="mainVideo-theme" id="subtitle"]] + +[[!template new="1" text="""How to pick a random color palette""" start="00:07:19.780" video="mainVideo-theme" id="subtitle"]] + +[[!template text="""But anyway... How do I... How do I pick""" start="00:07:19.780" video="mainVideo-theme" id="subtitle"]] +[[!template text="""a random color palette right?""" start="00:07:22.540" video="mainVideo-theme" id="subtitle"]] +[[!template text="""The answer is again to look at a different color space.""" start="00:07:25.030" video="mainVideo-theme" id="subtitle"]] +[[!template text="""This time it's called HLC, which is hue,""" start="00:07:29.680" video="mainVideo-theme" id="subtitle"]] +[[!template text="""lightness, and chroma. So hue is just""" start="00:07:32.950" video="mainVideo-theme" id="subtitle"]] +[[!template text="""colors, red, green, blue, or yellow, whatever.""" start="00:07:36.670" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Lightness is lightness. Chroma is saturation,""" start="00:07:40.810" video="mainVideo-theme" id="subtitle"]] +[[!template text="""essentially. This is great because I could""" start="00:07:45.160" video="mainVideo-theme" id="subtitle"]] +[[!template text="""fix both lightness and saturation, and only""" start="00:07:48.160" video="mainVideo-theme" id="subtitle"]] +[[!template text="""vary in hue to pick my colors.""" start="00:07:52.150" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Now the problem is""" start="00:07:57.580" video="mainVideo-theme" id="subtitle"]] +[[!template text="""once I have the color palette in""" start="00:08:01.660" video="mainVideo-theme" id="subtitle"]] +[[!template text="""HLC, how would I convert it to""" start="00:08:03.250" video="mainVideo-theme" id="subtitle"]] +[[!template text="""sRGB, because Emacs only knows""" start="00:08:06.105" video="mainVideo-theme" id="subtitle"]] +[[!template text="""about colors in sRGB.""" start="00:08:09.250" video="mainVideo-theme" id="subtitle"]] + +[[!template new="1" text="""XYZ""" start="00:08:12.070" video="mainVideo-theme" id="subtitle"]] + +[[!template text="""The answer here is to go through""" start="00:08:12.070" video="mainVideo-theme" id="subtitle"]] +[[!template text="""another color space called XYZ.""" start="00:08:14.230" video="mainVideo-theme" id="subtitle"]] +[[!template text="""This is an extremely important color space,""" start="00:08:17.950" video="mainVideo-theme" id="subtitle"]] +[[!template text="""because basically all other color spaces are""" start="00:08:21.670" video="mainVideo-theme" id="subtitle"]] +[[!template text="""defined on top of XYZ.""" start="00:08:25.870" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So you would have like transformations""" start="00:08:28.930" video="mainVideo-theme" id="subtitle"]] +[[!template text="""from XYZ to all other""" start="00:08:31.180" video="mainVideo-theme" id="subtitle"]] +[[!template text="""color spaces. Now if you invert this""" start="00:08:34.480" video="mainVideo-theme" id="subtitle"]] +[[!template text="""these transformations, you could go from,""" start="00:08:37.750" video="mainVideo-theme" id="subtitle"]] +[[!template text="""for example, HLC back into XYZ""" start="00:08:41.440" video="mainVideo-theme" id="subtitle"]] +[[!template text="""and then go to another color""" start="00:08:43.900" video="mainVideo-theme" id="subtitle"]] +[[!template text="""space of your choosing, right.""" start="00:08:46.960" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So this is how to convert colors""" start="00:08:49.750" video="mainVideo-theme" id="subtitle"]] +[[!template text="""between color spaces. In this case,""" start="00:08:51.430" video="mainVideo-theme" id="subtitle"]] +[[!template text="""I have to convert colors from HLC""" start="00:08:55.270" video="mainVideo-theme" id="subtitle"]] +[[!template text="""to LAB, and from LAB to XYZ,""" start="00:08:57.850" video="mainVideo-theme" id="subtitle"]] +[[!template text="""and from XYZ to sRGB.""" start="00:08:59.920" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So this time the conversions are""" start="00:09:02.530" video="mainVideo-theme" id="subtitle"]] +[[!template text="""all done in Emacs Lisp, and I""" start="00:09:05.710" video="mainVideo-theme" id="subtitle"]] +[[!template text="""have the code in here in this URL.""" start="00:09:08.200" video="mainVideo-theme" id="subtitle"]] +[[!template text="""You could take a look, or you""" start="00:09:13.270" video="mainVideo-theme" id="subtitle"]] +[[!template text="""could actually just use maybe some package""" start="00:09:14.830" video="mainVideo-theme" id="subtitle"]] +[[!template text="""to convert colors.""" start="00:09:18.310" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Anyway let me show you how""" start="00:09:20.470" video="mainVideo-theme" id="subtitle"]] +[[!template text="""this works. So in this case I""" start="00:09:23.740" video="mainVideo-theme" id="subtitle"]] +[[!template text="""could apply theme, Monte Carlo.""" start="00:09:26.590" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So this is now a random theme.""" start="00:09:30.670" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Actually, well, a theme with random colors,""" start="00:09:33.790" video="mainVideo-theme" id="subtitle"]] +[[!template text="""because I could apply the same theme,""" start="00:09:37.150" video="mainVideo-theme" id="subtitle"]] +[[!template text="""and it will look different.""" start="00:09:40.960" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Every time.""" start="00:09:45.250" video="mainVideo-theme" id="subtitle"]] +[[!template text="""I could also look at the colors it picked.""" start="00:09:48.640" video="mainVideo-theme" id="subtitle"]] +[[!template text="""as a list of colors.""" start="00:09:53.750" video="mainVideo-theme" id="subtitle"]] +[[!template text="""I could also look at this like""" start="00:09:57.740" video="mainVideo-theme" id="subtitle"]] +[[!template text="""fancy chart of colors. This is""" start="00:10:00.260" video="mainVideo-theme" id="subtitle"]] +[[!template text="""too small. So let me show you this.""" start="00:10:04.370" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So basically the same thing.""" start="00:10:06.920" video="mainVideo-theme" id="subtitle"]] +[[!template text="""This is actually a cross-section in HLC space,""" start="00:10:10.400" video="mainVideo-theme" id="subtitle"]] +[[!template text="""and the colors it picked are these like""" start="00:10:16.310" video="mainVideo-theme" id="subtitle"]] +[[!template text="""white circles.""" start="00:10:18.650" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So that's that.""" start="00:10:20.660" video="mainVideo-theme" id="subtitle"]] +[[!template text="""But like I said, I'm not""" start="00:10:24.740" video="mainVideo-theme" id="subtitle"]] +[[!template text="""fully satisfied, because most of time the""" start="00:10:26.150" video="mainVideo-theme" id="subtitle"]] +[[!template text="""colors are pretty boring from it.""" start="00:10:30.170" video="mainVideo-theme" id="subtitle"]] +[[!template text="""I could think of some""" start="00:10:33.770" video="mainVideo-theme" id="subtitle"]] +[[!template text="""ways to improve this. For example I""" start="00:10:36.320" video="mainVideo-theme" id="subtitle"]] +[[!template text="""could choose different patterns for the color""" start="00:10:38.570" video="mainVideo-theme" id="subtitle"]] +[[!template text="""samples. but I don't know of any""" start="00:10:43.490" video="mainVideo-theme" id="subtitle"]] +[[!template text="""good patterns. So I need to try""" start="00:10:47.900" video="mainVideo-theme" id="subtitle"]] +[[!template text="""things out. And then another way is""" start="00:10:49.880" video="mainVideo-theme" id="subtitle"]] +[[!template text="""probably to use different color spaces like the HSL, or HSV.""" start="00:10:52.130" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Again I need to try this out.""" start="00:10:59.960" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So yeah there are room for improvements.""" start="00:11:02.240" video="mainVideo-theme" id="subtitle"]] +[[!template text="""If you... If you have and idea,""" start="00:11:05.120" video="mainVideo-theme" id="subtitle"]] +[[!template text="""you know, let me know, and we""" start="00:11:07.520" video="mainVideo-theme" id="subtitle"]] +[[!template text="""can try it out.""" start="00:11:09.860" video="mainVideo-theme" id="subtitle"]] +[[!template text="""So that's the end of my talk.""" start="00:11:11.960" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Hopefully you have some new ideas.""" start="00:11:13.880" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Thanks for listening in, and yeah.""" start="00:11:17.450" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Go create more themes because we can't have enough.""" start="00:11:20.240" video="mainVideo-theme" id="subtitle"]] +[[!template text="""Thanks!""" start="00:11:22.400" video="mainVideo-theme" id="subtitle"]] + Questions or comments? Please e-mail [emacsconf-org-private@gnu.org](mailto:emacsconf-org-private@gnu.org?subject=Comment%20for%20EmacsConf%202023%20theme%3A%20My%20journey%20of%20finding%20and%20creating%20the%20%E2%80%9Cperfect%E2%80%9D%20Emacs%20theme) diff --git a/2024/info/theme-before.md b/2024/info/theme-before.md index 007806a1..ce4028e9 100644 --- a/2024/info/theme-before.md +++ b/2024/info/theme-before.md @@ -8,12 +8,23 @@ The following image shows where the talk is in the schedule for Sat 2024-12-07. Format: 12-min talk ; Q&A: IRC <https://chat.emacsconf.org/?join=emacsconf,emacsconf-gen> Etherpad: <https://pad.emacsconf.org/2024-theme> Etherpad: <https://pad.emacsconf.org/2024-theme> Discuss on IRC: [#emacsconf-gen](https://chat.emacsconf.org/?join=emacsconf,emacsconf-gen) -Status: Quality check +Status: Now playing on the conference livestream <div>Times in different time zones:</div><div class="times" start="2024-12-07T18:00:00Z" end="2024-12-07T18:10:00Z"><div class="conf-time">Saturday, Dec 7 2024, ~1:00 PM - 1:10 PM EST (US/Eastern)</div><div class="others"><div>which is the same as:</div>Saturday, Dec 7 2024, ~12:00 PM - 12:10 PM CST (US/Central)<br />Saturday, Dec 7 2024, ~11:00 AM - 11:10 AM MST (US/Mountain)<br />Saturday, Dec 7 2024, ~10:00 AM - 10:10 AM PST (US/Pacific)<br />Saturday, Dec 7 2024, ~6:00 PM - 6:10 PM UTC <br />Saturday, Dec 7 2024, ~7:00 PM - 7:10 PM CET (Europe/Paris)<br />Saturday, Dec 7 2024, ~8:00 PM - 8:10 PM EET (Europe/Athens)<br />Saturday, Dec 7 2024, ~11:30 PM - 11:40 PM IST (Asia/Kolkata)<br />Sunday, Dec 8 2024, ~2:00 AM - 2:10 AM +08 (Asia/Singapore)<br />Sunday, Dec 8 2024, ~3:00 AM - 3:10 AM JST (Asia/Tokyo)</div></div><div><strong><a href="/2024/watch/gen/">Find out how to watch and participate</a></strong></div> +<div class="vid"><video controls preload="none" id="theme-mainVideo"><source src="https://media.emacsconf.org/2024/emacsconf-2024-theme--my-journey-of-finding-and-creating-the-perfect-emacs-theme--metrowind--main.webm" />captions="""<track label="English" kind="captions" srclang="en" src="/2024/captions/emacsconf-2024-theme--my-journey-of-finding-and-creating-the-perfect-emacs-theme--metrowind--main.vtt" default />"""<track kind="chapters" label="Chapters" src="/2024/captions/emacsconf-2024-theme--my-journey-of-finding-and-creating-the-perfect-emacs-theme--metrowind--main--chapters.vtt" /><p><em>Your browser does not support the video tag. Please download the video instead.</em></p></video>[[!template id="chapters" vidid="theme-mainVideo" data=""" +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 +"""]]<div></div>Duration: 11:28 minutes<div class="files resources"><ul><li><a href="https://pad.emacsconf.org/2024-theme">Open Etherpad</a></li><li><a href="https://chat.emacsconf.org/?join=emacsconf,emacsconf-gen">Open public Q&A</a></li><li><a href="https://media.emacsconf.org/2024/emacsconf-2024-theme--my-journey-of-finding-and-creating-the-perfect-emacs-theme--metrowind--intro.webm">Download --intro.webm</a></li><li><a href="https://media.emacsconf.org/2024/emacsconf-2024-theme--my-journey-of-finding-and-creating-the-perfect-emacs-theme--metrowind--main--chapters.vtt">Download --main--chapters.vtt</a></li><li><a href="https://media.emacsconf.org/2024/emacsconf-2024-theme--my-journey-of-finding-and-creating-the-perfect-emacs-theme--metrowind--main.vtt">Download --main.vtt</a></li><li><a href="https://media.emacsconf.org/2024/emacsconf-2024-theme--my-journey-of-finding-and-creating-the-perfect-emacs-theme--metrowind--main.webm">Download --main.webm (30MB)</a></li></ul></div></div> # Description <!-- End of emacsconf-publish-before-page -->
\ No newline at end of file |