My eyesight is poor and the ChatGPT bot does not present code examples (for programming or server setup queries) in a format that I can read. I need these examples typed out in black text on white background. How do I change these outputs to suit my disability?
Use a userscript or a CSS editing browser extension to change it to your liking.
Personally, I can recommend StyleBot as it is in active development and is open source,
Here is the CSS for the a11y-light theme for highlight.js which is the library OpenAI uses for code highlighting on https://chatgpt.com.
I’ve added the font-size:large instruction since you said you needed this for eyesight reasons.
/*!
Theme: a11y-light
Author: @ericwbailey
Maintainer: @ericwbailey
Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
*/
.hljs {
background: #fefefe;
color: #545454;
font-size:large
}
/* Comment */
.hljs-comment,
.hljs-quote {
color: #696969;
}
/* Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: #d91e18;
}
/* Orange */
.hljs-number,
.hljs-built_in,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
color: #aa5d00;
}
/* Yellow */
.hljs-attribute {
color: #aa5d00;
}
/* Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #008000;
}
/* Blue */
.hljs-title,
.hljs-section {
color: #007faa;
}
/* Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #7928a1;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
@media screen and (-ms-high-contrast: active) {
.hljs-addition,
.hljs-attribute,
.hljs-built_in,
.hljs-bullet,
.hljs-comment,
.hljs-link,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-params,
.hljs-string,
.hljs-symbol,
.hljs-type,
.hljs-quote {
color: highlight;
}
.hljs-keyword,
.hljs-selector-tag {
font-weight: bold;
}
}
All you need to do is install the extension, go to https://chatgpt.com, open StyleBot by clicking on the extension icon, and paste in the above stylesheet to change the look of the code blocks in ChatGPT.
If you want to explore what other styles look like you can view them on the highlight.js demo page,
The CSS code for (many but not all of) the styles can be found at the highlight.js GitHub repository,
I hope this helps make ChatGPT more accessible for you!
Tried Stylebot but a) that style sheet did not work and b) it slowed my browser down too much. Now removed. Will go on looking for a better and efficient solution.
It works and doesn’t slow anything down.
Good luck though!
¯\_(ツ)_/¯