ChatGPT に CSS を追加するだけ (Stylus)

2026/05/08  CSS を最新版に更新しました。
2026/04/25  CSS を最新版に更新しました。
2026/04/21  チャットタイトルをダミータイトルで覆い隠す CSS も併用できます。
2026/04/21  CSS を最新版に更新しました。
2026/04/13  CSS を最新版に更新しました。
2025/12/22  CSS を最新版に更新しました。

ChatGPT に CSS を追加するだけです。独自 CSS を追加できるブラウザ拡張機能 (Stylus など) が必要です。以下のような見た目になります (2026/04/13 版) (アクセントカラーは「黄」が合うと思います)。色を調整したい場合は調整してください。

(この記事の内容とは関係ないですが、上記で ChatGPT は chezmoi に暗号化済み列挙コマンドはないといっていますが、chezmoi managed --include=encrypted で列挙できます。)

CSS

ライトテーマに追加するので、設定からテーマを「ライト」にしておく必要があります。

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP&display=swap");
/*----- 色の変更 -----*/
.\@container\/main {
  background-color: #fdfcf5;  /* メイン画面背景色 */
}
.light {
  --text-primary: #564c3e;  /* 文字色 */
  --theme-submit-btn-bg: #564c3e;  /* 入力フォームの音声モードボタン背景色 */
  --bg-tertiary: #dcf0ef;  /* サイドバー中のアクティブなチャットの背景色 */
  --bg-secondary-surface: #dcf0ef;  /* サイドバー中のチャットへのホバー時の背景色 */
  --interactive-label-hover-secondary: #564c3e;  /* 各チャットのメニュー … の色 */
  --main-surface-primary: #91b6d2;  /* ヘッダ背景色 */
  --bg-primary:  #cfe5c0;  /* 入力フォーム背景色 */
  --stage-scroll-gutter: auto;  /* スクロールバーガターが両サイドに出るのを規定値に */
  --my-sidebar-surface-primary: #a4d7d6;  /* サイドバー背景色 */
}
.dark {
  --bg-tooltip: #564c3e; /* 入力フォームのマイクアイコンホバー時のツールチップ背景色 */
}
.\[--sidebar-surface-primary\:var\(--main-surface-primary\)\] {
  --sidebar-surface-primary: var(--my-sidebar-surface-primary);
}
.bg-token-main-surface-primary {
  background-color: var(--my-sidebar-surface-primary);
}
.content-fade:after {
  background-color: var(--bg-primary);  /* メイン画面下部背景色 (グラデーション) */
}
.data-\[fixed-header\=less-than-xl\]\:\@w-xl\/main\:bg-transparent[data-fixed-header=less-than-xl] {
  /* ウィンドウ幅に関わらずヘッダ色を --main-surface-primary に */
  background-color: var(--main-surface-primary);
}
.bg-black,
[data-radix-popper-content-wrapper] div,
[data-radix-popper-content-wrapper] div:hover {
  /* オンマウスで出てくる吹き出し */
  background-color: #564c3e;
  color: #fdfcf5;
}
.btn-primary {
  /* 送信済みメッセージ編集時の送信ボタン */
  background-color: #564c3e;
  color: #fdfcf5;
}

/*----- フォント・フォントサイズ・行間の変更 -----*/
:host, body, html {
  /* 基準のフォント・フォントサイズ */
  font-family: 'IBM Plex Sans JP', sans-serif;
  font-size: 15px;
}
.__menu-item {
  /* サイドバーの行間 */
  padding-top: 0;
  padding-bottom: 0;
  min-height: 1.6rem;
}
.text-base, .prose {
  /* 自分のメッセージとシステム回答のフォントと行間 */
  font-size: .9rem;
  line-height: 1.25rem;
}

(参考) 開発メモ

• Stylus で外部サイトに CSS を追加するときブラウザのデベロッパーツールを使用すると思いますが、ChatGPT のページ構造は比較的込み入っているので「サイドバーの下部の薄灰色の影が邪魔だがどこについているのか」となったときは、Elements タブで周辺の要素を一つずつ Hide Element して影が消えるか試していくと、影が付随している要素を特定できます。