Вот быстрое решение, которое я придумал:
- Установите расширение “CustomCSS Injector”, или любое другое аналогичное.
- Вставьте следующий 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;
}
- Если вы используете “CustomCSS Injector”, то выберете параметр “Apply to Domain”.
- Вставьте следующий адрес “
chatgpt.com
” в поле “Whitelist Domains”, или аналогичное если есть.
- Нажмите кнопку “Save” несколько раз.
“CustomCSS Injector” - не требует обновления страницы, поэтому вы сразу же увидите результат. Я добавил “opacity”, чтобы цвета в редакторе не были слишком резкие в светлой теме и не раздражали глаз. Но вы всё ещё можете настроить это на свой вкус.
15.01.2025: Обновил стили, теперь есть оформление для кода в ваших сообщениях, а не только AI. Без подсветки синтаксиса, там лишь текст (без JS с этим ничего не сделать).