Tide

A quieter place to think.

Sea-glass teal. Warm amber. Quiet blue-slate. Two carefully paired themes for Visual Studio Code.

Visual Studio Marketplace · Open VSX

Tide Dark — deep blue-black surfaces, soft ice text, and selective color.

Tide Light — cool off-white, deep colored inks, and the same visual hierarchy.

Design

Tide keeps the interface in the background. Teal identifies actions and calls; amber gives types and constants a recognizable shape. Periwinkle keywords and sage strings add separation without turning every token into an accent.

• Neutral chrome: menus, tabs, sidebars, and status text stay quiet.
• Non-italic typography: including comments and semantic tokens. Markdown headings retain bold; links retain underlines.
• Purposeful states: clear focus outlines, restrained selections, and understated diff fills with distinct gutters and borders.
• Modern coverage: workbench, terminal, diagnostics, notebooks, testing, debugging, inline edits, chat, agent sessions, and modern tabs/activity bars.
• Native and lightweight: two declarative themes; no runtime dependencies, activation code, telemetry, or settings changes.

Built for review

Diffs use restrained teal/coral fills, clear word outlines, and readable gutter numbers. Normal-size code keeps its 4.5:1 contrast floor across the modeled diff backgrounds.

Tide Dark	Tide Light

Install

Install Tide — Teal & Amber by willibrandon from the Visual Studio Marketplace or Open VSX.

code --install-extension willibrandon.tide-theme

Open Preferences: Color Theme (⌘K ⌘T on macOS, Ctrl+K Ctrl+T on Windows/Linux) and choose Tide Dark or Tide Light.

For manual installation, download the VSIX from GitHub Releases and use Extensions → … → Install from VSIX.

Requires VS Code 1.137.0 or newer, or a compatible editor.

Accessibility

The automated contract measures normal-size text at 4.5:1 and essential non-text indicators at 3:1, with alpha-composited backgrounds. Code on diff highlights has the same text threshold as code on the main editor surface.

Every configured workbench color is accounted for in the audit or has an explicit exclusion. Validation rejects unsupported color names, missing pairs, deprecated aliases, unclassified additions, semantic italics, and dark/light coverage drift.

These checks establish the modeled contrast contract, not universal WCAG conformance for every extension, overlay combination, terminal application, or user customization. See the accessibility contract for coverage, exceptions, and how to reproduce the results.

Develop

Use Node.js 24.11+ (24.x). The Node version, dependencies, VS Code release, and test grammars are pinned for reproducible development.

npm ci
npm run build          # generate both themes from shared roles
npm run check          # drift, registry, contrast, grammar, and regression tests
npm run package        # build dist/tide-theme-0.1.0.vsix
npm run preview        # real VS Code in a browser at http://localhost:4173

For desktop preview, open this repository in VS Code and press F5 using Preview Tide Dark or Preview Tide Light. See CONTRIBUTING.md for the source layout and visual-review workflow.

Screenshots and runtime checks

npx playwright install chromium
npm run capture

This opens the pinned VS Code 1.137.0 build, verifies the active workbench palette and nine rendered semantic roles, and captures dark/light source, inline/side-by-side diffs, diagnostics, and TextMate-only views. Primary screenshots are written to assets/; additional captures and reports go to dist/. Browser/font rendering can differ across operating systems.

Quality reports

npm run check writes machine-readable contrast and grammar reports under dist/. CI builds the VSIX and retains reports; the visual job separately checks real-editor loading and captures screenshots.

License

MIT