テーマはSillyTavernの見た目(色、フォント、メッセージカードの形、作成者が Custom CSS(カスタムCSS)に記述したデザイン)を変更するものです。キャラクターやチャット履歴、API設定には一切影響しません。このガイドでは当サイトの無料テーマ Lumi Day と Lumi Night を例に説明しますが、他のどのテーマファイルでも手順は同じです。

1. テーマファイルを入手する

テーマは1つの .json ファイルです。使いたいテーマファイルと、付属している場合はその壁紙をダウンロードします。

  • Lumi Day と Lumi Night:テーマページのダウンロード欄から入手できます。ダウンロードには無料のTavernAPIアカウントが必要です。
  • その他のテーマ:作者の配布ページから入手します。テーマの Custom CSS はページ全体の見た目を書き換えられるため、信頼できる配布元のファイルだけをインポートしてください。

2. テーマをインポートする

  1. User Settings(上部バーの人型アイコン、ユーザー設定)を開きます。
  2. UI Theme(UIテーマ)を探し、テーマ一覧の横にある Import a theme file(テーマファイルをインポート)をクリックします。
  3. .json ファイルを選択します。SillyTavernの一覧にテーマが追加され、すぐに切り替わります。

あとから別のテーマに変えたいときは、UI Theme の一覧から選ぶだけです。元のテーマも一覧にそのまま残ります。

UI Theme の一覧と丸で囲まれた Import a theme file ボタンが表示されたSillyTavernの User Settings

3. 壁紙を追加する

  1. Backgrounds(上部バーの画像アイコン、背景)を開きます。
  2. Add Background(背景を追加)をクリックし、壁紙の画像を選びます。
  3. 追加された壁紙をクリックして適用します。

壁紙はテーマではなくチャット側に紐づく仕組みになっており、SillyTavernではチャットごとに別々の背景を記憶できます。Lumiのガラスカードは付属の星海の壁紙に合わせてデザインされていますが、好きな画像を使っても問題ありません。

Add Background ボタンが丸で囲まれたSillyTavernの Backgrounds パネル

4. ポートレートをくっきり表示させる

Lumiのように大きなポートレートを表示するテーマでは、キャラクターのアバターがSillyTavernの想定よりはるかに大きく表示されます。SillyTavernはアバターを小さなサムネイル(96 × 144ピクセル)として保存するため、引き伸ばされるとぼやけて見えます。SillyTavernフォルダ内の config.yaml でサイズを引き上げてください。

yaml
thumbnails:
  dimensions:
    avatar:
      - 640
      - 960
    persona:
      - 640
      - 960

その後、data/default-user/thumbnails/avatar と data/default-user/thumbnails/persona のフォルダを削除してSillyTavernを再起動します。次回各アバターを表示したときに、くっきりした新しいサムネイルが作られます。動作が重めのスマホでは、512 と 768 にするとちょうど良いバランスになります。

ぼやけた 96 × 144 のサムネイルと、その隣に並んだくっきりした 640 × 960 のサムネイルの同じポートレート

5. ぼかし効果をオンのままにする

すりガラス風のテーマにはSillyTavernのぼかし処理が必要です。User Settings にある No Blur Effect(ぼかし効果を無効化)をオンにすると、バッテリー節約のためにすべてのぼかしがオフになり、ガラスカードは単なる半透明の色付きカードとして表示されます。デザイン通りの見た目にするにはチェックを外したままにし、端末の動作が苦しい場合のみオンにしてください。

SillyTavernの User Settings で丸で囲まれ、チェックが外れたままの No Blur Effect チェックボックス

色やデザインを微調整する

文字の色はどのテーマでも共通で、User Settings → Main Text(本文)、Italics Text(斜体・思考)、Quote Text(セリフ)、Underlined Text(下線)で変更できます。また、Lumiを含む多くのテーマでは、Custom CSS の先頭に短い設定ブロックが用意されています。Lumiでは Tweak me という名前で、ポートレートの高さ、カードの角丸、ぼかしの強さ、フォントを調整できます。各項目の詳細はテーマページをご覧ください。