-
Notifications
You must be signed in to change notification settings - Fork 281
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 our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor: Improve code highlighting #188
Conversation
…and light themes consistent
…tly selected theme Regression from #169
I added one more commit here which isn't really related, merely to avoid a merge conflict later. I noticed a bug introduced by #169 - the brightness reduction in dark mode will only work if the user explicitly selected the them ( |
Nice approach!
Agreed. And we can delete the related code in Also, I think we should add a "BREAKING CHANGE" note for this, since the way to customize the style of code highlighting has changed. |
…used code BREAKING CHANGE: Highlighting customization now works by overriding CSS variables, no longer by overriding theme-specific files
All done. |
Yep, except that we didn't update the annoying |
Done. |
Thanks! |
* refactor: Do not rely on JavaScript for code highlighting, make dark and light themes consistent * fix: Image brightness reduction in dark mode should work with implicitly selected theme (regression from reuixiy#169) * chore: Rename dark-theme style file into them-switcher and removed unused code * chore: Update resources folder BREAKING CHANGE: Highlighting customization now works by overriding CSS variables, no longer by overriding theme-specific files
This has two goals:
My initial approach was putting highlighting styles directly into the
light-theme
/dark-theme
mixins. This unfortunately increases the CSS file size by 10kb because both of these mixins are used twice.So instead I added the basic styles to
_highlight.css
and merely define the ten color variables in the mixins. This way the CSS file size even decreases slightly.The downside is that changing/overriding styles is no longer merely a matter of running
hugo gen chromastyles
. On the other hand, people can now override specific variables fairly easily.The other downside is that not all styles are usable in this way. I used the dracula style as a template, but simply taking color values from rainbow_dash for the light mode didn't work - this style uses color values that are very close to each other, relying heavily on bold text as distinctive factor. I decided to use manni style instead which is similar but has sufficiently distinctive colors.
Here is what light/dark mode highlighting used to look like in comparison:
Here is what it looks like with this change (only light mode changed):