CSS テーマ

CSS テーマは公開ページの機能を置き換えずに外観を変更します。JavaScript は実行されず、配色・フォント・密度・枠線・状態スタイル・レスポンシブ詳細に向いています。

最小マニフェスト

json

{
  "schema": "nie-sla-theme-v1",
  "id": "example-theme",
  "name": "Example Theme",
  "version": "1.0.0",
  "type": "theme",
  "mode": "css",
  "author": "Developer",
  "description": "A restrained NIE-SLA theme.",
  "license": "MIT",
  "styles": ["theme.css"],
  "files": ["manifest.json", "theme.css"]
}

schema は現在のテーマパッケージ互換性定数です。リテラル値 nie-sla-theme-v1 を使用してください。

フィールドルール

フィールド	ルール
`id`	3〜49 文字の小文字英字・数字・ハイフン。先頭は英字
`version`	SemVer。例：`1.2.0`、`2.0.0-beta.1`
`type`	固定で `theme`
`mode`	`css`。省略時は CSS として扱う
`styles`	パッケージ内 `.css` を 1〜4 個。配列順に読み込む
`files`	推奨。ZIP 内の全ファイルと完全一致させる
`preview`	任意。パッケージ内の PNG/JPEG/GIF/WebP/SVG を指す
`license`	任意。SPDX 形式の識別子。例：`MIT`、`Apache-2.0`
`repository` / `homepage`	任意。資格情報なしの HTTPS URL。最大 500 文字

name と author は最大 64 文字、description は 240 文字、license は 32 文字です。システムは admin・api・classic・extensions・plugins・themes などの ID を予約しています。未知フィールドは実行能力にならず、カスタムフィールドでスクリプト権限を申請することもできません。

スコープ

テーマ固有のルールは自分の ID 内に限定します。

css

body[data-extension-theme="example-theme"] {
  --bg: #f5f8f7;
  --paper: #ffffff;
  --text: #13201e;
  --muted: #64736f;
  --line: #d7e0dd;
  --green: #087d71;
  --red: #d9503f;
  --yellow: #b7791f;
  --blue: #2563a8;
  --radius: 6px;
  --shadow: 0 10px 28px rgba(17, 39, 35, 0.08);
}

ホストが公開する変数を優先して上書きし、深い nth-child・自動生成クラス・現在の DOM 階層に依存しないでください。テーマ更新でユーザーが本番フロントエンドのソースを変更する必要があってはいけません。

スタイルはパッケージ内のフォント・画像を参照できます。リモート URL はサイト CSP とサプライチェーンポリシーの対象になるため、正式パッケージは自己完結にしてください。

デザインとアクセシビリティ

本文と背景のコントラストは WCAG AA を満たす。
状態を色だけで伝えず、文字や図形の違いを残す。
エラー・フォーカス・状態説明・重要コントロールを隠さない。
明確な :focus-visible を維持する。
prefers-reduced-motion を尊重する。
フォントはローカルフォールバックを用意する。
320・375・768・1280・1440 ピクセル幅で横方向オーバーフローがない。
長い VPS 名・業者・都市・回線・ラベルが隣接情報を覆わない。

パッケージ構造

text

manifest.json
theme.css
assets/
  display.woff2
preview.webp

マニフェストは ZIP ルートに置き、余計なプロジェクトフォルダで包まないでください。CSS の相対リソースパスはパッケージ内に留め、CDN や開発サーバーに依存しないでください。ランタイムパッケージは拡張子なしの LICENSE/NOTICE や Markdown を受け付けません。完全なライセンスはソースリポジトリとリリースページに置き、ZIP ではマニフェストの license フィールドを使います。

バージョン戦略

色・レイアウト欠陥の修正：PATCH。
互換スタイルと新しい任意機能の追加：MINOR。
既存 UI の意味変更・新しいホスト構造の要求：MAJOR。

有効化前に、インストール・既定無効・有効化・無効化・同一 ID アップグレード・削除を最低限テストしてください。

ローカルチェック

bash

find dist -type f -print | LC_ALL=C sort
(cd dist && zip -X -r ../release/example-theme-1.0.0.zip .)
shasum -a 256 release/example-theme-1.0.0.zip

同一 ID の新バージョンをアップロードすると旧リビジョンは削除され、無効のまま維持されます。オンラインのホットスワップではありません。テストデプロイで検証し、管理者が SHA-256 を確認してから有効化してください。

CSS テーマ ​

最小マニフェスト ​

フィールドルール ​

スコープ ​

デザインとアクセシビリティ ​

パッケージ構造 ​

バージョン戦略 ​

ローカルチェック ​