Back to the talks Previous by track: The Future of Org Next by track: My journey of finding and creating the “perfect” Emacs theme Track: General

Colour your Emacs with ease

Ryota Sawada (he/him) - Pronunciation: Ree-yo-tah, https://hachyderm.io/@rytswd https://x.com/rytswd

Format: 12-min talk ; Q&A: BigBlueButton conference room
Status: TO_CAPTION_QA

Talk

00:00.000 Introduction
00:58.668 What colour do you like?
03:42.120 Colour spaces: HSL, LCH , and more
06:25.885 color.el and ct.el
08:08.400 Hasliberg theme
11:06.240 Wrap up
Duration: 11:48 minutes

Q&A

01:24.840 Why colour?
03:04.040 What motivated you to learn Elisp and get into the Emacs core?
06:35.320 Q: Is there any intention to create a library for working with more experimental color spaces? Pulling code out of Hasliberg for this purpose, perhaps?
10:51.520 Q: Can we have a dark as well as light theme variations made from your theme?
Listen to just the audio:
Duration: 14:31 minutes

Description

Emacs comes with various themes to pick from, and there are myriad different themes out on the Internet. After choosing a theme, you can make any adjustments to add or remove certain colours exactly as you wish. Emacs provides you so much control over how you work, write, code, and everything in between, including the colour choice. You are certainly left equipped with all the controls for your theme as well.

However, when it comes to colour, there is a bit of difficulty: RGB. Hexadecimal colour codes are ubiquitous and relatively easy to understand. Yet, they are difficult to work with, especially when you need to make different shades and variants. In recent years, CSS started to support not just sRGB (standard RGB), but other colour spaces such as HSL, Oklab, etc. With Emacs, we also have a great set of tools from color.el, as well as this amazing package called ct.el (https://github.com/neeasade/ct.el)

In this talk, we will have a quick look at different colour spaces than sRGB, namely HSL and LCH. We will check out how ct.el can make a set of colour shades and variants at ease, and how they can help define themes. Finally, Ryota will share his own theme called Hasliberg Theme, which is using the full power of LCH.

Resources (will be public starting Dec 7):

About the speaker:

Ryota started his Emacs journey more than a decade ago, but was forced to put it aside for work requirements soon after. A few years ago, he made a return to Emacs, and now is using Emacs almost exclusively for any sort of coding tasks. This talk focuses on the modern Emacs setup where he thinks his Emacs looks and works better than many other editors. He works for Civo as a Principal Engineer.

Discussion

Questions and answers

  • Q: Is there any intention to create a library for working with more experimental color spaces? Pulling code out of Hasliberg for this purpose, perhaps?
    • A: Started the journey just for myself, and didn't think this would be useful for others.
    • A: Making it a library is definitely something that I can think about.
  • Q: Can we have a dark as well as light theme variations made from your theme?
    • A: You can customize the code easily into dark, light and change something based on someone's mood. Keep in mind that it is a personal theme, so customize as you see fit.

Notes

  • Interesting idea to be inspired from tailwind and frontend dev, thanks for talk
  • https://github.com/alphapapa/prism.el has some interesting colour experiments as well
  • i felt about same with the christmas tree colored code editor
  • annoyance is a great motivator for learning Emacs Lisp
  • Yay fellow Dvorak user!
  • https://github.com/rytswd/hasliberg-theme
  • Thank you everyone for tuning in! Also my slides are available at https://codeberg.org/rytswd/emacsconf-2024
  • Contributing these developments back to ct.el sounds like a really fantastic idea, and I would really love to see it 🙂 I would love to start writing my own themes using this strategy
  • hasliberg-theme-use-dark-nature-colour-palette (and a dark-red variant) is going to be useful for dynamically switching in as I'm working with remote systems e.g. staging and production systems
  • i like that type of usage scenario
  • Fellow orange fan here btw ;)
  • Ryota must have used those old skool CRT terminals that had orange as their primary colour for orange to be his favourite colour :)
    • bernstein color we used to say in German for that type of CRT orange
    • haven't used it myself, but remembering this retro terminal project, which features some nice looking oldschool term/color schemes :) https://github.com/Swordfish90/cool-retro-term

  • rytswd: Thanks for the support everyone! Now the world knows I'm an orange person ;)

  • Great talk! Thank you 🙂

  • Excellent talk, thanks!
  • Beautiful theme
  • Thanks :)
  • Awesome job Ryota, thank you for sharing!

Transcript

