配色のカスタマイズ

下に行くほど詳細に設定できます

カラースキーム選択

• 設定 > テーマ編集 > 「基本のカラースキームを選択」で、プリセットの中から色を選択

※詳細モード(色を個別に設定します)にチェックがない場合は、色を選択するとすぐに色が切り替わります。
※詳細モード(色を個別に設定します)にチェックがある場合は、「カラーをリセット」をしないと選択した色が反映されません。

詳細モードで個別に色を設定

• 設定 > テーマ編集 > 「詳細モード(色を個別に設定します)」にチェックを入れると、文字色や背景色などの変更ができるようになる

詳細モードのチェックを外すと標準の配色に戻ってしまいます。設定内容自体が消えるわけではないので、チェックを入れ直すとまた以前に設定した配色になります。

上級設定をONにし、テーマ編集 > テーマの「色の出力フォーマット」の設定を変更すると、RGBやHEX値などをそのまま貼り付ける事ができます。

カラーの色が適用される主な場所

• フォーカスカラー、ID数大
  • アクティブなペイン上に表示される線（スレッドタブ欄とスレッド欄の間などに表示されるアクセントカラーの線）
  • 板やタブなどに表示される未読数バッジの背景色（レス新着・レス未読数の〇背景）
  • 板の勢いの色（この色をベースにして色が作成されます）
  • 設定の上級設定のマーク
  • 設定 > スレッド > IDの色 「レスのID色を変更するID数(第三段階)」
    ※IDだけでなく、被アンカーレス番号と名前、ワッチョイ、IP、吹き出しツリーの回数カウンターにも使用されます
• ID数中
  • 板やスレッドのNG/強調/ミュートの状態表示アイコンと文字の色（タブの右クリックメニュー > 板orスレッド > 設定 > NG/マーク/ミュート > 「NG/強調/ミュートを一時的に無効化」か「NGだけを表示」をONにすると表示される「瞳に斜線アイコン」と隣の文字）
  • 設定 > スレッド > IDの色 「レスのID色を変更するID数(第二段階)」
• ID数少、取得済みスレ
  • 板の新着スレッドのマーク(⚫︎)とタブがあるスレッドのマーク(｜)
  • 板の取得済みスレッドの背景色（この色をベースにして色が作成されます）
  • アクティブなタブの下に表示される線
  • サイドパネルのスレッドタイトルやスレッド欄のレスの右下に表示される三角形のマーク(◢)
  • 設定 > スレッド > IDの色 「レスのID色を変更するID数(第一段階)」

詳細モードの「カラーをリセット」について

詳細モードの「カラーをリセット」をすると、その時に選択中のカラースキーム（ダークなど）のデフォルト状態の配色がセットされる。失敗した時のやり直しに使えるほか、カラースキームを変更した場合は、まずリセットしてから色を設定すると良いだろう。

なお、リセットする前にはバックアップを取っておくと安心。

https://egg.5ch.net/test/read.cgi/software/1680333697/948

948: RomTenma sage 2023/06/09(金) 00:48:00.21 ID:jfl43B3X0
（前略）
最初に起動したときにdefaultのテーマが作成されますが、その時にシステムがダークモードであった場合初期値がダークモードを基調にしたものに設定されます
詳細モードはその初期値を参照するので選択しているカラースキームとは別の色になってしまいます
カラーをリセットというボタンが追加されますが、それは選択したカラースキームで色を上書きするものなのでリセットしたあとに色を調整するという流れを想定しています

theme.jsを編集して配色をカスタマイズ

• 色設定をファイルに出力してtheme.jsのcolorの項目で個別に色を設定

