DEV Community

Michael Calkins
Michael Calkins

Posted on

Building Accessible Themes with Generative AI

Why I Needed Better Themes

Most default code editor themes don’t work for me. As someone with astigmatism, high-contrast or overly saturated themes strain my eyes. I constantly switched themes, but nothing felt right.

It wasn’t just about looks, I needed help creating something that was suited my needs for writing code. Many themes either failed WCAG contrast standards or were uncomfortable to read. Creating a custom theme felt daunting, until I started using gen AI to assist me.

How Generative AI Helped

Using generative AI, I could describe exactly what I needed:

  • "A dark theme with muted backgrounds and soft contrast for string literals."
  • "All elements must pass WCAG AAA minimum contrast."
  • "Avoid yellows and high-saturation colors."

In minutes, I had accessible designs tailored to my needs. I wasn’t just editing and fighting through balancing colors, I had help developing a modern and balanced theme in a way that I couldn't do on my own anymore. It was empowering. For the first time, I had themes that were readable, comfortable, and suited to how I see.

Until you experience irregular blurry halos coming off of every character in your editor, it's hard to describe how frustrating reading code can be.

Tips for Prompting AI

AI doesn’t guess what you want. I had the best results by giving it:

  • One task at a time
  • Clear small goals
  • Specific preferences
  • Research for best practices

Vague or multi-step prompts didn’t work well. Treat it like a calculator: provide direct context and direction, and you’ll get more useful results.

Expect to Iterate

It rarely gets everything right on the first try. I often had to refine, delete, and review code carefully. Iteration is part of the process and you have to adapt to that.

As models improve, the gap between idea and result shrinks—but small adjustments are still needed. With each round, I made progress toward a usable theme.

Use the Latest Model

Through experimentation, I found that newer, more capable models consistently delivered better results. Whether generating code, themes, or documentation.

Older or less advanced models often struggled. They produced themes that lacked readability or relied on bland, ineffective color palettes, making the output less useful and less creative.

Vision Matters

Generative AI won’t decide your goals for you. One thing I didn’t anticipate was how much I needed a clear plan. You have to think like a product designer. Define what you want, choose the features that matter, and use the result yourself to check if it works.

Without direction, the output drifts ineffectively. Knowing your end goal helps you steer the process and shape something that truly fits your needs.

Final Thoughts

Generative AI helped me fix a long-standing problem. I now have themes that meet both my visual needs and accessibility standards.

If default themes don’t work for you, AI-powered customization is worth exploring. Provide clear context, iterate patiently, and make accessibility a priority. You don’t have to settle anymore.

There’s a lot of power here to do good. Improving software for others takes time and effort, but this is one of those tools that lets you fill important gaps without needing a whole team. I plan to keep looking for more of those gaps, and hopefully volunteer my skills with a little help from language models. There’s so much opportunity to improve the tools we all use, and make them usable and enjoyable for more people than ever before.

Themes published here if you're curious: https://marketplace.visualstudio.com/items?itemName=michaeljcalkins.wcag-themes

Top comments (0)