カスタムCSS
カスタムCSSを使えば、ソースコードを変更せずにソフトの見た目を調整でき、フォントの変更、テーマカラーの変更、メッセージバブルの背景調整など、画面を自分の好みにより近づけられます。
どこで設定するか
開く 【設定】→【外観】、ページ下部にある 「カスタムCSS」 コード欄にスタイルを書き込めば、即時に反映されます。空欄のままなら、カスタムスタイルは読み込まれません。
書き込んだCSSは、そのまま各ウィンドウの <head> 内に注入され、対応する <style id="user-defined-custom-css"> 要素が作成されます。これはソフト内部のスタイル階層（cascade layer）に属さないため、同じセレクタ条件ではあなたのスタイルの優先度が標準スタイルより高くなり、多くの通常の宣言は !important を付けなくても上書きできます。
使えるサンプル
以下のコードは、現在実際に存在する変数とセレクタだけを使っています。
テーマ変数について
ソフトは配色を表すために、CSSのカスタムプロパティ（変数）を一式使っています。ライトテーマのデフォルト値は :root に定義され、ダークテーマの上書き値は .dark に定義されています。ダークテーマに切り替えると、ルート要素に .dark クラスが付与されます。したがって、ライト／ダークを分けたい場合は、旧来の :root と .dark セレクタではなく、 theme-mode 属性セレクタを使わずにそれぞれ記述してください。
よく使われる公開変数には次のようなものがあります：
--background / --foreground
メイン背景色 / メイン前景（文字）色
--primary / --primary-foreground
テーマカラー / テーマカラー上の文字色
--card / --popover
カード、ポップオーバーの背景色
--muted / --muted-foreground
弱めの背景 / 弱めの文字色
--border / --input / --ring
枠線、入力欄、フォーカス時のアウトライン色
--sidebar 系
サイドバー関連の配色
--chat-user
ユーザーメッセージバブルの背景色
--link
リンク色
--code-block / --inline-code
コードブロック / インラインコードの背景色
--font-family / --code-font-family
グローバルフォント / コードフォント
--radius
角丸の基準値
変数の完全な一覧とデフォルト値はソースコードを参照してください：
旧スタイルシートを貼り付ける際の注意
旧バージョン向けに作成され、現在のUIと互換性のないスタイルシートを貼り付けた場合、ソフトが自動的に無効化し、カスタムCSS欄に案内を表示することがあります。その場合は、まず現在の変数とセレクタに合わせてスタイルを調整し、案内に従って先頭行のマークを削除して再有効化してください。
関連おすすめ
Cherry Studio テーマライブラリ： https://github.com/boilcy/cherrycss
中国風のCherry Studioテーマスキンをいくつか共有： https://linux.do/t/topic/325119/129
💡 ヘルプの取得とフィードバックの送信
設定や使用中に疑問、バグ、または機能改善の提案がある場合は、 フィードバックと提案 に記載の公式チャネルをご参照ください。
最終更新
役に立ちましたか？