search

dsrkafuu / hugo-theme-fuji

A minimal Hugo theme with nice theme color. | 一个主题色极简 Hugo 主题。
https://github.dsrkafuu.net/hugo-theme-fuji/
Apache License 2.0
368 stars 98 forks source link

Customize Code Highlight Colors #39

Closed rrtjr closed 4 years ago

rrtjr commented 4 years ago

Hello again,

Would it be fine to ask if there are options on how we can override the colors for the code syntax highlights? Again thanks for such a great theme!

dsrkafuu commented 4 years ago

The theme uses the Prism.js language auto-loader as syntax highlighter. Prism provides several themes with background colors in code blocks.

To make the theme compatible with both light and dark mode, I removed the integrated background color and adjusted some color definitions in https://github.com/amzrk2/hugo-theme-fuji/blob/master/assets/scss/_fuji-theme/_style.scss#L132-L204

Since the main css is compiled from scss, you can copy the file you want to change from the theme folder to cover these files. For example you can use [SITEROOT]/assets/scss/_fuji-theme/_style.scss to cover the [SITEROOT]/themes/fuji/assets/scss/_fuji-theme/_style.scss then use Hugo Pipes to compile these files: https://github.com/amzrk2/hugo-theme-fuji#-advanced-configuration.

Or just fork the project, change any code you want, then npm run serve/build just like you would build your own theme.

rrtjr commented 4 years ago

Again thanks for the detailed info. You've been very helpful.