Seral Theme

Cover image for Seral Theme
View Project
VS Code Theme Developer Tools Syntax Highlighting JSON UI Design

Seral Theme is a VS Code theme package that combines the familiar clarity of GitHub’s editor surfaces with a more distinctive palette inspired by Stripe. It provides coordinated dark and light variants for developers who want a calm interface without losing visual hierarchy in code.

The problem

Many editor themes either draw too much attention to their palette or flatten important tokens into similar colors. The goal was to keep the surrounding interface quiet while making functions, JSON keys, array indices, and common syntax groups faster to distinguish.

Design priorities

  • Preserve a familiar GitHub-like editing environment
  • Keep dark and light modes within the same visual system
  • Make function definitions and calls more visible
  • Give JSON and configuration files a clearer hierarchy
  • Maintain contrast during long editing sessions without turning every token into an accent

Theme previews

Seral Dark theme preview
Seral Dark combines a deep GitHub-like base with purple accents and gold function highlighting.
Seral Light theme preview
Seral Light keeps the GitHub light structure while using stronger purple syntax contrast.

Dark and light systems

The dark variant uses #021024 as its base, #f0f6fc for primary text, #635bff for interface accents, and #ffd700 for functions and JSON keys. The light variant retains a white base and #24292f text while using #635bff and #8250df for its primary accents.

Token groups were tested across JavaScript, Python, Markdown, and JSON rather than tuned against a single screenshot. The intent is a consistent distinction between text, keywords, classes, functions, comments, and configuration keys without disconnecting editor colors from the surrounding UI.

Packaging

Seral Theme is packaged as a standard VS Code theme extension. Separate theme definitions share the same design direction while retaining mode-specific token and interface choices. The release workflow includes .vsix packaging, marketplace copy, preview assets, and manual checks across representative file types.

git clone https://github.com/aliyilmazco/seral-theme.git
cd seral-theme
npm install
npm run package
code --install-extension seral-theme-<version>.vsix

The long-term goal is to keep refining language coverage, marketplace documentation, and editor-surface consistency without sacrificing the restrained character of the theme.

Back to Projects