"Years ago, when I read Sarah Drasner's article on creating a VS Code theme, I silently thought to myself, That's a lot of work... I'm never going to make a theme... But lo and behold, I went ahead and made one - and it took less than six hours to get most of the theme working, then a day or two to polish up my final tweaks."
"In this article, I want to you walk you through my process of creating this theme - along with the actual steps I took to create it. I think talking about the process is powerful because I went from Nah, too much work to Oh, I can do it to It's done..? all within a matter of hours. (The rest is simply time spent polishing)."
"I use Astro for my website. Shiki is a syntax highlighter that is built into Astro by default. With some quick research, I realized Shiki allows you to create themes with CSS variables - and there are only a handful of colors we need to choose. That doesn't sound too complicated, so I got AI to help flesh out a Shiki theme based on the CSS variables. Here's the CSS and JavaScript you need if you're using Astro as well:"
An existing website design used the Dracula theme for code snippets but clashed with a redesign, prompting a custom theme. The creator used Astro and Shiki, leveraging Shiki's support for themes with CSS variables to limit the color choices. AI assistance generated a Shiki theme based on those variables, enabling rapid development. Most of the theme worked within six hours and was polished over a couple more days. The approach required defining CSS variables for foreground, background, and token colors, and providing corresponding JavaScript for Astro integration. The result aligned syntax highlighting with the site's new design.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]