Shark Artist: Great White Theme

A VS Code color theme built on the great white shark's world: cold ocean depth, sharp contrast, and the clean menace of something perfectly evolved. Created by The Shark Artist.

Six variants: Great White (Dark), Great White (Light), Great White (Storm), Great White (Frost), Great White (High Contrast Dark), and Great White (High Contrast Light).

Screenshots

Great White (Dark)

Great White (Light)

Great White (Storm)

Great White (Frost)

Great White (High Contrast Dark)

Great White (High Contrast Light)

Color Palette

All syntax token colors meet WCAG AA contrast (4.5:1 minimum) against their respective backgrounds.

Coral (#c44f5f) and amber (#d9a441) appear only in diagnostics, diff-removed, and warnings. They are not used as general syntax accents.

Additional Great White Palettes

The new variants extend the gray-red-white-blue design space while preserving token hierarchy and readability.

Color Theory and VS Code Best Practices

• Use luminance for hierarchy first: code readability improves when semantic groups differ in lightness before hue.
• Reserve warm tones for urgency: diagnostics keep the canonical coral/amber signal, while standard syntax remains primarily cool.
• Separate TextMate and semantic rules: every token-family color change is mirrored in both tokenColors and semanticTokenColors.
• Maintain workbench/token parity: cursor, selection, lists, tabs, and focus borders follow the same palette axis as syntax tokens.
• Support low-vision scenarios: the high-contrast variants increase foreground-to-background separation and UI boundary visibility.

Features

• Contrast-verified -- all token colors computed against WCAG AA (4.5:1) before release.
• Six variants -- Dark and Light foundations, plus Storm, Frost, High Contrast Dark, and High Contrast Light.
• Extended family -- Storm and Frost provide gray-red-white-blue alternatives while keeping Great White identity.
• High-contrast options -- dedicated dark and light high-contrast themes for accessibility-first sessions.
• Theme Switcher -- a persistent 🦈 status bar button (always visible, left side) that opens a focused Quick Pick for instant switching between all Great White variants. No hunting through hundreds of themes.
• Semantic highlighting -- semantic token rules take priority over TextMate for TypeScript, Python, Rust, Go, and other language-server-supported files.
• Bracket pair colorization -- six distinct ocean-derived colors for nested brackets.
• Full workbench coverage -- 173 color keys: editor, sidebar, activity bar, tabs, status bar, title bar, input fields, buttons, lists, breadcrumbs, diff, peek view, minimap, git decorations, scrollbar, notifications, terminal.
• HTML / JSX / CSS -- tag names, attributes, and CSS properties explicitly styled.
• Markdown -- headings (bold), italic, inline code, fenced blocks, links, blockquotes.
• Terminal ANSI -- consistent 16-color ANSI palette shared across all variants.
• Explorer file nesting -- smart nesting patterns that group package.json, tsconfig.json, .env, README.md, vite.config.*, *.ts, C/C++ headers, Python lockfiles, CMake presets, PowerShell scripts, and systemd units under their logical parent nodes automatically.
• Entry point + config decorations -- the Explorer badges entry point files with E (amber) and config/build files with C (sky blue); parent folders tint amber when they contain an entry point. Individual badge types can be toggled independently.
• Copilot Context Gauge -- a real-data status bar gauge showing actual context window consumption from Copilot CLI sessions and Chat, scoped to the open workspace. Three severity zones (healthy/warning/critical) with trend arrows and a click-through detail panel. No popups, no automatic theme switches.
• AI-aware colors -- editorGhostText, editor.inlineSuggest, inlineChat, inlineChatDiff, chat, and terminalCommandDecoration color groups tuned for Copilot ghost text, the Ctrl+I inline chat panel, AI-generated diffs, and terminal command decorations.
• Agent file icons (opt-in) -- Great White: Agent File Icons icon theme provides custom SVG icons for AGENTS.md, CLAUDE.md, GEMINI.md, COPILOT.md, plan.md, .learnings/, and .copilot/ in the ocean-blue palette.
• Agent product icons (opt-in, foundation) -- Great White: Agent Product Icons product icon theme stub; full custom icon font planned for a future release.
• AGENTS.md syntax callouts (auto) -- a Markdown-injected TextMate grammar highlights agent-instruction prefixes (CRITICAL:, WARNING:, TODO:, NOTE:, etc.) in semantic colors automatically in every Markdown file.
• Self-improving -- includes an audit script, monthly GitHub Actions loop, and four custom Copilot agents (@theme-editor, @theme-auditor, @learnings-clerk, @release-manager) that enforce theme rules during development.

Install

VS Code Marketplace

1. Open the Extensions panel (Ctrl+Shift+X / Cmd+Shift+X).
2. Search Shark Artist: Great White Theme.
3. Click Install.
4. Press Ctrl+K Ctrl+T / Cmd+K Cmd+T and select any Great White variant.

From a .vsix file

code --install-extension shark-labs-great-white-theme-x.x.x.vsix

Local Development

git clone https://github.com/johnsirmon/shark-artist-great-white-theme.git
cd shark-artist-great-white-theme
code .
# Press F5 -> Extension Development Host opens
# Run: Preferences: Color Theme -> choose any Great White variant

Test across: TypeScript, Python, JSON, Markdown, HTML/JSX -- and check the diff editor and terminal too.

Custom Copilot Agents

Four specialist agents in .github/agents/ assist with development:

Invoke any agent with @agent-name in GitHub Copilot Chat.

Explorer Enhancements

File Nesting

Great White contributes smart explorer.fileNesting.patterns defaults so the Explorer collapses noisy sibling files under their logical parent. File nesting is enabled by default when the theme is active; you can disable it per workspace via the standard setting:

// .vscode/settings.json  — turn off nesting for this workspace
{ "explorer.fileNesting.enabled": false }

Entry Point & Config Decorations

The extension registers a FileDecorationProvider that visually highlights important files in the Explorer:

The E badge uses propagate: true, so the folder containing an entry point also receives the amber tint — making the path to an entry point visible at a glance even when folders are collapsed.

Entry points are resolved by reading the workspace's package.json once per folder (cached). The cache is invalidated automatically whenever package.json changes on disk.

Settings — three knobs are available:

// User or workspace settings — hide only config badges
{
  "greatWhite.showConfigFileBadges": false
}

All three settings take effect immediately with no reload required.

Commands

All commands are available via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P). Search Great White.

