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 #1e1a12 Editor background — warm deep brown, not pure black —

fg · dark #d0c4aa Foreground — warm off-white, not pure white 7.4:1 AAA

keyword #cc8855 Keywords — muted clay orange 5.8:1 AA

function #ddb86a Functions — muted amber gold 7.2:1 AAA

string #90aa78 Strings — muted moss green, warm-toned 5.2:1 AA

type #c8a06a Types — warm tan + italic 5.5:1 AA

number #cc8868 Numbers — muted terracotta 5.0:1 AA

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

bg · light #f8f2e8 Light background — warm off-white, low blue light —

fg · light #2c1c08 Light foreground — deep warm brown, 12:1 contrast 12: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>