How to design a beautiful Neovim theme with HSL colors in Lua - NeovimConf 2023

It's gonna be a very exciting one. So just very exciting lightning talk. Yeah, we're on the app. The talk's name is Designing a theme with a coordinated color scheme in HSL Using Lua, the second fastest growing programming language on github. And who's it by? Takuya Matsuyama. Yeah, so you may have known him as devadlife. I think it's devaslife, right? Devaslife. You may have known him as devaslife. He has literally the best YouTube videos ever created. They're so beautiful. So many of you probably know, very popular YouTuber makes lots of really awesome videos Takuya, and I think what's pretty interesting is we're gonna look at quite a bit of different Lua and HSL sort of Magic going on in this one, which should be really fun. So without any further ado I think we just go ahead and pass it on over. So yeah, let's do it You Hello everyone, my name is Takuya. Thanks for having me. I'm so excited to be here Let me introduce myself briefly I'm an indie developer from Osaka, Japan, and I'm currently living off of my SaaS product called Inkdrop, which is a Markdown note-taking app designed for software developers, and I've been publishing coding videos Like this one. I Have been publishing coding tutorials. This one is about my latest Neovim setup Perhaps some of you here May recognize me from my tutorials on setting up Neovim like this one So hello So last month I created a theme called Solarize Osaka Inspired by the Solarize Dark color scheme I developed this theme to support major recent Neovim plugins. The original Solarize color scheme with its 16 color palettes Was somewhat limited in providing adequate variations for signs, alerts, tooltips, and various UI components Introduced by recent Neovim plugins and Solarize Osaka introduces additional colors Beautifully coordinated to enhance these plugins So in this talk, I'd like to share some tips I got while developing this theme So let's get right into it. So I am a web developer myself and I am used to work with HSL colors in CSS. For example the designers of Tailwindow CSS use HSL colors to create the default color palette like this and This approach allows you to maintain Color consistency when designing web apps. I wanted to apply the same principle when designing my Neovim theme So what is the HSL colors? HSL stands for Hue, Saturation, and Lightness Which are the three components of this color model. So H stands for Hue represents the color itself and usually expressed as a degree on the color wheel ranging from 0 to 360 for example 0 degree represents red and 120 represents green and 240 represent blue and the second S represents saturation it Indicates the intensity or purity of the color. It ranges from 0% to 100% and 0 means a complete gray and 100% represents the pure color and the third L means lightness It determines the brightness of the color. It ranges from 0% which is black to 100% which is white and 50 being the true color without any shading or tinting So check out the HSL calculator here on the W3 schools for better getting better understanding the main advantage of using HSL over RGB or HEX is its Intuitiveness. I just think RGB colors can be challenging to visualize but HSL is more straightforward and

intuitive So let's say you have a blue color like this. So it's a the hue is 2240 and the S is 100 and the lightness is a half. The RGB would be 00255 and HEX would be 000FF which is simple enough, but if you want to brighten it and Slightly decrease the saturation. What would you do with RGB? So you can't it's it'll be challenging, right? So But if you work with HSL color you can simply Increase the L value to 60% and Saturation you can decrease its value to 75% right Very easy and this process is very straightforward and only other hand Achieving this in HEX or RGB is not as intuitive It often requires a color palette tool. And here's the I just said color So the RGB is 76 and the 230 and the HEX color is 4C 6 it's complicated But you could use a library like colorchubby which is by TG diverse and it's a cool library, but you can simply define the red color like so and You can call the light method to get a brighter color of the red and But you might then be tempted to do something like this. So while useful this approach can lead to an inconsistent and disorganized color palette So the end result can be difficult to predict from the source code alone So using HSL colors solve this problem Making it easier to create color variants while preserving visual consistency Here is how the colors in Solarize Osaka are defined So as you can see, there are some additional colors. So it calls HSL function to get the hex representation. So this function HSL function Converts the HSL color to into the hex representation Which is defined in HSL. Ruler and this code snippet is borrowed from this repository. So this is a simple utility function that converts HSL to hex representation and As you can see in the color the HSL colors are highlighted in their respective colors as you can see here and It is very handy for picking colors for various highlights and how to do that So I'd like to show you I use mini high patterns here In my setup which supports highlighting Simple hex colors out of the box by configuring it like so Yeah, if it is very handy, but it needs some tweaks to make it support HSL colors, so I wanted to highlight HSL colors here, so it has a HSL and Bracket and three parameters and Here is the custom highlighter to support that supports highlighting HSL Colors, so this is a pattern HSL function pattern Here's the HSL and the bracket and it takes three parameters Then this function passes the match the strings By using the internal utility function of the Solarized Osaka and This line it extracts the parameters into three variables then this line converts them into the number and HSL to the hex representation very simple The here is the result so you can quickly Understand what your color palette look like and then it's helpful to define

The highlights by picking up the right color from the your color palette Right. So let's say you wanna You want to use a blue color and here is a blue color palette and You can easily quickly know which is the light color to use your this highlight Yeah, very helpful. Yeah, so that's it. I hope it's helpful to create your own theme So please check out my Solarized Osaka theme and give it a try and let me know what you think Yeah, thanks for watching my presentation and I really appreciate the community efforts and I also enjoy learning Neovim a lot Always yeah, so thanks for watching and have a nice day. Cheers Oh Man I forgot to turn off the camera. Let's go Oh, no camera died camera died, let's go camera died