[00:00:00.000] Introduction
Hi, EmacsConf. This is "Colour your Emacs with ease". I'm Ryota Sawada, and today's agenda is: start with a brief introduction. I will be talking about colours quite a bit. What colours do you like? Colour spaces and some packages such as color.el, ct.el. I'll be touching on a theme called Hasliberg theme, which I created, before wrapping up the talk. A quick introduction about the talk. The slide is available as an Org mode file at Codeberg. If you're looking at it from Org mode, you probably want to have rainbow mode turned on for the best viewing. This is the case with the presentation today. I'm Ryota Sawada and I'm available at rytswd at usual places.
[00:00:58.668] What colour do you like?
What colour do you like? You might be able to tell I like orange. That's the colour that I use often. Emacs gives me all the control I want, so naturally I wanted to make it aesthetically pleasing to my taste, which meant that I would like to have a dark theme, subtle theme with orange as a main accent colour, but not too orange, so not everything very orange. Maybe use another blue-ish colour as another accent. Note that this presentation is based on the Hasliberg theme, more on that later. But when I started my Emacs journey, I didn't start with creating a new theme from get-go. I started with a theme called Nova Theme. I really liked it. I made a few tweaks around Org Mode and headings, so that they were a bit more was my liking, which was around orange being sprinkled across. I got to it very nice looking and I really liked it, but when I started a lot of coding tasks with it, I realized one thing: that it was very colourful, and in a way, distracting. it actually wasn't about Nova Theme's fault. It was just many editors, including Emacs and VS Code and other editors and modern themes, are filled with colours. Let's have a look. At the top left, you can see Nova theme with a bit of a pale greenish background with a few colours. Purple, pink, blue, green. You can see some colours like that with Nova theme. Nice looking colours, but still colourful. Modus Vivendi Tinted, bottom left, is also very nice looking modern theme, but quite colourful. The same can be said for ef-themes, owl edition at top right, and Doom Noe as another, bottom right. That led me to think: how can I make my code editing and coding tasks not too distracting, and I can focus on writing code. That was something I could manage with Org Mode, where I just specifically, basically used orange shades and not too much more. That's what you're seeing at the moment. I wanted to do something similar with coding and any general code. That led me to the journey of creating my own theme.
[00:03:42.120] Colour spaces: HSL, LCH , and more
But before going to the theme, I need to talk about colour spaces. sRGB, standard RGB, is probably something that many people are familiar with. HSL is for hue, saturation, lightness. LCH is for luminance or lightness, chroma, and hue. Those are the colour spaces probably common used in various spaces, but when it comes to perceptual uniformity, there is an important difference between the colour spaces. Human perception of colour is not very straightforward. We can see in the reference here... Let's have a look. At the top you can see the shade coming from left green to the right blue, and in the top image, you can see half of it, perhaps, is very similar green colour and then when it comes to blue, you can see more of the different colour gradients coming into play. The bottom colour space is based on a perceptually uniform colour space, which gives us a bit more evenly distributed colour gradient, which will be something more suitable for deciding on the theme setup and the colour setup, where you can have various themes that are defined for human perceptions. Perceptual uniformity is important. For that, it is important to mention about CIE, or "International Commission of Illumination" in English. They created important colour spaces called CIE XYZ which was from 1931, CIELAB, and LUV, 1976, respectively. Those are the colour spaces used in various fields and industries and still relevant. There is a quite a bit that you can read up on. I'm not a colour expert so have some references here, but the TLDR of all of that is consider using LCH variants over RGB or HSL for better perceptual uniformity. Specifically CIE Lab-based LCH, which is often called Lab LCH or just LCH. CIELUV-based LCH is called LUV LCH. There is a new rather modern LCH setup called OK LCH which is based on OK Lab. So those are the colour spaces that are worth looking at when it comes to creating shades.
[00:06:25.885] color.el and ct.el
How do you create shades? Color.el and ct.el are great solutions. You can create shades and different colours based on RGB and hex. You can see in the red example here, FF0000 is a bright red. You can darken it by providing less red values like CC or 88. You can see that the colours are slightly darker than the FF0000. But what if you are working with the complex colours such as FBB151, this particular orange? That's where color.el, ct.el come into play. Color.el is a built-in package in Emacs, so you can use it by just requiring it. color-darken-name and providing the colour with the hex value with 40% gives you a darker orange without doing too much of a colour computation by hand. This hex value is something that Emacs understands and rainbow mode does as well. When it comes to ct.el, it's not a built-in solution, but it's more versatile. It works with various colour spaces so you can see that ct-edit-hsl-l-dec by 40% would give us a darker colour by 40%. We can also use LCH variant which can use the LCH colour spaces for darkening the colour. This results in slightly different colours for this particular orange, but if you're working with the green or blue or some other colours, it might be worth looking at LCH variant rather than other colour spaces.
[00:08:08.400] Hasliberg theme
With that, let's have a look at Hasliberg theme. This is a theme that I created personally and the name is based on the Swiss Alps and with the following ideas in mind. It focuses on setting up shades. Shades, by that... You can see how the top of the heading here is a bright orange colour, and other orange colours, this heading and this heading are based on the top orange colour and then giving some shade and the luminance adjustment essentially. It follows a pattern from web design and tailwind colour shades are a great example that you can have a look. It does not use ct.el as it aims to be fully dependency free and does not consider colour contrast for accessibility. This is because it's personal and I don't have that particular need. This is based on LuvLCh rather than LAB LCH, and that's another reason why I didn't use ct.el, and it is highly experimental. But the code is available at Codeberg and GitHub just for your reference. Let's see Hasliberg theme in action. This is the theme that we were looking at for org-mode as well, but for the code, in this case Elisp. You can see that the colour is mostly white and blue with orange sprinkled across for string input. You can see some pink showing up as well. Essentially, all the colour setup is done by shades, so most of it is based on white or neutral, and there will be lighter and darker variants that can be set for the primary colour of blue. You can see the darker and brighter and lighter colours being used. With that shade setup, I only have to provide a few colours as the base colours. From there, I can define the shades for the theme setup, which leads to creating a more monotonic colour setup, where this one is a very monotonic, very subtle difference of white colours used for the base colours. I don't have to make too many changes to the colour setup. I just have to provide the base colours that are different. The same can be said for this orange, very orange colour theme, which is based on the base colours of orange-like colours and gives the shade of various different setup. This means that I can use Hasliberg Theme Nature colour palette, and that gives me more of a green based colour where all the base colours are set up with a greenish colour setup.
[00:11:06.240] Wrap up
With that, I would like to wrap up with a few ideas when adjusting themes and working with colours. Maybe consider using CIELAB, CIELUV, or OKLab-based colour spaces that would give you different shades which are easier to work with for human perceptions. color.el and ct.el can be a great tool for making shades and working with colour spaces. Hasliberg theme is yet another theme, highly personal and experimental, but could be an inspiration for your theme journey. With that, why not sprinkle your Emacs with your favourite colours? Thank you.

