- Notifications
You must be signed in to change notification settings - Fork408
Make code blocks more readable#2285
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:main
Are you sure you want to change the base?
Make code blocks more readable#2285
Uh oh!
There was an error while loading.Please reload this page.
Conversation
BD103 commentedOct 19, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
alice-i-cecile commentedOct 20, 2025
@cart do you want to bikeshed this before I merge? I think that this is a clear improvement personally, especially in light mode. |
cart commentedOct 20, 2025
I like the light mode changes, but I object to how dark the dark mode background is. Significant vibe shift, and imo stands out too much from the other colors in the scheme. Feel free to merge the light mode changes as-is. But I'd block on the current dark mode colors. I'd like something closer to the current color scheme for dark mode. Ping me again if theres another iteration (or create a new pr for the dark mode proposal). |
cart commentedOct 20, 2025
Actually I object to the light mode changes too. Its trading the default text contrast for the code contrast, which feels wrong. |
viridia commentedOct 21, 2025
The problem is that without this change, there's just not enough contrast. The inline code sections don't stand out against the page background, they are nearly invisible. And you can't make them lighter, since then you would have a hard time reading the text, unless you plan to lighten the text too. |
TrialDragon commentedOct 22, 2025
@cart, how does this look? |
cart commentedOct 24, 2025
This was actually the point. The difference between a "code section" and a "text section" isn't so important that it needs to yell "I AM A CODE SECTION". There is enough of a distinction to indicate that something is different, while still occupying roughly the same amount of mental space (and color scheme) as the background. |
cart commentedOct 24, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
@TrialDragon the new changes in dark mode still feel too "loud" to me / go against the idea in my previous message. |
viridia commentedOct 25, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
I'm not sure what you are advocating here. Are you saying that things are fine as is, and we don't need to change anything? Look at the screenshot I posted in#2175 - the distinction between code and text is so subtle as to be nearly invisible, even to someone with reasonably good eyesight. This complaint is mainly about inline code sections, not block code sections. The block sections are large enough that the distinction, even though subtle, can be seen relatively easily. But the inline code sections, which use the same color scheme, are really hard to see. If I turn my head and look for a moment at a bright light or window, I can't make them out at all until I give my eyes time to adjust. |
cart commentedOct 28, 2025
I do agree that inline code blocks could use a legibility boost. I'd like to explore solutions that don't throw out the current "character" of the larger code blocks. |
TrialDragon commentedOct 29, 2025
So try to split up the color definitions so that larger code blocks have the old / current color and inline code blocks have a newer more contrasting color? |
cart commentedOct 29, 2025
Definitely one path worth exploring. Some other potential paths:
For future comparison images, compare against |
viridia commentedOct 29, 2025
Please don't do this - there's already too much padding in inline code blocks, look at any code followed by punctuation, it looks weird and disconcerting. |
cart commentedOct 29, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
I do agree that there isn't really much room to grow, |








Uh oh!
There was an error while loading.Please reload this page.
Why
Folks found that the inline code blocks looked weird and lacked contrast making them hard or annoying to read.
What
Fixes#2175
Uses darker colors for darkmode code block background and lighter on light mode (also made light mode background darker to let the contrast show through; this probably needs more work in a proper lightmode redesign PR). Also decreases the empty space next in the blocks so that it doesn't look like there is a space character when their isn't, especially when there is punctuation next to a code block. Also lowered the border radius and made it relative so that it isn't cutting into the letters in an ugly way.
How
Changed color variables (and linked the two separate code background colors that were the same), changed paddings and margins of content lists, and changed the global border radius variable.
Try
1.opt Add my repository for the site if you haven't before:
git remote add trialdragon git@github.com:TrialDragon/bevy-website.gitgit fetch trialdragongit switch trialdragon/2175_improve_readability_of_code_blockszola serve --open4.opt If you need to install Zola, seehttps://www.getzola.org/documentation/getting-started/installation/