fuwari icon indicating copy to clipboard operation
fuwari copied to clipboard

fix: add light theme codeblocks

Open rushiiMachine opened this issue 4 months ago • 3 comments

Type of change

  • [ ] Bug fix (a non-breaking change that fixes an issue)
  • [ ] New feature (a non-breaking change that adds functionality)
  • [x] Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • [ ] Other (please describe):

Checklist

  • [x] I have read the CONTRIBUTING document.
  • [x] I have checked to ensure that this Pull Request is not for personal changes.
  • [x] I have performed a self-review of my own code.
  • [x] My changes generate no new warnings.

Related Issue

N/A

Changes

Adds support for light-theme codeblocks.

  1. Adds light theme variants for multiple codeblock color vars
  2. Changes ExpressiveCodeConfig to allow configuring one light and one dark theme, with the original typings
  3. Changes the global data-theme for expressive-code based on the site theme and configured ExpressiveCodeConfig

How To Test

Live demo at: https://blog.rushii.dev/posts/connecting-to-raspi-via-ethernet/#obtaining-a-connection

Screenshots (if applicable)

image image

Additional Notes

  • I'm not sure if you want the copy button background color to match the language badge color, I just used btn-regular

rushiiMachine avatar Aug 12 '25 00:08 rushiiMachine

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Project Deployment Preview Comments Updated (UTC)
fuwari-yags Ready Preview 💬 Add feedback Aug 12, 2025 4:03am

vercel[bot] avatar Aug 12 '25 00:08 vercel[bot]

Actually I'm marking this draft for now since I'm getting wildly inconsistent results between builds

rushiiMachine avatar Aug 12 '25 04:08 rushiiMachine

Whether this change will be merged likely depends on saicaca's judgment. I left this comment when I previously created a related PR.

https://github.com/saicaca/fuwari/pull/476#issuecomment-2929012908

> I had a quick question about something I noticed: the original implementation accounted for both light and dark themes by allowing two theme options — did that cause any issues?

It didn't cause issues. Making code blocks always dark is partly just my personal design preference (as is the current implementation). Additionally, since I need to make modifications to Expressive Code's styling, supporting only a dark theme simplifies the work that I can release this more quickly.

I might add an option later to enable light code blocks in light mode.

That said, there's no need to close the PR. LGTM

L4Ph avatar Aug 20 '25 12:08 L4Ph