Hearth.dev / VSCode 代码主题

Hearth

黄昏时分，光线失去锐度，色彩回归本质。Hearth 是为长时间专注而生的代码主题。

向下探索

设计哲学

余烬，而非火焰

高饱和的语法色像明火，吸引注意但消耗眼力。Hearth 将所有高亮色的饱和度控制在 40–60%，像熄灭后的炭——有温度，不刺眼。

非黑非白的背景

纯黑背景会在白色文字周围产生光晕效应，让文字边缘模糊。深色版背景 #1e1a12 是深暖棕，浅色版 #f6f0e6 是暖调米白。

层次即语义

颜色亮度直接映射代码语义权重：关键字最显眼，函数名次之，变量再次，注释刻意退到背景里。

色温即护眼

整套配色基于橙棕暖调，色温低于 4500K。大量蓝光会刺激视网膜，暖色调的代码环境在长时间工作中对眼睛更友善。

颜色系统

bg · dark #1e1a12 编辑器主背景 — 深暖棕，非纯黑 —

fg · dark #d0c4aa 正文颜色 — 暖米色，非纯白 7.4:1 AAA

keyword #cc8855 关键字 — 低饱和陶土橙 5.8:1 AA

function #ddb86a 函数名 — 低饱和琥珀金 7.2:1 AAA

string #90aa78 字符串 — 低饱和苔绿，融入暖调 5.2:1 AA

type #c8a06a 类型 — 暖棕褐 + 斜体 5.5:1 AA

number #cc8868 数字 — 低饱和赤土色 5.0:1 AA

comment #6a5e48 注释 — 故意低亮度，视线自然略过 3.0:1 dec

bg · light #f8f2e8 浅色背景 — 暖调米白，低蓝光 —

fg · light #2c1c08 浅色正文 — 深暖棕，对比度 12:1 12:1 AAA

代码预览

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>