テーマプリセット#

Copy as MarkdownView Markdown

このページと テーマギャラリー が、公開済みスキンと配色の 公式カタログ です。実験ではなく、安定した製品面です。パッケージは下の 執筆契約 に従うので、どのスキンもどの配色と組めます。

Ox Content はテーマを独立した 2 軸に分け、2 系統のパッケージとして公開します。

• スキン (@ox-content/theme-*) は 形 を持ちます。幾何、質感、タイポ、モーション。スキンはすべて --octc-* カスタムプロパティに対して書き、色名を直書きしません。
• 配色 (@ox-content/theme-color-*) は 色 を持ちます。ライトとダークのパレットだけ。レイアウトも質感もフォントも持ちません。

どちらも相手を知らないので、どのスキンもどの配色パッケージとも組めます。27 スキン × 46 配色パッケージ = 1242 通り です。ギャラリーには named migration variant も並べるので、64 scheme row × 27 スキン = 1728 通り を確認できます。

ギャラリー#

すべての組み合わせを見る →

ギャラリーは本物の SSG スタイルシートを iframe 内で描画するので、見た目はビルドしたサイトそのものです。ライトとダーク、ランディングと記事ページ、ライブの WebGL 背景も含みます。

各スキンの見本です。それぞれ、想定した配色で撮っています。

Pixel Liquid Glass Blur Glass Analog Film Fluid Fabric Leather Brutalist Terminal Blueprint Risograph Swiss Neon Clay Editorial Aurora Holo Paper Voltage Manuscript Ledger Kiosk Atlas Receipt Bauhaus Zine Noir

クイックスタート#

片方ずつ入れます。

npm install @ox-content/theme-liquid-glass @ox-content/theme-color-tokyo-night

それからレイヤーとして並べます。theme は配列を受け取り、左から右へ合成します。

// vite.config.ts
import { defineConfig } from "vite";
import { oxContent } from "@ox-content/vite-plugin";
import liquidGlass from "@ox-content/theme-liquid-glass";
import tokyoNight from "@ox-content/theme-color-tokyo-night";

export default defineConfig({
  plugins: [
    oxContent({
      srcDir: "docs",
      ssg: {
        siteName: "My Docs",
        theme: [liquidGlass, tokyoNight],
      },
    }),
  ],
});

あとから足したものが勝つので、自分の上書きは最後です。

theme: [
  liquidGlass,
  tokyoNight,
  {
    colors: { primary: "#ff5f56" },
    footer: { copyright: "Copyright © 2026 My Company" },
  },
];

どちらの軸も単独で使えます。スキンなしの配色は既定テーマの色を変え、配色なしのスキンは既定パレットの形を変えます。

スキン#

各スキンはだいたい 6–7 kB の CSS で、JavaScript はゼロ、実行時依存もありません。

配色#

どの配色も、対になるライト と ダークのパレットを載せます。組み込みヘッダーの切替で、追加設定なしに切り替わります。

すべての配色パッケージを、ライトとダークの対で見られる preview です。各カードはページ背景、本文、リンクアクセント、コード背景、シンタックスアクセントを抜き出しています。組み合わせはギャラリーで試せます。

Shiki migration preset#

Ox Content 3 はネイティブ tree-sitter highlighter だけでコードをハイライトします。Shiki runtime、highlightTheme、TextMate grammar、2 つ目の highlighter は戻しません。下の表は、公式 @shikijs/themes@4.4.3 の theme ID（MIT）を、完全な Ox Content ThemeConfig export に対応させたものです。

各 export はライト/ダークが対になった theme のままです。Shiki 側が片方の mode しか持たない場合は、pairing 列に Ox Content が使う安定した相棒を明記しています。syntax color は Ox Content の semantic role（comment、punctuation、keyword、string、constant、function、parameter、link）に写します。TextMate scope の完全な一致は意図的に対象外です。

シンタックスハイライト#

ハイライトは両モードで配色に従い、追加設定は不要です。ネイティブ tree-sitter ハイライターはトークン色を --octc-syntax-* カスタムプロパティとして出します。各配色がモードごとに定義するので、1 ビルドで 2 パレットです。

配色はページ背景ではなく コード背景 に対してシンタックス色を選びます。いくつかのライト配色（mono、snow、nord、retro、monokai、poimandres、synthwave）は、ライトモードでも意図して暗いコードブロックを残します。固定テーマだと暗いトークン色が乗って読めなくなります。

配色がなければプロパティは GitHub Dark に落ちます。

他のトークンと同じように、個別トークンを上書きできます。

theme: [pixel, tokyoNight, { darkTokens: { "syntax-token-comment": "#5a6a8a" } }];

モーション#

プリセットはモーション優先で、すべて宣言的 CSS です。

• 文書横断のページ遷移 は @view-transition { navigation: auto } です。ヘッダーとサイドバーに view-transition-name が付くので、記事が入れ替わるあいだそれらは止まります。ルータもクライアントバンドルもない、アプリのような感触です。
• スクロール駆動の現れ は animation-timeline: view() です。見出し、コードブロック、表、機能カードは入ってくると上がり、機能グリッドは列でずれます。
• ダイアログ入場 は @starting-style です。検索モーダルは、JavaScript でクラスを切り替えなくても開くアニメーションになります。

