Skip to content
| Marketplace
Sign in
Visual Studio Code>Themes>Chronotype ThemesNew to Visual Studio Code? Get it now.
Chronotype Themes

Chronotype Themes

Chatman R. Jr

|
10,676 installs
| (2) | Free
Custom VSCode themes for pleasant, productive programming around the clock.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info
  • Chronotype Themes
    • Motivation
    • Supported syntax
    • On minimal interfaces
    • On minimal syntax
    • Soft Themes
      • Chronotype: Morning
      • Chronotype: Evening
    • Hard Themes
      • Chronotype: Midday
      • Chronotype: Midnight
    • Syntax Demo
      • HTML
      • CSS
      • JavaScript
      • React
      • Vue
      • Angular

Chronotype Themes

Chronotype is a collection of themes created for pleasant, productive programming around the clock.

Get it at the VSCode Marketplace

Motivation

I use a lot of themes. Probably too many. So I figured I may as well create my own set that can grow along with my needs.

Supported syntax

Chronotype provides basic highlighting for most web development grammars, including:

  • HTML
  • CSS
  • JavaScript
  • React
  • Vue
  • Angular

Special support will be added as needed.

On minimal interfaces

One thing I miss about Vim since switching to VS Code: no cruft. Everything in the interface had a job and went away when not doing its job. In comparison, VS Code initially seemed very busy and overwhelming. So I looked around for a way to trim the fat.

A good place to start is this article by Marcio Barrios.

On minimal syntax

I've never gone so far as to disable syntax highlighting, but I prefer when it's actually helpful. The Alabaster Theme philosophy aims to have just enough highlighting to convey relevant information about the code.

I took it step further and added additional classes:

  • Idiomatic language constructs (public, private, this)
  • Backdrop (standard language keywords, some punctuation)
  • Negation (a reset for syntax I explicitly don't want highlighted)

Soft Themes

Chronotype: Morning

Chronotype: Morning UI Demo

Chronotype: Evening

Chronotype: Evening UI Demo

Hard Themes

Chronotype: Midday

Chronotype: Midday UI Demo

Chronotype: Midnight

Chronotype: Midnight UI Demo

Syntax Demo

HTML

HTML Light HTML Dark

CSS

CSS Light CSS Dark

JavaScript

JS Light JS Dark

React

React Light React Dark

Vue

Vue Light Vue Dark

Angular

Angular Light Angular Dark

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft