OpenCode Themes: One Color Palette, Two Editors

I spend most of my day in terminals and markdown editors. They should look like they belong together.

Why Another Theme?

I use OpenCode as my primary AI coding tool. Its terminal palette — purple accents, cyan highlights, teal links on a near-black background — is genuinely pleasant to stare at for hours. But every time I switched to Obsidian or Typora to write notes, the visual context switch was jarring.So I extracted OpenCode's color scheme and built themes for both editors. Then I packaged them into a single monorepo with a landing page, because why not.

The Palette

The entire theme is built on these colors:

Role	Color	Hex
Background	Deep black	#0d1117
Text	Cool white	#f0f6fc
Accent	Purple	#8a6cc4
Highlight	Lavender	#d19af8
Links	Cyan	#5fd4bb
Headings	Blue	#7aa2f7
Inline code	Gold	#f0a830
Success	Green	#9ece6a
Warning	Red	#f7768e
Info	Sky	#89ddff

It's not a random color dump — each color has a semantic role. Headings are always blue. Links are always cyan. Inline code pops in gold against the dark background. You build muscle memory for what things are based on color alone.

Obsidian Theme

The Obsidian version is published on the Community Themes registry. Install it from Settings → Appearance → Community Themes → search "OpenCode".Key decisions:

Monochrome sidebar: The file tree and panels use muted grays so the editor pane is the visual focus
Purple accents: Active states, selections, and UI highlights use #8a6cc4
Readable code blocks: Fenced code gets a slightly lighter background (#161b22) with the full syntax palette
No light mode: This is a dark theme. If you want light mode, this isn't for you

Typora Theme

Typora doesn't have a community registry, so installation is manual: download opencode.css and the opencode/ asset folder into Typora's theme directory.The Typora version needed different treatment:

WYSIWYG focus: Typora renders markdown inline, so the theme emphasizes reading flow over editor chrome
Print-friendly code blocks: Code blocks have slightly higher contrast since Typora users often export to PDF
Consistent heading scale: H1 through H6 follow a tighter ratio than Obsidian since Typora content tends to be more document-like

The Monorepo

Both themes live in opencode-themes:

Text

opencode-themes/
├── obsidian/          # theme.css + manifest.json
├── typora/            # opencode.css + opencode/ assets
├── website/           # Landing page + Typora showcase
├── README.md
└── LICENSE

The Obsidian theme also has a standalone repo because the Obsidian Community Themes registry requires theme.css at repo root. Both repos are kept in sync.

One-Line AI Install

If you use an AI coding assistant, you can install either theme with a single prompt:Obsidian:

Text

Install the OpenCode theme for Obsidian from https://github.com/nxxxsooo/opencode-themes — copy obsidian/theme.css and obsidian/manifest.json to my vault's .obsidian/themes/OpenCode/ directory

Typora:

Text

Install the OpenCode theme for Typora from https://github.com/nxxxsooo/opencode-themes — copy typora/opencode.css and typora/opencode/ folder to my Typora themes directory

Landing Page

There's a landing page at mjshao.fun/opencode-themes with tabbed installation instructions and a live palette preview. It uses the same dark terminal aesthetic as the themes themselves — dark background, subtle grid, purple and cyan accents.

为什么又做一个主题？

我用 OpenCode 作为主力 AI 编码工具。它的终端配色——紫色强调、青色高亮、深黑背景——盯一天也不累。但每次切到 Obsidian 或 Typora 写笔记时，视觉上的割裂感很明显。于是我把 OpenCode 的配色方案提取出来，分别给两个编辑器做了主题。然后打包成一个 monorepo，顺便做了个 landing page。

配色方案

整个主题基于这些颜色：

角色	颜色	Hex
背景	深黑	#0d1117
正文	冷白	#f0f6fc
强调	紫色	#8a6cc4
高亮	薰衣草	#d19af8
链接	青色	#5fd4bb
标题	蓝色	#7aa2f7
行内代码	金色	#f0a830
成功	绿色	#9ece6a
警告	红色	#f7768e
信息	天蓝	#89ddff

不是随便选的颜色——每种颜色都有语义。标题永远是蓝色，链接永远是青色，行内代码在深色背景上用金色弹出。你会本能地通过颜色判断内容类型。

Obsidian 主题

Obsidian 版已发布到 Community Themes 注册表。安装路径：设置 → 外观 → 社区主题 → 搜索 "OpenCode"。设计要点：

单色侧边栏：文件树和面板用低饱和灰，让编辑区成为视觉焦点
紫色强调：选中态、激活态、UI 高亮都用 #8a6cc4
可读代码块：代码区域用稍浅的背景（#161b22），搭配完整的语法配色
没有浅色模式：这就是一个深色主题

Typora 主题

Typora 没有社区主题商店，需要手动安装：下载 opencode.css 和 opencode/ 资源文件夹，放到 Typora 的主题目录里。Typora 版有不同的处理方式：

所见即所得：Typora 实时渲染 Markdown，所以主题更注重阅读流畅度
打印友好的代码块：代码块对比度稍高，因为 Typora 用户经常导出 PDF
紧凑的标题层级：H1 到 H6 用了更紧凑的比例，更适合文档类内容

Monorepo 结构

两个主题都在 opencode-themes 里：

Text

opencode-themes/
├── obsidian/          # theme.css + manifest.json
├── typora/            # opencode.css + opencode/ 资源
├── website/           # Landing page + Typora 预览
├── README.md
└── LICENSE

Obsidian 主题还有一个独立仓库，因为 Obsidian 社区主题注册表要求 theme.css 在仓库根目录。两个仓库保持同步。

AI 一键安装

如果你用 AI 编码助手，可以用一句话安装：Obsidian：

Text

从 https://github.com/nxxxsooo/opencode-themes 安装 OpenCode Obsidian 主题 - 把 obsidian/theme.css 和 obsidian/manifest.json 复制到我的 vault 的 .obsidian/themes/OpenCode/ 目录

Typora：

Text

从 https://github.com/nxxxsooo/opencode-themes 安装 OpenCode Typora 主题 - 把 typora/opencode.css 和 typora/opencode/ 文件夹复制到我的 Typora 主题目录

Landing Page

在 mjshao.fun/opencode-themes 有一个 landing page，包含分标签的安装说明和配色预览。用的也是同样的深色终端风格——深色背景、细网格、紫色和青色点缀。

链接

Monorepo：github.com/nxxxsooo/opencode-themes
Obsidian 独立仓库：github.com/nxxxsooo/obsidian-opencode-theme
Landing page：mjshao.fun/opencode-themes
Release：v1.0.0

OpenCode Themes: One Color Palette, Two Editors

OpenCode Themes：一套配色，两个编辑器

Why Another Theme?

The Palette

Obsidian Theme

Typora Theme

The Monorepo

One-Line AI Install

Landing Page

Links

为什么又做一个主题？

配色方案

Obsidian 主题

Typora 主题

Monorepo 结构

AI 一键安装

Landing Page

链接

Recent posts