すべては @supports の後ろにあるので、機能のないエンジンは完成した静的状態を描くだけです。アニメーションしていない状態が隠れた状態になることはありません。すべて prefers-reduced-motion: reduce でオフになります。

CSS を触らずに振付を変えられます。どのスキンもタイミングをトークンとして出します。

theme: [liquidGlass, tokyoNight, { tokens: { "motion-base": "200ms", "motion-ease": "linear" } }];

ライブ背景#

3 つのスキンは、CSS で偽るのではなく GPU でヒーロー背景を描きます。

3 つとも手書き WebGL2 で、依存はゼロ です。Three.js もバンドルも、入れるものはありません。テーマ自身の js に入り、SSG が 1 つのインラインスクリプトとして出します。

厳密にプログレッシブエンハンスメントで、次のどれでもページは JavaScript なしの描画のままです。

• prefers-reduced-motion: reduce — 起動しない
• WebGL2 コンテキストがない、またはシェーダがコンパイルに失敗する — 起動しない
• ヒーローが画面外、またはタブが裏 — 描画を止める
• どんなエラーでも — 飲み込む。下の CSS 背景がデザインだから

色は同じ --octc-* プロパティからライブパレットを読むので、背景は配色に従い、テーマ切替のたびに読み直します。

独自トークン#

tokens と darkTokens は、プレフィックスなしのキーで任意の --octc-* カスタムプロパティをセットします。レイヤー間でキー単位にマージするので、1 つ上書きするために残りを書き直す必要はありません。

theme: [
  liquidGlass,
  tokyoNight,
  {
    tokens: { "surface-glass": "#f8fafc", "code-line-add": "rgba(0,200,120,.18)" },
    darkTokens: { "surface-glass": "#0c1324" },
  },
];

トークン名はビルド時に検証されます。宣言ブロックの外へ出られる名前は、壊れたスタイルシートを出す代わりにビルドを落とします。

合成の仕組み#

resolveTheme は各レイヤーの extends 鎖を平坦化し、結果をマージします。

• オブジェクトフィールド（colors、tokens、layout、fonts、…）は キー単位 にマージし、最後のレイヤーが勝ちます。
• css と js はレイヤー順で 連結 します。上書きするとスキン + 配色スタックの半分が消えます。同じ断片は一度だけつなぐので、配列と extends の両方から届いたレイヤーは二重に出ません。

だからスキンは面の変数を生の css ではなく tokens で宣言します。トークンはスタイルシートが走る前に宣言的に解決するので、パッケージを並べる順に結果が依存しません。

パッケージを書く#

プリセットはプレーンな ThemeConfig です。実装するプラグイン API はありません。スキンは css、fonts、layout、モーション tokens をセットし、配色は colors、darkColors、tokens、darkTokens をセットします。新しいパッケージは、公開済みの他レイヤーと合成できるよう、下の互換契約を満たす必要があります。

互換性#

• ライトとダーク。 配色は colors と darkColors の両方を持つ ThemeConfig（default または named）を export する必要があります。必須パレットキー: primary、background、text、textMuted、border、codeBackground、codeText。カタログ配色は primaryHover と backgroundAlt も載せます。
• 必須シンタックストークン。 配色は tokens と darkTokens の下に、ハイライタートークンを定義する必要があります。少なくとも syntax-foreground、syntax-background、いくつかの syntax-token-* キー。これらは @ox-content/theme-color-* パッケージが解決する --octc-syntax-* カスタムプロパティになります。
• スキンは色をハードコードしてはいけない。 スキンが持つのは形であり、パレットではありません。ThemeConfig.colors / darkColors に hex や rgb を置かないでください。CSS 変数と、色フィールドの省略は構いません。css では --octc-color-* と --octc-accent-* を参照し、色合いには color-mix() を使います。奥行きのための中立の黒 / 白アルファは構いません。
• 左から右へ合成。 ssg.theme にレイヤーを配列で並べます。オブジェクトフィールドはキー単位にマージし、css と js は連結します。後のレイヤーが勝ちます。
• スクリーンショット。 上のギャラリー向けに、スキン（または代表的な組み合わせ）のスクリーンショットを含めてください。

import { defineTheme } from "@ox-content/vite-plugin";

export default defineTheme({
  name: "my-skin",
  fonts: { sans: "Inter, system-ui, sans-serif" },
  tokens: { "motion-base": "260ms", "motion-ease": "cubic-bezier(.2,0,0,1)" },
  css: `.header { border-bottom: 2px solid var(--octc-color-primary); }`,
});

デフォルトテーマの品質#

組み込みスタイルシート（ssg.css）が、すべてのスキンと配色が乗る品質の下限です。値をハードコードする代わりに、次のトークンを上書きしてください。

html のスムーススクロールは prefers-reduced-motion: no-preference のときだけ有効です。コード行のぼかしとナビのシェブロン遷移は、モーション低減時に切れます。PR ベンチマークはデフォルトテーマの CSS/JS サイズを出し続けます。クロームを足すより、これらのトークンを調整してください。

ここでの対象外: セルフホストフォント、Iconify CSS、tweet / full-card の見た目、印刷用スタイルシート、スキンごとのギャラリースクショ更新。回帰したら個別の follow-up として切ってください。