My Journey to Building a light theme
Tags: themebuilding, lightthemes, vscodethemes, themes
Published: 2023-04-27 04:58:47

Disclaimer: 

My intention is not to persuade you that a light theme is superior to a dark theme or vice versa. This is simply my personal experience, and I am sharing it with you without any intention of giving a recommendation.


I was a Dark-mode person for a while, but a couple of years ago, I started to get less productive and got some strange pain in my eyes/head. I started looking around for what could be a root cause of this issue and came across those articles: 
1. [Astigmatism](https://en.wikipedia.org/wiki/Astigmatism)
2. [The Effect of Richer Visualizations on Code Comprehension](https://pm.inf.ethz.ch/publications/AsenovHilligesMueller16.pdf)
3. [The impact of web page text-background colour  
combinations on readability, retention, aesthetics and behavioural intention](https://tecfa.unige.ch/tecfa/maltt/cosys-2/textes/hall04.pdf)
4. [Dark side of dark mode](https://tidbits.com/2019/05/31/the-dark-side-of-dark-mode/)

After experiencing issues with productivity and pain in my eyes and head, I knew that I needed to try a white theme to evaluate the differences and see if it could help solve my problems. I decided to conduct an experiment, which lasted for around two weeks, to determine whether a white theme would be suitable for me. However, the outcome was shocking, as by the end of the second week, after switching back to my favorite dark theme (Gruvbox <3) the experience was quite unexpected. I found myself struggling to focus for more than 15 minutes, and the symptoms of reduced productivity and pain in my eyes and head were slowly coming back. This made me realize the importance of finding the right theme for my own personal needs and preferences, and inspired me to continue exploring different options until I found the perfect fit.

Over the years, I experimented with various themes, but none of them seemed to satisfy my needs. While there's no denying that a dark theme has a richer color palette and looks cooler than a light theme, I still felt that it wasn't the right fit for me. I used the GitHub light theme for a year, but eventually realized that it wasn't the perfect solution for me. This realization sparked an exciting journey for me, as I decided to build my own light theme. While it was a pleasant experience to use a theme maintained by someone else that was available for most of the tools I used, I was determined to create a theme that perfectly aligned with my personal preferences and requirements.

As for my work setup, I use a MacBook as my primary machine for development, and I rely on a few key tools to get my work done. These tools include Visual Studio Code (Vscode), various products from JetBrains, and Warp.

Once I had my desired color palette in mind, I began building my own theme starting with Vscode. I found that building a theme in Vscode was a relatively straightforward process, and there are a few key things to keep in mind if you're interested in building your own. 

First, it's important to know that Vscode uses textmate2 as a tokenizer engine, and you can find detailed documentation on how this works on the Vscode website. Additionally, there is a tool called VSCE that can greatly simplify the process of theme development, and I highly recommend checking it out if you're just starting out. 

Once you're ready to get started, follow the steps outlined on the Vscode website to begin building your theme. One thing to keep in mind is that tokens can be combined into several groups in the theme.json file, which can help you organize your theme and ensure that it works seamlessly across different programming languages and syntaxes.
Vscode links:
1. [VSCE](https://github.com/microsoft/vscode-vsce)
2. [Text mate 2 ](https://macromates.com/blog/categories/textmate-2/)
3. [vscode - Your First Extension](https://code.visualstudio.com/api/get-started/your-first-extension)
4. [vscode - Language Extensions Overview](https://code.visualstudio.com/api/language-extensions/overview)
5. [vscode - Publishing extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension)
6. [vscode - Semantic Highlighting Overview](https://code.visualstudio.com/api/working-with-extensions/publishing-extension)

During my first iteration of the theme, I understood that my color palette sucked. 
Vscode offers [Token Inspector](https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#scope-inspector) that allows you to find and style the token type. The overall development experience is incredible, even though textmate2 does not support some token types.  
After a few weeks of working on the theme - I was finally happy with the outcome. 
For those who are interested - [Mimesis theme vscode](https://marketplace.visualstudio.com/items?itemName=AlexanderDyriavin.mimesis)

But it was only one-third of the journey, the vscode theme was completed, and I started working on the theme for Warp. 

Warp offers you a clean way of creating a theme. It's super simple: 

1. Use this app - [Warp themes](https://warp-themes.com/)
2. Use this vs code extension - [Warp companion](https://marketplace.visualstudio.com/items?itemName=haack.warp-companion)

Considering that I already had colors aligned, it took me 15 mins to make a couple of prototypes for warp. 
For those who are interested - [Mimesis theme warp](https://github.com/dyriavin/mimesis-warp)


The last leg of my journey involved building the theme for JetBrains IDE's, which proved to be the most challenging part of the project. This was primarily because JetBrains products are JVM based, and the development process was quite heavyweight. However, the available documentation and tutorials were quite helpful in achieving the desired result. While creating the theme for the General Editor (where you type code) was relatively easy, and I could tweak it without writing any line of code, the process of getting the IDE UI just right was a mess.

1. Follow the steps from the [official repository](https://github.com/JetBrains/intellij-platform-plugin-template) 
2. Enable [LAF](https://plugins.jetbrains.com/docs/intellij/internal-ui-laf-defaults.html) 
3. Use [UI inspector](https://plugins.jetbrains.com/docs/intellij/internal-ui-inspector.html) 
4. Update your theme file and re-run app, if you feel stuck follow this [tutorial](https://www.youtube.com/watch?v=9J0j-90dC60) - there a lot of useful information in the playlist :) 
5. Editor themes - [Semantic Highlighting Overview](https://www.jetbrains.com/help/idea/configuring-colors-and-fonts.html)
6. Customize themes - [Reference to doc](https://plugins.jetbrains.com/docs/intellij/themes-customize.html)
7. IDE UI components - [Reference to doc](https://jetbrains.design/intellij/principles/platform_theme_colors/#UI-components)

For those who are interested - [Mimesis theme JetBrains](https://plugins.jetbrains.com/plugin/21180-mimesis-theme)

I've open-sourced all of the work, if you are interested in contributing, investigate theme:
1. [Mimesis-Jetbrains](https://github.com/dyriavin/mimesis-theme)
2. [Mimesis-vscode](https://github.com/dyriavin/mimesis-vscode)

Summary: 
I am not an expert in this field, but I had a problem and sought a solution. I decided to make this post to save some time for people with the same struggles as me. 
I am happy with the results of my themes, but some minor inconsistencies will be fixed in the future. I enjoyed working with API/Documentation provided by all vendors, and it was a pleasant experience; I am grateful to the Product teams behind those products! 

If you are looking for a light theme but have yet to find something that works for you, I am inviting you to try my theme. 

But remember that I built it over my experiences and preferences - I don't and won't claim that this theam will boost your performance or it will work for you. This theme is a subjective interpretation of my personal preferences an experiences.