Skip to content

Conversation

@stasadev
Copy link
Member

@stasadev stasadev commented Feb 6, 2026

The Issue

I don't like that we have the same Nord color scheme for code blocks in both light/dark modes.
Comments in the Nord theme have poor contrast.

How This PR Solves The Issue

Uses github-light-high-contrast for light and github-dark-high-contrast for dark, see https://shiki.style/themes

Manual Testing Instructions

Before:

https://ddev.com/get-started/ (Linux)

image image

After:

https://pr-538.ddev-com-fork-previews.pages.dev/get-started/ (Linux)

image image

Before:

https://ddev.com/get-started/ (Windows)

image image

After:

https://pr-538.ddev-com-fork-previews.pages.dev/get-started/ (Windows)

image image

Before:

https://ddev.com/blog/podman-and-docker-rootless/#installing-podman

image image

After (note that comments have better visibility):

https://pr-538.ddev-com-fork-previews.pages.dev/blog/podman-and-docker-rootless/#installing-podman

image image

Automated Testing Overview

Related Issue Link(s)

Release/Deployment Notes

@github-actions
Copy link

github-actions bot commented Feb 6, 2026

🌐 Fork Preview for PR #538

https://pr-538.ddev-com-fork-previews.pages.dev

This preview updates automatically when you push changes to your fork.

@rfay
Copy link
Member

rfay commented Feb 6, 2026

There's no stopping you!

Copy link
Member

@rfay rfay left a comment

Choose a reason for hiding this comment

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

If you like it I like it!

Copy link
Contributor

@tyler36 tyler36 left a comment

Choose a reason for hiding this comment

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

Looks fine to me, although I'm a life-long dark themed user.

I did note that Google Chrome's Lighthouse complained a lot about the codeblocks in light-mode.

Background and foreground colors do not have a sufficient contrast ratio.

@stasadev
Copy link
Member Author

stasadev commented Feb 9, 2026

Thanks @tyler36 !

I switched to github-light-high-contrast and github-dark-high-contrast.

@stasadev stasadev changed the title feat(style): use catppuccin-latte and one-dark-pro for code blocks feat(style): use high-contrast themes for code blocks Feb 9, 2026
@tyler36
Copy link
Contributor

tyler36 commented Feb 10, 2026

Thank you @stasadev .

Lighthouse seems happier with github-light-high-contrast.

@stasadev stasadev merged commit dbb2e26 into ddev:main Feb 10, 2026
4 checks passed
@stasadev stasadev deleted the 20260206_stasadev_code_color branch February 10, 2026 08:48
@github-actions
Copy link

PR closed. The Cloudflare Pages preview is no longer updated.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants