// IDES

IDE themes

Drop-in themes for Zed and VS Code, tuned to the same brand cyan as the rest of SeaOwl. Pick one, install it in two minutes, get the same surface lightness across every window.

// ZED

SeaOwl for Zed

A JSON theme for the Zed editor — brand cyan, muted slate chrome, full syntax palette.

layer.rs — zed · seaowl-dark

//! Custom tracing Layer that collects span timing data.use std::collections::HashMap;use std::sync::{Arc, Mutex};/// Visitor that captures span fields into a HashMap.#[derive(Debug, Default)]struct FieldCollector {  fields: HashMap<String, String>,}fn render(value: &str) {  println!("field = {}", value);}

About

A native Zed theme that mirrors the SeaOwl design system palette — the same dark navy surfaces, brand cyan selection ring, and muted slate chrome used across every site page. Syntax is tuned to a cool, readable spread: purple keywords, blue functions, green strings, amber types, and brand cyan for operators and tags. Terminal ANSI colours, git status indicators, error/warning/success tints, and selection players all map to the canonical SeaOwl tokens so every Zed surface tracks the rest of the kit.

Install

Open Zed.
Press Cmd/Ctrl+, to open Settings.
Click the theme selector at the top of Settings, then choose "Add a new theme".
Paste the contents of seaowl-zed.json, or drop the file into ~/.config/zed/themes/.
Open the theme picker with Cmd/Ctrl+K Cmd/Ctrl+T and choose "SeaOwl Dark".

Download seaowl-zed.jsonZed theme registry · publication pending

// VS CODE

SeaOwl for VS Code

Cyber dark theme for VS Code — brand cyan accents, muted slate chrome.

metrics.ts — vs code · seaowl

/** Pulls chart data for the last N days. */export async function loadSeries(days: number) {  const res = await fetch(`/api/metrics?days=${days}`);  if (!res.ok) throw new Error("metrics offline");  return res.json() as Promise<Point[]>;}

About

SeaOwl for VS Code is a drop-in dark theme packaged as a local extension. Every chrome surface — activity bar, sidebar, tabs, status bar, terminal — tracks the same OKLCH tokens as the rest of SeaOwl. Keywords glow violet, types burn amber, strings stay green, operators pulse cyan. Selections and find matches use the brand cyan at low alpha so they register without shouting. Pairs cleanly with SeaOwl for Zed if you jump between editors.

Install

Create the extension directory: mkdir -p ~/.vscode/extensions/seaowl
Download all three files from /seaowl-vscode/ below: package.json, README.md, and themes/seaowl-color-theme.json
Place them under ~/.vscode/extensions/seaowl/ preserving the directory layout (themes/seaowl-color-theme.json stays in a themes/ subdirectory)
Restart VS Code
Open the Color Theme picker with Cmd+K Cmd+T (macOS) or Ctrl+K Ctrl+T (Linux/Windows) and choose "SeaOwl"

seaowl-color-theme.jsonVS Code Marketplace · publisher verification in progress

//! Custom tracing Layer that collects span timing data.use std::collections::HashMap;use std::sync::{Arc, Mutex};/// Visitor that captures span fields into a HashMap.#[derive(Debug, Default)]struct FieldCollector { fields: HashMap<String, String>,}fn render(value: &str) { println!("field = {}", value);}

/** Pulls chart data for the last N days. */export async function loadSeries(days: number) { const res = await fetch(`/api/metrics?days=${days}`); if (!res.ok) throw new Error("metrics offline"); return res.json() as Promise<Point[]>;}