DEV Community

Cover image for I Watched an Anime and Built a VS Code Theme Bundle Inspired by 17th-Century Japanese Art
Mohit ✨
Mohit ✨

Posted on

I Watched an Anime and Built a VS Code Theme Bundle Inspired by 17th-Century Japanese Art

GitHub Copilot CLI Challenge Submission

This is a submission for the GitHub Copilot CLI Challenge

What I Built

I built Ukiyo-Tone — a six-theme VS Code bundle inspired by 17th-century Japanese Ukiyo-e woodblock prints and Sumi-e ink traditions.

It started with a Netflix binge.

I was watching Blue Eye Samurai and couldn't stop staring at the animation. Gorgeous. Every frame felt like a painting. That sent me down a rabbit hole — researching Ukiyo-e techniques, woodblock printing, mineral pigments, the whole aesthetic tradition.

And somewhere in that rabbit hole, I thought: What if my code editor felt like this?

Not flashy. Not trendy. Just... calm. Sharp. Built for long hours of focused work.

Honestly? Most VS Code themes feel like they're designed for screenshots, not actual coding sessions. They're either too sterile (corporate vibes) or too chaotic (rainbow syntax highlighting that makes your eyes bleed after two hours).

Ukiyo-Tone is different. It treats color as syntax, not paint. Keywords define grammar. Functions express motion. Variables carry weight. Nothing exists purely for aesthetics.

The bundle includes six distinct themes, each inspired by specific elements of Edo period culture:

Asahi (旭 - Morning Sun) — Light theme. Fresh washi paper and early morning light.

Karesansui (枯山水 - Dry Landscape) — Zen garden theme. Moss, stone, and raked sand.

Tasogare (黄昏 - Twilight) — Soft dark theme. Evening landscapes and faded indigo.

Koke-Dera (苔寺 - Moss Temple) — Monotone dark. Deep forest shadows.

Kuro-Sumi (黒墨 - Black Ink) — Deep dark theme. Charcoal ink and midnight shadows.

Kachi-iro (勝ち色 - Victory Color) — High contrast dark. The "lucky" navy indigo worn by samurai.

Each theme follows the same philosophy: restraint over abundance. If a visual choice improves screenshots but harms long-term focus, it gets rejected.

Demo

🎨 Install from VS Code Marketplace: Ukiyo-Tone

🔗 GitHub Repository: github.com/mohitSharma74/ukiyo-tone

Asahi (旭 - Morning Sun)

Asahi Theme

Karesansui (枯山水 - Dry Landscape)
Karesansui Theme

Tasogare (黄昏 - Twilight)
Tasogare Theme

Koke-Dera (苔寺 - Moss Temple)
Koke-Dera Theme

Kuro-Sumi (黒墨 - Black Ink)
Kuro-Sumi Theme

Kachi-iro (勝ち色 - Victory Color)
Kachi-iro Theme

My Experience with GitHub Copilot CLI

GitHub Copilot CLI didn't just help me build this — it helped me think through this.

Extracting Color Palettes from Art

I fed Copilot CLI a bunch of reference images — actual Ukiyo-e paintings, woodblock prints, photos of zen gardens. Then I asked it to analyze and extract color palettes that would work for syntax highlighting while staying true to the aesthetic.

This wasn't just "give me hex codes." It was a conversation about which colors carry enough contrast for readability, which ones feel organic versus mechanical, and how mineral pigment limitations in traditional art could translate to a modern coding environment.

Developing the Philosophy Document

The PHILOSOPHY.md file in my repo isn't an afterthought — it's the project's north star. I used Copilot CLI to help articulate my vision clearly.

I'd describe what I wanted ("a theme that disappears once deep focus begins") and Copilot would help me sharpen the language, identify contradictions in my thinking, and structure the document so it could guide future decisions.

The result is a decision framework that works for both humans and AI agents:

When evaluating any change, ask:

  1. Does this improve long-session clarity?
  2. Does this preserve visual hierarchy?
  3. Does this reduce cognitive noise?
  4. Would removing this make the theme weaker?

If the answer is unclear — do nothing.

Learning VS Code Theme Standards

I used the Microsoft Learn MCP server with Copilot to stay up to speed on VS Code theme development standards. Instead of jumping between documentation tabs, I could ask contextual questions while building — what token types exist, how semantic highlighting works, which scopes to target for specific languages.

It kept me in flow instead of breaking my concentration to search docs.

The Honest Truth

Copilot CLI made this project possible in the time I had. Without it, I would've spent weeks just researching color theory and VS Code APIs. Instead, I spent that time on what mattered: making deliberate design choices that serve developers who actually want calm in their editor.

What's Next

Ukiyo-Tone itself is just the beginning.

I'm currently working on a companion project: VS Code icons inspired by Ukiyo-e art and Sumi-e brush strokes. Same philosophy — restraint, clarity, cultural grounding. Designed to pair seamlessly with these themes.

Because honestly? Your editor shouldn't feel like six different design languages duct-taped together. It should feel like one intentional space.

Who This Is For

This theme isn't for everyone. And that's intentional.

It's for developers who spend long hours in their editor and want something that doesn't fight for their attention. For night-shift coders who need low eye strain without sacrificing readability. For anyone who's ever looked at their VS Code setup and thought: this feels like a corporate tool, not a craftsman's instrument.

Ukiyo-Tone is for people who want their workspace to feel like a zen garden — calm, intentional, and built for seeking clarity.

If you've ever felt like your editor's theme was designed for someone else's demo video instead of your actual workflow, give this a try.

That's exactly what I'd like you to take away from this.

Top comments (0)