Theme Switcher

Starting in v0.8.0, a persistent status bar button lets you switch between Great White variants instantly — no Ctrl+K Ctrl+T required, no scrolling through every installed theme.

Status bar button

The button lives on the left side of the status bar and is always visible regardless of which theme is active:

The label updates automatically whenever the active theme changes.

Switching variants

Click the button (or run Great White: Switch Theme from the Command Palette) to open the switcher:

• All 7 variants are listed with the currently active one pre-selected and marked $(check) active
• Select any variant to apply it instantly — no confirmation, no reload
• Bloodloss is included with a note that it is the overflow/alarm theme
• Browse all VS Code themes… at the bottom opens VS Code's built-in full theme picker

Copilot Context Gauge

Starting in v0.7.0, Great White ships a passive, always-visible status bar gauge that shows actual Copilot context window consumption — sourced directly from CLI session files and Chat. There are no popups and no automatic theme switches.

Status bar

The gauge sits at the bottom right and updates every 10 seconds (configurable):

Trend arrows reflect the direction of change between polls: ↑ rising · ↓ falling · → steady.

Severity zones

Click for details

Click the status bar item to open the Context Gauge detail panel — a QuickPick listing:

• Each CLI session scoped to the current workspace: name, model, context %, turn count, duration, output tokens, git branch
• Active sessions marked ●, idle sessions ○
• Copilot Chat context status (best-effort estimation, — when unavailable)
• Quick actions: Refresh, Context Gauge Settings

Data sources

The gauge reads from ~/.copilot/session-state/:

Context % is calculated as outputTokens ÷ contextWindowSize where the window size is looked up by model family (Claude: 200 K · GPT-5: 200 K · GPT-4: 128 K). Only sessions whose working directory matches the open workspace are shown.

Configuration

Two settings are available:

// Example: poll every 30 seconds and reduce I/O
{
  "greatWhite.contextGauge.pollInterval": 30
}

Bloodloss theme

Great White (Bloodloss) remains available as a manual theme choice in the theme picker — only the automatic switching is removed. Select it yourself for any reason; the gauge will continue to display context data regardless of which theme is active.

Agentic Workflow Visibility

Starting in v0.5.0, Great White extends its palette into AI/agent surfaces so Copilot interactions feel native to the theme rather than using VS Code defaults.

AI surface colors (all six variants)

Agent File Icons (opt-in)

Activate via Preferences: File Icon Theme → Great White: Agent File Icons.

Custom SVG icons for agent-workflow files, all in the ocean-blue/teal/amber palette:

VS Code only allows one active file icon theme. Selecting Great White: Agent File Icons replaces any previously active icon theme.

Agent Product Icons (opt-in, foundation)

Activate via Preferences: Product Icon Theme → Great White: Agent Product Icons.

Currently a minimal stub using the built-in Codicon font. A full custom shark-ocean icon font is planned for a future release.

AGENTS.md Syntax Callouts (automatic)

A TextMate grammar (text.agents.markdown) is injected into all Markdown files automatically. It highlights agent-instruction prefixes in semantic colors wherever they appear:

Section headings, inline code, and file paths within these callouts also receive distinct styling.

Design Philosophy

1. Contrast from depth, not color count. The palette is narrow on purpose. Visual hierarchy comes from luminance contrast between token types, not from using many distinct hues. Every color in the palette earns its place.

2. Danger is the only warmth. Coral and amber are reserved exclusively for errors, warnings, and diff-removed highlights. When you see warm color in the editor, something needs your attention. Strings, functions, and types stay cool.

3. Dark is the ocean floor; Light is shark belly. The dark background evokes pressure and depth -- light barely reaches here, so every lit token stands out sharply. The light background is the pale, smooth underside: cold, clean, and high-contrast in a different direction. All variants stay on the same shark-ocean accent axis so switching feels like surfacing, not abandoning the visual language.

Packaging and Publishing

npm install -g @vscode/vsce
vsce package          # creates .vsix, also runs in CI on every push to main
vsce login shark-labs
vsce publish

Before publishing, work through docs/release-checklist.md.

Feedback and Issues

Found a token that looks wrong in your language? Open an issue with:

• The language and file type
• The token type that looks wrong (e.g., "parameter color is same as foreground in Rust")
• A short code snippet that reproduces it

License

MIT. See LICENSE.