---

What it styles

Slatewave is a from-scratch theme written against Anytype's public CSS variable API — no upstream theme dependencies. It tunes:

• Canvas — #282c34 editor background with a deeper #21252b vault sidebar, matching VSCode and Obsidian
• Accent states — selection, drop zones, active controls, and the system accent ramp resolve to #5eead4 (teal-300)
• Body text — #e2e8f0 slate-200 primary, #cbd5e1 slate-300 secondary, #64748b slate-500 tertiary
• Mentions and links — internal mentions render teal, external links render sky
• Code — inline pill with pale-teal foreground on #1e293b; fenced code blocks get a soft border
• Highlights — the bgColor-* palette is retuned so yellow, orange, red, pink, purple, blue, ice, teal, lime, and green each map to a Slatewave-flavored translucent fill
• Tags — the tagColor-* palette mirrors the highlight palette with solid fills, dark text on light tags
• Quotes — teal left rule, italic
• Scrollbar — slate thumb, teal on hover

Both dark and light modes are included. Dark is the primary target.

---

Installation

Anytype loads custom CSS from a single file in its working directory.

1. In Anytype: Menu → File → Open → Custom CSS. This opens (and creates if missing) custom.css in the Anytype work directory.
2. Replace its contents with custom.css from this repo.
3. Back in Anytype: Menu → File → Apply custom CSS. Apply it twice — Anytype's first pass loads the variables, the second pass picks up rules that reference them.

Note: Anytype custom CSS is desktop-only and per-device. It is not synced across devices. The setting can be toggled at any time.

To update later, replace the file and apply again. To uninstall, empty the file and apply.

From a clone

git clone https://github.com/kevinlangleyjr/anytype-slatewave
cp anytype-slatewave/custom.css "$ANYTYPE_WORK_DIR/custom.css"

$ANYTYPE_WORK_DIR resolves to:

• macOS — ~/Library/Application Support/anytype2/
• Linux — ~/.config/anytype2/
• Windows — %APPDATA%\anytype2\

The exact subdirectory may vary by version; the File → Open → Custom CSS menu is the safest way to find it.

---

Palette

Slatewave shares its palette with the companion VSCode theme and prompt. The anchor colors:

	Hex	Tailwind	Role
	#282c34	—	canvas background
	#21252b	—	vault sidebar, raised chrome
	#1e293b	slate-800	code blocks, tertiary surface
	#334155	slate-700	borders, dividers
	#e2e8f0	slate-200	body text
	#5eead4	teal-300	primary accent — selection, controls, mentions
	#99f6e4	teal-200	hover accent, lime
	#7dd3fc	sky-300	ice
	#38bdf8	sky-400	external links, blue
	#b388ff	—	purple
	#fb7185	rose-400	red
	#fbbf24	amber-400	yellow, warnings

See the VSCode theme README for the full scale and syntax mapping.

---

Customize

custom.css is a single file built around CSS custom properties. To override a variable, edit it in place — overrides at the bottom of the file win.

html.themeDark {
  --color-control-accent: #34d399 !important;  /* swap teal for emerald */
}

Re-run File → Apply custom CSS after each edit.

---

Slatewave family

One palette. Every tool.

• Editors — VSCode · JetBrains · Xcode · Sublime Text · Zed · Neovim · Helix
• Terminals — Alacritty · Ghostty · iTerm2 · WezTerm · Windows Terminal · Kitty
• Prompts — Oh My Posh · Powerlevel10k · Starship
• Multiplexer — tmux
• CLI — bat · delta · LSD · btop
• Notes — Obsidian · Logseq · MarkEdit
• Launchers — Alfred · Raycast
• Chat — Slack

See getslatewave.com for the full family.

---

Contributing

Issues and PRs welcome. For palette changes, include a before/after screenshot of the same page so the visual tradeoff is obvious.

---

License

WTFPL — Do What The Fuck You Want To Public License. See LICENSE.