ChatGPT に CSS を追加するだけ

(2025/12/22) CSS を最新版に更新しました。

ChatGPT に CSS を追加するだけです。独自 CSS を追加できるブラウザ拡張機能 (Stylus など) で追加する必要があります。以下のような見た目になります。

CSS

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

/*----- 色の変更 -----*/
.\@container\/main {
  background-color: #fdfcf5;  /* メイン画面背景色 */
}
.light {
  --text-primary: #564c3e;  /* 文字色 */
  --theme-submit-btn-bg: #564c3e;  /* 入力フォームの音声モードボタン背景色 */
  --bg-elevated-secondary: #b7e6e5;  /* サイドバー背景色 */
  --main-surface-primary: #96ccde;  /* ヘッダ背景色 */
  --bg-primary: #f0f0f0;  /* 入力フォーム及びメイン画面下部背景色 */
  --sidebar-surface-primary: #f0f0f0; /* コードブロック背景色 */
}
.\@w-xl\/main\:bg-transparent {
  /* ウィンドウ幅に関わらずヘッダ色を --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;
}

/*----- フォント・フォントサイズ・行間の変更 -----*/
:host, html {
  /* 基準のフォント・フォントサイズ */
  font-family: 'IBM Plex Sans JP', sans-serif;
  font-size: 15px;
}
.__menu-item {
  /* サイドバーの行間 */
  padding-top: 0;
  padding-bottom: 0;
  min-height: 1.6rem;
}
.pb-\[calc\(var\(--sidebar-section-margin-top\)-var\(--sidebar-section-first-margin-top\)\)\] {
  /* サイドバーのスクロール可能部の上部がやや隠れるため余白追加 */
  padding-top: 0.5rem;
}
.text-base, .prose {
  /* 自分のメッセージとシステム回答のフォントと行間 */
  font-size: .9rem;
  line-height: 1.25rem;
}

/*----- その他の変更 -----*/
.\@w-sm\/main\:\[scrollbar-gutter\:stable_both-edges\]{
  /* スクロールバーガターが両サイドに出るのを規定値に直す */
  scrollbar-gutter: auto;
}