Hearth.dev / VSCode カラーテーマ

Hearth

夕暮れ時、光は鋭さを失い、色は本質へと還る。Hearth は長時間の集中のために設計されたコードテーマです。

下へスクロール

デザイン哲学

炎ではなく、残り火

高彩度のシンタックスカラーは目を引くが、目を疲弊させる。Hearthはすべてのハイライトカラーの彩度を40〜60%に抑えている。

純黒でも純白でもない

純黒の背景は白いテキストの周囲にハレーションを起こす。Hearthのダーク背景は #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 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>