Captioner: sachac

Q&A transcript (unedited)

... Org mode and kind of note taking. And that meant that it wasn't too difficult to get started with. But when I started more on the coding side, because I'm a software engineer, you know, on the day job. That kind of got me to think that the colors and how themes look, how Emacs looks, was affecting. And that's how it kind of came to picture. So I could have kind of gone into a little bit more coding side of things, but I didn't want to stress too much on the talk. So that's why I kind of stuck to a very small bits of Org Mode and Elisp. And yeah, I think that's how it came about. Yeah, but that's perfectly fine. That's one of the chief reasons why we have two tracks for Emacs content. We've had those for the last four years, I think. It's because we have a general track, which is more geared towards people who want a general... well, generally people who are highly interested into org mode and not necessarily into coding, but just to whet their appetite to what can be done. And on the DevTrack, we have, well, this year we have talked about Rust and about other fancy things that people can do with Emacs. But, you know, I'm also a software engineer, you know, we do this all the time. Sometimes it's just fine to just chat about colors and just the results of what we develop rather than how the sausage is made. So that's completely fine too. I'm not sure
[00:01:24.840] Why colour?
if you mentioned it in your presentation, but why color, out of all the things you could be ricing on your setup, why were you so interested about colors? I think it was just that mainly that I had to do a lot of context switch between different languages. Elisp is not the one because Elisp is something that I would do for Emacs editing. But for day job, I had to use mainly Go as I work with Kubernetes quite a bit. So Go and also web languages like TypeScript, JavaScript, you know, those languages, where I felt that whenever I was switching context to a different language, I felt that it's kind of annoying to see all the different colors in languages like TypeScript, where, you know, VS Code way would be very full of colors. which I felt that, okay, like, why do I have to have that many different colors on let and constant or the keywords where it could be just a white text? It didn't have to be that colorful. So that was the bit, the most annoying bit when it came to context switching. And I felt that that just didn't happen in the Org Mode or writing in general. So I had to find a way to make it work, make more coding make my coding more kind of friendly to me and that's when I thought maybe just the colors are something that's bothering me and it actually was the case and that's how I got to more into the color kind of journey and got too much into it I guess. Right, and was it what eventually motivated you to
[00:03:04.040] What motivated you to learn Elisp and get into the Emacs core?
learn Elisp and to get into the Emacs core? Because it's funny how you find plenty of people using Emacs in Org Mode and then they find something that they take particular issue with, for you it's the color, and then they just go all in trying to pull the rope as far as they can to try to understand as much as possible about what code is managing this part of the application. Like for you it was color, for me it was the org agenda, I desperately wanted to make Org Agenda do something that it wasn't able to do. And five years, well, actually, no, 10 years later, I find myself hosting Emacs Cons. So, you never know just how far you're going to be pulling this rope. So, it's really interesting for me that my call was this. But back to the question, is this what eventually motivated you to get into Elisp and the core of Emacs? I think that the original journey to move to Emacs was around keybindings that I got annoyed with with other solutions, not just, you know, not speaking of Emacs keybinding or anything, like anything in general. The main reason was that I used Dovrak keyboard layout, and that meant that all the C-c, C-v, C-p, whatever, It just is all over the place. So I had to find something that could work for me. And Emacs was a solution that allowed me to do anything. And that's the kind of the journey that it originally started. And from there, started tweaking org mode and writing experience to be tuned to my liking. Color was another thing that I thought, OK, maybe I could do it easily with org mode. And when I started to use more of the coding side of things on Emacs, I felt that, okay, that was something I needed to solve. So Elisp was always kind of just a toolkit that, you know, I knew that it was available. I knew that it would be something that I want to be able to use. So I think in a way color was a good segue to understand how I can kind of work out more of a complex logic with the editor without having to write JavaScript or things that I don't particularly like. So yeah, I think the journey around the functional languages, functional kind of programming was always something that I was keen about. And yeah, the whole journey kind of made sense for me. And then moving on to the color was just one way to get more involved in. So I can totally see that this journey kind of making to a little bit different angle But yeah, we shall see how that really turns out. But for now, I think I'm happy with the color setup. Now I can really focus on the coding. Well, that's all good. And I'm sure plenty of people listening to you now, you know, find this relatable, how they eventually got into programming. Like for you, you did say that you were a software engineer now. But I found plenty of people, especially doing workshops, that just started you know, their software engineering journey just with Emacs and they just realized they were doing something completely different, like I was studying humanities. But then you touch Emacs and you realize, yeah, this whole programming shtick is actually pretty damn cool. And then you find yourself again, five to 10 years later, becoming a software engineer. So yeah, that's all good. So we do have a couple of questions and I'd like to move into them so that I, I mean, people have questions and for me it's okay for me to chat with you but obviously it's better if people ask you the question themselves. And again, if you want to ask questions to Ryota directly, feel free to join us on BBB and whenever we're done with the questions on the pad, I'm more than happy to let you ask your questions live.
[00:06:35.320] Q: Is there any intention to create a library for working with more experimental color spaces? Pulling code out of Hasliberg for this purpose, perhaps?
All right, so starting with the first question, is there any intention to create a library for working with more experimental color spaces, pulling code out of Hasliberg for this purpose, perhaps? Although I do not know. Hasliberg, you might? Yeah, Hasliberg. And to answer the question, started the journey just for myself and I didn't think that it would be actually useful for other use cases and this conference talk just came about kind of out of sheer luck really. So the idea I think I can definitely work it out and I don't think there will be too, the original code that I started with was I had to use some color space and I started with sRGB and then went to HSL and then went to LCH. So I think there has been quite a bit that I learned from it. At the same time, I may be tempted to actually maybe perhaps contribute back to ct.el rather than creating my own. I think that would make more sense perhaps. But for my own kind of taste that I thought that it would be something I can work out in my theme, but I don't have any I think, you know, making a library is definitely something that I can think about, but perhaps maybe making it too many packages isn't exactly what I want. But for my own use case, I think I just wanted to have something that just didn't have any external dependency so that I can use the vanilla Emacs with my colors. I think that's how it started, but I'm definitely up for it if there is interest about it. Yeah, well, thank you for this. It's always good to contribute. I'm tempted to say that's how they get you. You know, you do something really cool and you share it with people and they have the, you know, they just ask you, oh, do you have your code online? And you realize, no, I haven't pushed it. And then they start pressing you on. well, you need to do this, this is amazing and you need to share it. You know, I had plenty of people ask me to share my dot files when I was tackling the org agenda issue that I mentioned earlier. And yeah, eventually when you get to publishing your stuff, you also feel great because you're putting a little bit of your intelligence into the world and it can be the start of the journey for someone else. You know, maybe someone will find your library at some point and realize, yeah, I wanted to do something slightly differently. and then they either contribute to a library or they make their own but it's a complete journey that starts with just people taking the time to publish the content of the brain basically. Yeah, that's the power of open source now. It's just how we really appreciate the open source culture being cultivated throughout so many years. And yeah, this is something that I'm definitely keen about. So yeah, open for suggestions. And exactly, that's how I started with the journey. And yeah, while this is very experimental and very personal, yeah, I'm not, you know, tied down to one particular way only. So yeah we'll be open to suggestions like this one which I would definitely think about. Yeah that's amazing and just to be clear you know this is not a there's no incentive one. I'm not pushing you to publish your library. You know it was very personal for you and at the end if you believe it might be useful for others it's a nice thing to eventually think about publishing it. But just the fact that you showed up at EmacsConf... Sorry, I'm starting to lose my voice on the morning of the first day. That's not boding well for the two next days. I mean, just one day. But just the fact that you're showing up at EmacsConf and sharing about all of this, the process, how you got to it eventually, it's also a part of sharing. And I think it's also amazing in its own way. Absolutely. Okay, I'm going to try to read the next question and then try to cough a little bit. So can we have... Oh, sorry, Bala. Sorry. I was the one who asked the question. I thought I could ask it live here rather than... Thank you. I'll go cough a little bit. So here I am. Thanks, Ryota, for the nice talk. This is great. I loved it. Your attention to detail was awesome.
[00:10:51.520] Q: Can we have a dark as well as light theme variations made from your theme?
So I was just looking at the code and I was wondering, do you have a dark and a light theme variation which can be made from your theme? Or do you have to customize it every time? That was my question. And thanks for that. Thank you very much. I appreciate your feedback and questions. So to answer the question, the short answer is that I do have both dark and light themes with some sorts of standard colors that I personally liked. And there were a few things that I showed in the demo. where I showed, I think, three different dark theme colors. So light theme is definitely something that I can do. And the idea around Hasliberg theme and just my theming in general was that when I feel like I want to work in dark theme and when I want to work in the standard way, I would just use the standard color. But when I feel like maybe it's just so cold that I want to have a bit of a warm colors near me, I would use the orange theme, without changing too much of the kind of general feeling and experience. So that can be said for the light theme as well. So there is something and the kind of customization isn't that difficult to extend. So I do have both dark and light, but primarily I'm just looking at the dark theme as my main driver. But yeah, they are both available. Great. Thank you so much. I will definitely try your theme out. I'm definitely on the lookout for a nice, friendly theme. Thank you very much. As I said, this is a personal theme. I'm not sure if it really fits everyone's need, but it is one inspiration that I hope that can lead to another nice theming that could work for someone specifically for some use cases. I don't have to solve everyone's problem. Yeah, and I mean, it was sufficient to be inspirational to people. I mean, just Bala just mentioned it right now, but I'm sure plenty of people who watched live, but also people will be watching in the future, will have the interest to speak by what you've done. So thank you again so much for this. Yep. All right, well, I don't see any further questions. So I suggest we move towards closure. Ryota, do you have any last words? No, I don't. So yeah, thank you very much for attending. And it was great fun putting this together. And I really didn't think that I would be talking about my personal colors and personal favorites, like orange being my favorite color. This wouldn't be something that I would say out in any conference, to be honest. But it just came out to be. And happy that I had a chance. So thank you very much for giving me the opportunity to talk. in this amazing conference and yeah I can't just wait to check out other talks which you know I know that there isn't you know other talks that are happening right now I was actually wanted to to join them and check check that out so I will probably do that right now. Well, sure. Well, I won't hold you any longer then. Thank you. For me, it was just amazing to, you know, generally when you ask someone what their favorite color, you know, they just tell you orange or blue or whatever. They don't go then to chat about 20 minutes about their favorite color and how they tuned their entire editor to work exactly around their favorite colors. So it was inspiring. And I also want to try it out, frankly, because my theme has been utterly bad for the last five years and I need some change into my life. All right. Thank you so much for your time. Thank you very much, everyone. Cheers. Bye-bye.

Questions or comments? Please e-mail emacsconf-org-private@gnu.org

Back to the talks Previous by track: The Future of Org Next by track: My journey of finding and creating the “perfect” Emacs theme Track: General