summaryrefslogtreecommitdiffstats
path: root/2024
diff options
context:
space:
mode:
Diffstat (limited to '2024')
-rw-r--r--2024/captions/emacsconf-2024-theme--my-journey-of-finding-and-creating-the-perfect-emacs-theme--metrowind--main--chapters.vtt29
-rw-r--r--2024/captions/emacsconf-2024-theme--my-journey-of-finding-and-creating-the-perfect-emacs-theme--metrowind--main.vtt619
-rw-r--r--2024/info/theme-after.md231
-rw-r--r--2024/info/theme-before.md13
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