Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

Open
TrialDragon wants to merge2 commits intobevyengine:main
base:main
Choose a base branch
Loading
fromTrialDragon:trialdragon/2175_improve_readability_of_code_blocks

Conversation

@TrialDragon
Copy link
Member

@TrialDragonTrialDragon commentedOct 7, 2025
edited
Loading

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. Switch into your bevy website directory
    1.opt Add my repository for the site if you haven't before:git remote add trialdragon git@github.com:TrialDragon/bevy-website.git
  2. Fetch my repository for the site:git fetch trialdragon
  3. Switch into the branch for this PR:git switch trialdragon/2175_improve_readability_of_code_blocks
  4. Run the site:zola serve --open
    4.opt If you need to install Zola, seehttps://www.getzola.org/documentation/getting-started/installation/
  5. Explore the site, use it, see how you feel about the styling changes.

@BD103
Copy link
Member

Here's some before and after screenshots, for other reviewers:

imageimage

Copy link
Member

@BD103BD103 left a comment
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Overall I like the changes!

As a side note--the color for links doesn't seem to have enough contrast with the background when in light mode:

image

image

I'm going to open a follow-up issue for that.

@BD103BD103 added S-Ready-For-Final-ReviewReady for a maintainer to consider for merging and removed S-Needs-Review labelsOct 19, 2025
@alice-i-cecilealice-i-cecile added this pull request to themerge queueOct 20, 2025
@alice-i-cecilealice-i-cecile removed this pull request from themerge queue due to a manual requestOct 20, 2025
@alice-i-cecile
Copy link
Member

@cart do you want to bikeshed this before I merge? I think that this is a clear improvement personally, especially in light mode.

@cart
Copy link
Member

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
Copy link
Member

Actually I object to the light mode changes too. Its trading the default text contrast for the code contrast, which feels wrong.

@alice-i-cecilealice-i-cecile added S-Waiting-On-Author and removed S-Ready-For-Final-ReviewReady for a maintainer to consider for merging labelsOct 20, 2025
@viridia
Copy link
Contributor

I object to how dark the dark mode background is

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
Copy link
MemberAuthor

@cart, how does this look?

Light Mode
BeforeScreenshot From 2025-10-21 17-28-02
AfterScreenshot From 2025-10-21 17-28-09
Dark Mode
BeforeScreenshot From 2025-10-21 17-45-25
AfterScreenshot From 2025-10-21 17-45-32

@BD103BD103 added S-Admin-RequiredA Bevy Foundation admin is needed for this work. and removed S-Waiting-On-Author labelsOct 22, 2025
@cart
Copy link
Member

The inline code sections don't stand out against the page background, they are nearly invisible

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
Copy link
Member

cart commentedOct 24, 2025
edited
Loading

@TrialDragon the new changes in dark mode still feel too "loud" to me / go against the idea in my previous message.

@viridia
Copy link
Contributor

viridia commentedOct 25, 2025
edited
Loading

The inline code sections don't stand out against the page background, they are nearly invisible

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.

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
Copy link
Member

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
Copy link
MemberAuthor

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.

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
Copy link
Member

Definitely one path worth exploring. Some other potential paths:

  1. Increase the size of the surrounding block to make it more prominent
  2. Tweak the text color inside of the block slightly to make it pop more
  3. Keep the colors tied together, but justslightly adjust the contrast rather than a more drastic change.

For future comparison images, compare againstmain rather than the current contents of the PR.

TrialDragon reacted with thumbs up emoji

@viridia
Copy link
Contributor

  1. Increase the size of the surrounding block to make it more prominent

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
Copy link
Member

cart commentedOct 29, 2025
edited
Loading

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.

I do agree that there isn't really much room to grow,at least especially in the horizontal direction.

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment

Reviewers

2 more reviewers

@viridiaviridiaviridia approved these changes

@BD103BD103BD103 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

A-Cross-CuttingImpacts multiple parts of the websiteC-WebdevD-StraightforwardS-Admin-RequiredA Bevy Foundation admin is needed for this work.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Inline code blocks: too little contrast, too much padding

5 participants

@TrialDragon@BD103@alice-i-cecile@cart@viridia

[8]ページ先頭

©2009-2025 Movatter.jp