diff options
Diffstat (limited to '2024/captions/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main.vtt')
| -rw-r--r-- | 2024/captions/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main.vtt | 541 |
1 files changed, 541 insertions, 0 deletions
diff --git a/2024/captions/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main.vtt b/2024/captions/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main.vtt new file mode 100644 index 00000000..e9bbd7ca --- /dev/null +++ b/2024/captions/emacsconf-2024-color--colour-your-emacs-with-ease--ryota--main.vtt @@ -0,0 +1,541 @@ +WEBVTT captioned by sachac + +NOTE Introduction + +00:00:00.000 --> 00:00:11.327 +Hi, EmacsConf. This is "Colour your Emacs with ease". + +00:00:11.328 --> 00:00:14.848 +I'm Ryota Sawada, and today's agenda is: + +00:00:14.849 --> 00:00:16.649 +start with a brief introduction. + +00:00:16.650 --> 00:00:19.719 +I will be talking about colours quite a bit. + +00:00:19.720 --> 00:00:21.452 +What colours do you like? + +00:00:21.453 --> 00:00:23.599 +Colour spaces and some packages such + +00:00:23.600 --> 00:00:27.879 +as color.el, ct.el. I'll be touching on a theme called + +00:00:27.880 --> 00:00:31.056 +Hasliberg theme, which I created, + +00:00:31.057 --> 00:00:34.139 +before wrapping up the talk. + +00:00:34.140 --> 00:00:36.959 +A quick introduction about the talk. The slide is + +00:00:36.960 --> 00:00:40.559 +available as an Org mode file at Codeberg. If you're + +00:00:40.560 --> 00:00:43.519 +looking at it from Org mode, you probably want to have + +00:00:43.520 --> 00:00:47.639 +rainbow mode turned on for the best viewing. This is the + +00:00:47.640 --> 00:00:52.559 +case with the presentation today. I'm Ryota Sawada and I'm + +00:00:52.560 --> 00:00:58.667 +available at rytswd at usual places. + +NOTE What colour do you like? + +00:00:58.668 --> 00:01:01.290 +What colour do you like? + +00:01:01.291 --> 00:01:04.999 +You might be able to tell I like orange. That's + +00:01:05.000 --> 00:01:07.856 +the colour that I use often. + +00:01:07.857 --> 00:01:09.958 +Emacs gives me all the control I want, + +00:01:09.959 --> 00:01:13.119 +so naturally I wanted to make it aesthetically + +00:01:13.120 --> 00:01:16.023 +pleasing to my taste, which meant that + +00:01:16.024 --> 00:01:19.725 +I would like to have a dark theme, subtle theme + +00:01:19.726 --> 00:01:23.767 +with orange as a main accent colour, but not + +00:01:23.768 --> 00:01:26.803 +too orange, so not everything very orange. + +00:01:26.804 --> 00:01:29.673 +Maybe use another blue-ish colour + +00:01:29.674 --> 00:01:32.929 +as another accent. Note that this presentation is + +00:01:32.930 --> 00:01:36.199 +based on the Hasliberg theme, more on that + +00:01:36.200 --> 00:01:40.599 +later. But when I started my Emacs journey, I didn't start + +00:01:40.600 --> 00:01:45.199 +with creating a new theme from get-go. I started with a theme + +00:01:45.200 --> 00:01:49.479 +called Nova Theme. I really liked it. I made a few tweaks + +00:01:49.480 --> 00:01:55.039 +around Org Mode and headings, so that they were a bit more was + +00:01:55.040 --> 00:02:00.759 +my liking, which was around orange being sprinkled across. + +00:02:00.760 --> 00:02:07.959 +I got to it very nice looking and I really liked it, but when + +00:02:07.960 --> 00:02:13.839 +I started a lot of coding tasks with it, I realized one + +00:02:13.840 --> 00:02:19.799 +thing: that it was very colourful, and in a way, distracting. + +00:02:19.800 --> 00:02:24.039 +it actually wasn't about Nova Theme's fault. It was just + +00:02:24.040 --> 00:02:27.479 +many editors, including Emacs and VS Code and other editors + +00:02:27.480 --> 00:02:31.679 +and modern themes, are filled with colours. Let's have a + +00:02:31.680 --> 00:02:38.039 +look. At the top left, you can see Nova theme with a bit of a + +00:02:38.040 --> 00:02:42.239 +pale greenish background with a few colours. Purple, + +00:02:42.240 --> 00:02:47.399 +pink, blue, green. You can see some colours like that with + +00:02:47.400 --> 00:02:51.519 +Nova theme. Nice looking colours, but still colourful. Modus + +00:02:51.520 --> 00:02:56.079 +Vivendi Tinted, bottom left, is also very nice looking + +00:02:56.080 --> 00:02:59.360 +modern theme, but quite colourful. The same can be said + +00:02:59.361 --> 00:03:03.134 +for ef-themes, owl edition at top right, + +00:03:03.135 --> 00:03:07.979 +and Doom Noe as another, bottom right. + +00:03:07.980 --> 00:03:13.759 +That led me to think: how can I make my code editing + +00:03:13.760 --> 00:03:18.599 +and coding tasks not too distracting, and I can focus on + +00:03:18.600 --> 00:03:22.759 +writing code. That was something I could manage with Org + +00:03:22.760 --> 00:03:26.399 +Mode, where I just specifically, basically used orange + +00:03:26.400 --> 00:03:29.399 +shades and not too much more. That's what you're seeing at + +00:03:29.400 --> 00:03:33.519 +the moment. I wanted to do something similar with coding + +00:03:33.520 --> 00:03:37.959 +and any general code. That led me to the journey of + +00:03:37.960 --> 00:03:42.119 +creating my own theme. + +NOTE Colour spaces: HSL, LCH , and more + +00:03:42.120 --> 00:03:44.679 +But before going to the theme, I need to talk about colour + +00:03:44.680 --> 00:03:49.079 +spaces. sRGB, standard RGB, is probably something that + +00:03:49.080 --> 00:03:53.439 +many people are familiar with. HSL is for hue, saturation, + +00:03:53.440 --> 00:03:58.359 +lightness. LCH is for luminance or lightness, chroma, and + +00:03:58.360 --> 00:04:03.319 +hue. Those are the colour spaces probably common used in + +00:04:03.320 --> 00:04:07.999 +various spaces, but when it comes to perceptual uniformity, + +00:04:08.000 --> 00:04:11.599 +there is an important difference between the colour + +00:04:11.600 --> 00:04:14.799 +spaces. Human perception of colour is not very + +00:04:14.800 --> 00:04:17.879 +straightforward. We can see in the reference here... + +00:04:17.880 --> 00:04:19.506 +Let's have a look. + +00:04:19.507 --> 00:04:23.159 +At the top you can see the shade coming from left + +00:04:23.160 --> 00:04:26.370 +green to the right blue, + +00:04:26.371 --> 00:04:30.959 +and in the top image, you can see half of + +00:04:30.960 --> 00:04:34.520 +it, perhaps, is very similar green colour + +00:04:34.521 --> 00:04:36.141 +and then when it comes to blue, + +00:04:36.142 --> 00:04:40.239 +you can see more of the different colour gradients + +00:04:40.240 --> 00:04:45.559 +coming into play. The bottom colour space is based on a + +00:04:45.560 --> 00:04:50.479 +perceptually uniform colour space, which gives us a bit more + +00:04:50.480 --> 00:04:55.039 +evenly distributed colour gradient, which will be + +00:04:55.040 --> 00:04:59.039 +something more suitable for deciding on the theme setup and + +00:04:59.040 --> 00:05:03.999 +the colour setup, where you can have various themes that are + +00:05:04.000 --> 00:05:10.439 +defined for human perceptions. + +00:05:10.440 --> 00:05:14.319 +Perceptual uniformity is important. For that, it is + +00:05:14.320 --> 00:05:17.879 +important to mention about CIE, or "International + +00:05:17.880 --> 00:05:23.479 +Commission of Illumination" in English. They created + +00:05:23.480 --> 00:05:29.479 +important colour spaces called CIE XYZ which was from 1931, + +00:05:29.480 --> 00:05:33.319 +CIELAB, and LUV, 1976, + +00:05:33.320 --> 00:05:37.519 +respectively. Those are the colour spaces used in various + +00:05:37.520 --> 00:05:41.839 +fields and industries and still relevant. There is a + +00:05:41.840 --> 00:05:44.898 +quite a bit that you can read up on. + +00:05:44.899 --> 00:05:48.960 +I'm not a colour expert so have some references here, + +00:05:48.961 --> 00:05:52.519 +but the TLDR of all of that is + +00:05:52.520 --> 00:05:57.525 +consider using LCH variants over RGB or HSL + +00:05:57.526 --> 00:06:00.606 +for better perceptual uniformity. + +00:06:00.607 --> 00:06:03.959 +Specifically CIE Lab-based LCH, + +00:06:03.960 --> 00:06:06.709 +which is often called Lab LCH + +00:06:06.710 --> 00:06:10.359 +or just LCH. CIELUV-based LCH + +00:06:10.360 --> 00:06:16.519 +is called LUV LCH. There is a new rather modern LCH setup + +00:06:16.520 --> 00:06:19.996 +called OK LCH which is based on OK Lab. + +00:06:19.997 --> 00:06:22.099 +So those are the colour spaces + +00:06:22.100 --> 00:06:24.279 +that are worth looking at when it comes to creating + +00:06:24.280 --> 00:06:25.884 +shades. + +NOTE color.el and ct.el + +00:06:25.885 --> 00:06:29.759 +How do you create shades? Color.el and ct.el are + +00:06:29.760 --> 00:06:33.199 +great solutions. You can create shades and different + +00:06:33.200 --> 00:06:37.799 +colours based on RGB and hex. You can see in the red example + +00:06:37.800 --> 00:06:43.839 +here, FF0000 is a bright red. You can darken it by providing + +00:06:43.840 --> 00:06:48.639 +less red values like CC or 88. You can see that the colours + +00:06:48.640 --> 00:06:52.839 +are slightly darker than the FF0000. But what if you are + +00:06:52.840 --> 00:06:57.439 +working with the complex colours such as FBB151, this + +00:06:57.440 --> 00:07:01.879 +particular orange? That's where color.el, ct.el come + +00:07:01.880 --> 00:07:05.743 +into play. Color.el is a built-in package in Emacs, + +00:07:05.744 --> 00:07:08.340 +so you can use it by just requiring it. + +00:07:08.341 --> 00:07:10.399 +color-darken-name and + +00:07:10.400 --> 00:07:13.905 +providing the colour with the hex value with 40% + +00:07:13.906 --> 00:07:16.886 +gives you a darker orange + +00:07:16.887 --> 00:07:20.039 +without doing too much of a colour computation + +00:07:20.040 --> 00:07:23.839 +by hand. This hex value is something that Emacs + +00:07:23.840 --> 00:07:27.319 +understands and rainbow mode does as well. When it comes + +00:07:27.320 --> 00:07:30.839 +to ct.el, it's not a built-in solution, but it's more + +00:07:30.840 --> 00:07:34.839 +versatile. It works with various colour spaces so you can + +00:07:34.840 --> 00:07:41.239 +see that ct-edit-hsl-l-dec by 40% would give + +00:07:41.240 --> 00:07:47.759 +us a darker colour by 40%. We can also use LCH variant which + +00:07:47.760 --> 00:07:53.479 +can use the LCH colour spaces for darkening the colour. This + +00:07:53.480 --> 00:07:56.919 +results in slightly different colours for this particular + +00:07:56.920 --> 00:08:00.199 +orange, but if you're working with the green or blue or some + +00:08:00.200 --> 00:08:04.177 +other colours, it might be worth looking at LCH variant + +00:08:04.178 --> 00:08:08.399 +rather than other colour spaces. + +NOTE Hasliberg theme + +00:08:08.400 --> 00:08:11.203 +With that, let's have a look at Hasliberg theme. + +00:08:11.204 --> 00:08:13.707 +This is a theme that I created personally + +00:08:13.708 --> 00:08:16.409 +and the name is based on the Swiss Alps + +00:08:16.410 --> 00:08:20.479 +and with the following ideas in mind. It focuses + +00:08:20.480 --> 00:08:25.031 +on setting up shades. Shades, by that... + +00:08:25.032 --> 00:08:26.999 +You can see how the top + +00:08:27.000 --> 00:08:31.839 +of the heading here is a bright orange colour, and + +00:08:31.840 --> 00:08:35.758 +other orange colours, this heading and this heading + +00:08:35.759 --> 00:08:37.719 +are based on the top + +00:08:37.720 --> 00:08:40.839 +orange colour and then giving some shade and the luminance + +00:08:40.840 --> 00:08:44.639 +adjustment essentially. It follows a pattern from web + +00:08:44.640 --> 00:08:49.039 +design and tailwind colour shades are a great example that + +00:08:49.040 --> 00:08:50.815 +you can have a look. + +00:08:50.816 --> 00:08:54.439 +It does not use ct.el as it aims to be fully + +00:08:54.440 --> 00:08:57.999 +dependency free and does not consider colour contrast for + +00:08:58.000 --> 00:09:02.119 +accessibility. This is because it's personal and I + +00:09:02.120 --> 00:09:04.746 +don't have that particular need. + +00:09:04.747 --> 00:09:06.839 +This is based on LuvLCh rather + +00:09:06.840 --> 00:09:08.788 +than LAB LCH, and that's another reason + +00:09:08.789 --> 00:09:11.049 +why I didn't use ct.el, + +00:09:11.050 --> 00:09:14.119 +and it is highly experimental. But the code is + +00:09:14.120 --> 00:09:18.279 +available at Codeberg and GitHub just for your reference. + +00:09:18.280 --> 00:09:23.719 +Let's see Hasliberg theme in action. This is the theme + +00:09:23.720 --> 00:09:27.159 +that we were looking at for org-mode as well, but for the + +00:09:27.160 --> 00:09:32.199 +code, in this case Elisp. You can see that the colour is + +00:09:32.200 --> 00:09:37.559 +mostly white and blue with orange sprinkled across for + +00:09:37.560 --> 00:09:41.559 +string input. You can see some pink showing up as well. + +00:09:41.560 --> 00:09:46.399 +Essentially, all the colour setup is done by shades, so most of + +00:09:46.400 --> 00:09:51.319 +it is based on white or neutral, and there will be lighter and + +00:09:51.320 --> 00:09:56.159 +darker variants that can be set for the primary colour of blue. + +00:09:56.160 --> 00:09:59.959 +You can see the darker and brighter and lighter colours + +00:09:59.960 --> 00:10:05.279 +being used. With that shade setup, I only have to provide a + +00:10:05.280 --> 00:10:09.599 +few colours as the base colours. From there, I can define the + +00:10:09.600 --> 00:10:15.959 +shades for the theme setup, which leads to creating a more + +00:10:15.960 --> 00:10:20.359 +monotonic colour setup, where this one is a very monotonic, + +00:10:20.360 --> 00:10:25.059 +very subtle difference of white colours used for the base + +00:10:25.060 --> 00:10:29.039 +colours. I don't have to make too many changes to the colour + +00:10:29.040 --> 00:10:32.079 +setup. I just have to provide the base colours that are + +00:10:32.080 --> 00:10:36.399 +different. The same can be said for this orange, very orange + +00:10:36.400 --> 00:10:39.359 +colour theme, which is based on the base colours of + +00:10:39.360 --> 00:10:43.639 +orange-like colours and gives the shade of various + +00:10:43.640 --> 00:10:50.719 +different setup. This means that I can use Hasliberg + +00:10:50.720 --> 00:10:56.159 +Theme Nature colour palette, and that gives me more of a green + +00:10:56.160 --> 00:11:00.839 +based colour where all the base colours are set up with a + +00:11:00.840 --> 00:11:06.239 +greenish colour setup. + +NOTE Wrap up + +00:11:06.240 --> 00:11:10.399 +With that, I would like to wrap up with a few ideas when + +00:11:10.400 --> 00:11:13.759 +adjusting themes and working with colours. Maybe consider + +00:11:13.760 --> 00:11:19.359 +using CIELAB, CIELUV, or OKLab-based colour spaces that + +00:11:19.360 --> 00:11:24.719 +would give you different shades which are easier to work + +00:11:24.720 --> 00:11:29.199 +with for human perceptions. color.el and ct.el can be a + +00:11:29.200 --> 00:11:32.559 +great tool for making shades and working with colour spaces. + +00:11:32.560 --> 00:11:36.239 +Hasliberg theme is yet another theme, highly personal + +00:11:36.240 --> 00:11:38.999 +and experimental, but could be an inspiration for your + +00:11:39.000 --> 00:11:44.119 +theme journey. With that, why not sprinkle your Emacs with + +00:11:44.120 --> 00:11:48.400 +your favourite colours? Thank you. |