より詳細に色の指定ができます。
バージョン0.11.0の時点で設定できる項目が200以上あります。
theme.jsのcolorは詳細モードの色設定を上書きするため、詳細モードで設定した色が反映されない場合があります。
（詳しく知りたい方は、公式マニュアルの「より詳細なテーマ編集」(https://sikiapp.net/theme/#_11)をご確認ください）

設定方法

1. 設定 > テーマ編集 > 「設定したいテーマの選択」付近にマウスポインターを移動する > 左上に出る「ギア」のアイコンをクリック > 色設定をファイルに出力する > 保存する
   作者(RomTenma)による参考画像 https://i.imgur.com/QbOIX7p.png
2. 1で保存した[テーマ名].color.jsonを開いて変更したい所を探す
3. Chromiumで使用できる形式で色を記入する（透明度やtransparentも使用可能）
4. profile/theme/[テーマ名]/theme.jsを開く
5. "color": { }の中に変更したい項目を記述する

　※注意
　値がダブルクォーテーションで囲まれてない等のミスがあると、起動時にtheme.jsのほぼ全てが削除されてしまいます。
　色が反映されてないと感じた場合は、すぐにミスの修正と上書き保存をしリロードしてください。

参考例（バージョン 0.10.8）

{
  "type": "light",
  "key": "sample.theme",
  "name": "sample",
  "color": {
    // 【サンプル】
    "siki.background": "white",
    "siki.foreground": "#222222",
    "siki.activeForeground": "rgb(216 222 233 / 80%)",
    "siki.activeBackground": "hsl(220deg 16% 22%)",
    "siki.outline": "hwb(210 0% 21% / 0.8)",
    "windowsBtn.background": "transparent",
  },
  "colorSet": {
    "id": 1,
    "name": "Light",
    "description": "標準的なライトテーマ",
    "type": "light"
    },
  "size": {
    "resheader": 12,
    "resbody": 16,
  /* 以下、省略 */

　記述するのは変更したい項目だけでOKです。
　記述してない部分は選択しているカラースキームの色と詳細モードで設定したカラーが使用されます。
　
color.jsonはSikiで使用されないため自由にコメントが書けます。
theme.jsは半角スラッシュ2個でコメントを残せますが、設定のテーマ編集で何か変更するとコメントは全て削除されてしまいます。

設定可能な項目一覧

項目と説明はバージョン 0.11.5 時点

※ページ作成者が便宜上使用している非公式な名称が含まれています。
曖昧な説明の言語化や翻訳できる方は書き換えお願いします。

利便性を上げるため見出しを入れてあります。

Siki

サイドパネルアイコン

スレッドタブ

板タブ

スレッド

板

その他

user.cssでデザイン

• profile/theme/[テーマ名]/user.cssに色を記述する

CSSで変更できない部分もありますが、theme.jsのcolorを併用する事で大部分の色を変更することができます。
（別ウィンドウで開く設定画面やブラウザビューなどはカスタムCSSを適用できません）

0.27.0以降であればjsonに出力される色設定を変数としてuser.css内から利用することが可能になりました。
https://egg.5ch.net/test/read.cgi/software/1702679229/338

338: RomTenma sage 2023/12/27(水) 13:42:33.67 ID:SeCa9IjS0
ユーザーCSSは<style id="siki-user-style">の下に次のように展開されています

main[data-theme="default.theme"] {
 /** ここにuser.cssが展開 **/
}

現在は構文のチェックは行なっていないので例えば{や}を無駄に置いただけでユーザーcssが機能しなくなってしまいます

css変数は<style id="siki-theme-style">の下に次のように展開されます

:root main[data-theme="default.theme"] {
 --size-windowBorder: 1px;
 --size-sightline: 3px;
 --color-siki-sightlineBackground: #f32e20;
}

色は色設定をjsonに出力したものに準拠していて
siki.foregroundは --color-siki-foregroundに置き換えたものが変数名となります

user.css内でこの変数を使いたい時は

color: var(--color-siki-foreground);

というような形で呼び出せます
また変数を上書きしたい場合はuser.css内で以下のように出来ます

& * {
 --color-siki-sightlineBackground: green;
}

基礎的なCSSの知識は必要ですが色の変更だけならなんとかなるはず。
公式のマニュアルやこのWikiのカスタムCSSも参考に。