Warm contrast for long coding sessions

Hearth Code

Turn your editor into hearthside parchment and coffee. Warm, low-glare, and semantically steady - with dark and light tuned to the same readability standard and refined texture.

Install in seconds and feel the difference on your first file.

Hearth Dark
// async data fetching with full type safety
import { createContext, useContext } from 'react'

interface ApiResponse<T> {
  data: T
  status: number
  ok: boolean
}

async function request<T>(
  url: string,
  options?: RequestInit
): Promise<ApiResponse<T>> {
  const res = await fetch(url, options)
  const data = await res.json() as T
  return { data, status: res.status, ok: res.ok }
}

const BASE = 'https://api.hearthcode.dev'
const TIMEOUT = 5_000

Quick Proof

Same code. Clearer hierarchy. Less glare.

HearthCode keeps syntax roles stable across four variants and applies shared readability constraints, so dark and light both stay clear, consistent, and polished.

4 variants

Dark, Dark Soft, Light, Light Soft

Cross-mode clarity

dark and light keep comparable readability and texture

Stable semantics

same token roles across all variants

Hearth Dark

Hearth Dark

Default daily driver with warm contrast and strong token hierarchy.

Hearth Dark Soft

Hearth Dark Soft

Lower contrast pressure for late-night and dim-room sessions.

Hearth Light

Hearth Light

Paper-toned light mode tuned for docs and daylight coding.

Hearth Light Soft

Hearth Light Soft

Softer light contrast for calmer daytime focus and long reading flow.

HearthCode Philosophy

01

Ember, not flame

High-saturation syntax colors burn bright but exhaust your eyes. Hearth keeps highlights in a moderate saturation range, then tunes them under readability constraints so they stay warm without glare.

02

Neither black nor white

Pure black backgrounds can create halation around white text and blur edges. Hearth uses warm, non-extreme background tones across all four variants to keep glare down and reading layers stable.

  • Hearth Dark
  • Dark Soft
  • Hearth Light
  • Light Soft
03

Hierarchy as semantics

Brightness maps directly to semantic weight: keywords are brightest, functions next, variables after, and comments deliberately fade into the background.

04

Color temperature as comfort

The entire palette is warm-toned, below 4500K. High blue-light content strains the retina. A warm coding environment is easier on your eyes over long sessions.

Color System

bg · dark #23201c Dark canvas — soot blackboard beside the hearth
bg · dark-soft #2b2926 Dark Soft canvas — warmer gray-black for lower night contrast stress
fg · dark #d3c9b8 Dark foreground — chalky parchment white for long focus 9.9:1 AAA
keyword #c26f59 Keywords — ember red for control flow anchors 4.4:1 dec
function #d7ad70 Functions — brass amber for callable targets 7.8:1 AAA
string #8fb87d Strings — moss green with warm base 7.2:1 AAA
type #5d98a4 Types — mineral teal + italic for structural symbols 5.0:1 AA
number #ba846d Numbers — terracotta red for constants 5.1:1 AA
comment #6b5f4d Comments — intentionally dim, eye skips naturally 2.6:1 dec
bg · light #efe6d8 Light background — parchment off-white to reduce glare
bg · light-soft #e4d8c5 Light Soft background — softer parchment tone for calmer daylight contrast
fg · light #2a1e0f Light foreground — deep walnut brown for long-form reading 13.2:1 AAA
fg · light-soft #4b3a27 Light Soft foreground — mellow walnut ink to keep contrast pressure low 7.7:1 AAA

Final Step

Ready to code in HearthCode?

Hearth fire, coffee, and a parchment-like reading feel - so every line of code stays warm and clear.

MIT Licensed 4 Themes · VS Code + Open VSX Current release v1.0.16