Today, ChatGPT code window now a different color (and its not as good) !?

[IansChatGPT]

Up until now when I ask ChatGPT to write some code for me, it does so in a black window with light colored text.
I’m fine with this, the contrast is nice and easy to read.

Just today however, the code window (C++) is now white/grey with darker text, which I like a lot less.
There doesn’t seem to be a place to change this.

My theme is System. Changing it to Dark does mean a dark code window but then I lose all the nice contrast.

Anyone know of a setting or some way I can change this back to what it was?

(o1-preview)

[blogbyns]

i also have this new color, i want to set previous theme, the dark code block was much better…

[Gigadad]

Same here. Been changed for a couple of days.
Dark Grey on Black - Can’t read it!!

[aimcorp]

Why something that is working nice and easy is changed, just because a programmer wants to do it???

We need back the black color on code.

Is easy to cancel subcription and go to Gemini.

[amslps]

Yes, We need back the black color on code!

[OmikronWeapon]

second this wholeheartedly.
isn’t the default just about black for codeblocks? Why do people mess with stuff that nobody complained about. Just to have it different? Someone first thought about it, and decided it was a good idea to have it black, and then (someone else) chose to take away the consciously chosen contrast…
if you’re going to make an effort to change it, at least make it customisable then.

[Codestradamus]

Ditto. Found the legibility better with the dark theme. The theme options should be a simple setting in the user account.

[graveljaw]

Yes. PUT IT BACK!
Developers, if you’re going to change something that NO ONE asked for, then at least make it an option.

Bad choice changing the color. Revert your changes ASAP please.

[KonstantinEfimenko]

Вот быстрое решение, которое я придумал:

1. Установите расширение “CustomCSS Injector”, или любое другое аналогичное.
2. Вставьте следующий CSS код соответсвующее в поле, например “Edit Custom CSS” как в случае с расширением выше:

div.group\/conversation-turn:not(.agent-turn) pre.overflow-x-auto::before {
  display: inline-flex;
  align-items: center;
  justify-content: start;
  height: 2.25rem;
  padding: 0 1rem 0 1rem;
  border-radius: .375rem .375rem 0 0;
  content: "text";
  color: #b4b4b4;
  font-family: ui-sans-serif,-apple-system,system-ui,Segoe UI,Helvetica,Apple Color Emoji,Arial,sans-serif,Segoe UI Emoji,Segoe UI Symbol;
  font-size: .75rem;
  line-height: 1rem;
  user-select: none;
}
div.group\/conversation-turn:not(.agent-turn) pre.overflow-x-auto {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e3e3e3;
  border-radius: .375rem .375rem 0 0;
  color: #ececec;
  opacity: 0.990;
  background: linear-gradient(to bottom,
                              #2f2f2f 0%,
                              #2f2f2f 2.25rem,
                              #0d0d0d 2.25rem,
                              #0d0d0d 100%); /*#0b0b0b*/
  scrollbar-color: #424242 transparent;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.text-token-text-secondary.bg-token-sidebar-surface-primary {
	color: #b4b4b4;
	background: #2f2f2f;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 {
  color: #ececec;
  background: #0d0d0d; /*#0b0b0b*/
  opacity: 0.990;
  scrollbar-color: #424242 transparent;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 code span {
  font-style: normal;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 code.hljs, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-selector-tag, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 code[class*="language-"], div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 pre[class*="language-"] {
	color: #fff;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-meta {
  color: #fff9;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-attr, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-number, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-selector-attr, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-selector-class, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-selector-pseudo, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-template-variable, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-type, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-variable {
	color: #df3079;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-doctag, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-formula, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-keyword, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-literal {
	color: #2e95d3;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-bullet, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-link, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-selector-id, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-symbol, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-title {
	color: #f22c3d;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-addition, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-attribute, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-meta-string, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-regexp, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-string {
	color: #00a67d;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-built_in, div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-class .hljs-title {
  color: #e9950c;
}
div.group\/conversation-turn.agent-turn pre.\!overflow-visible div.overflow-y-auto.p-4 .hljs-comment {
	color: #ffffff80;
}

3. Если вы используете “CustomCSS Injector”, то выберете параметр “Apply to Domain”.
4. Вставьте следующий адрес “chatgpt.com” в поле “Whitelist Domains”, или аналогичное если есть.
5. Нажмите кнопку “Save” несколько раз.

“CustomCSS Injector” - не требует обновления страницы, поэтому вы сразу же увидите результат. Я добавил “opacity”, чтобы цвета в редакторе не были слишком резкие в светлой теме и не раздражали глаз. Но вы всё ещё можете настроить это на свой вкус.

15.01.2025: Обновил стили, теперь есть оформление для кода в ваших сообщениях, а не только AI. Без подсветки синтаксиса, там лишь текст (без JS с этим ничего не сделать).