Hearth.dev / VSCode Color Theme

Hearth

At dusk, light loses its edge and color returns to its essence. Hearth is a code theme built for long hours of focus.

scroll to explore

Design Philosophy

Ember, not flame

High-saturation syntax colors burn bright but exhaust your eyes. Hearth keeps all highlight colors at 40–60% saturation — warm like cooling coal, not blinding like fire.

Neither black nor white

Pure black backgrounds cause halation around white text, blurring edges. Hearth's dark background is #1e1a12 — a warm deep brown — and light is #f6f0e6, a warm off-white.

Hierarchy as semantics

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

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 #161411 Dark canvas — soot blackboard beside the hearth —

fg · dark #d6cab4 Dark foreground — chalky parchment white for long focus 11.4:1 AAA

keyword #d0653b Keywords — ember red for control flow anchors 6.2:1 AA

function #ddb06a Functions — brass amber for callable targets 7.5:1 AAA

string #87ab70 Strings — moss green with warm base 5.6:1 AA

type #79a8a2 Types — mineral teal + italic for structural symbols 6.0:1 AA

number #c66a52 Numbers — terracotta red for constants 5.3:1 AA

comment #6b5f4d Comments — intentionally dim, eye skips naturally 3.0:1 dec

bg · light #f2eadc Light background — parchment off-white to reduce glare —

fg · light #2f210e Light foreground — deep walnut brown for long-form reading 11.6:1 AAA

Code Preview

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.Hearth.dev'
const TIMEOUT = 5_000

Hearth Light

// 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.Hearth.dev'
const TIMEOUT = 5_000

Hearth Dark

# dataclass-based connection pool
from dataclasses import dataclass, field
from typing import Optional, ClassVar
import asyncio

@dataclass
class Connection:
    host: str
    port: int = 5432
    timeout: float = 30.0

class Pool:
    MAX: ClassVar[int] = 20

    def __init__(self, dsn: str):
        self.dsn = dsn
        self._pool: list[Connection] = []

    async def acquire(self) -> Optional[Connection]:
        if not self._pool:
            return None
        return self._pool.pop()

Hearth Light

# dataclass-based connection pool
from dataclasses import dataclass, field
from typing import Optional, ClassVar
import asyncio

@dataclass
class Connection:
    host: str
    port: int = 5432
    timeout: float = 30.0

class Pool:
    MAX: ClassVar[int] = 20

    def __init__(self, dsn: str):
        self.dsn = dsn
        self._pool: list[Connection] = []

    async def acquire(self) -> Optional[Connection]:
        if not self._pool:
            return None
        return self._pool.pop()

Hearth Dark

// HTTP server with graceful shutdown
package main

import (
  "context"
  "net/http"
  "time"
)

type Server struct {
  addr    string
  timeout time.Duration
  mux     *http.ServeMux
}

func New(addr string) *Server {
  return &Server{
    addr:    addr,
    timeout: 10 * time.Second,
    mux:     http.NewServeMux(),
  }
}

Hearth Light

// HTTP server with graceful shutdown
package main

import (
  "context"
  "net/http"
  "time"
)

type Server struct {
  addr    string
  timeout time.Duration
  mux     *http.ServeMux
}

func New(addr string) *Server {
  return &Server{
    addr:    addr,
    timeout: 10 * time.Second,
    mux:     http.NewServeMux(),
  }
}

Hearth Dark

<!-- Hearth UI component -->
<style>
  :root {
    --Hearth: #c9833a;
    --bg: #1e1a12;
  }
  .card {
    background: var(--bg);
    border: 1px solid var(--Hearth);
    border-radius: 8px;
    padding: 1.5rem;
  }
</style>

<div class="card">
  <h2>Hearth</h2>
  <p>黄昏之境</p>
</div>

Hearth Light

<!-- Hearth UI component -->
<style>
  :root {
    --Hearth: #c9833a;
    --bg: #1e1a12;
  }
  .card {
    background: var(--bg);
    border: 1px solid var(--Hearth);
    border-radius: 8px;
    padding: 1.5rem;
  }
</style>

<div class="card">
  <h2>Hearth</h2>
  <p>黄昏之境</p>
</div>