【CSS】ゲーミングChatGPT

2026年10月14日現在では本記事の CSS は有効ですが、ChatGPT の CSS 構造はよく変わることがあるので、もし変わったら機能しなくなります。

ブラウザ版 ChatGPT を虹色に光らせます。
以下のようになります (色が異なる小さい領域が見えるのは GIF エンコードの問題です)。
お手元のブラウザに CSS を上書きできる拡張機能 (Stylus など) を導入する必要があります。

虹を動かす場合はもちろん、動かさなくても目によくないと思います。
「ちゃっぴーに頼りすぎないように見づらくしたい」という時にどうぞ。

CSS

追加する CSS は以下です。外観がライトであることを前提にしています。
5s のところを小さくすれば虹の動きは速く、大きくすれば虹の動きは遅くなります。
虹を薄くしたい場合は #ffffff88 を #ffffffaa などにして前面の不透明度を上げます。
linear-gradient(#ffffffdd, #ffffff99), のように上側を薄くしてもかわいいです。

body {
  background:
    linear-gradient(#ffffff88, #ffffff88), /* 虹がそのままだと濃いので薄い白をかぶせる */
    linear-gradient(90deg, red, magenta, blue, cyan, lime, yellow, red); /* 虹 */
  background-size: 100% 100%, 200% 100%; /* 虹だけウィンドウ幅の2倍に引き延ばす */
  animation: gaming 5s linear infinite; /* 下記に定義のアクションを 5 秒ずつ繰り返す */
}

@keyframes gaming {
  to {
    background-position: 0 0, 200% 0; /* 虹だけ左側にウィンドウ幅の2倍だけ移動する */
  }
}

:root[data-theme="light"] {
  --app-color-background-surface : transparent;  /* 虹が見えるように背景を透過する */
}

虹を動かさない場合は例えば以下です。

body {
  background:
    linear-gradient(#ffffff88, #ffffff88),
    linear-gradient(90deg, red, magenta, blue, cyan, lime, yellow, red);
}
:root[data-theme="light"] {
  --app-color-background-surface : transparent;
}

おまけ

フォントとフォントサイズも上書きするには、2026年10月14日現在では以下です。

:root, :host, body, html {
  --font-sans: "Kaisei Decol", serif;  /* フォント (システムになければ @import を) */
  font-family: var(--font-sans);
  font-size: 14px;
  --font-ui-size: 14px !important;  /* ユーザ質問 */
  --text-base: 13.5px !important;  /* エージェント回答 */
}
[class^="DilRenderer"] {
  font-family: var(--font-sans);  /* エージェント回答 */
}
.sidebar-navigation:where([data-codex-window-type=browser] .sidebar-navigation) {
  --height-token-nav-row: 24px;  /* サイドバーの行間を狭く */
}