tale-hugo icon indicating copy to clipboard operation
tale-hugo copied to clipboard

Single method to override theme's colors

Open sn0ot opened this issue 4 years ago • 4 comments

Hiya @EmielH, many thanks for porting this theme to hugo and having it well organized!

Is there a single method to override the theme's colors in the tale/assets/tale/*.scss files or do they have to be painfully iterated manually?

I see hugo has mechanisms to override layout rules via Hugo's Lookup order and was wondering if this theme allows for any similar mechanism for colors.

If not, I'll happily implement a way that will, at minimum, let users define a dark and light theme and let them further extend it to any custom color theme.

BTW I don't actually know hugo or frontend development but the way you laid everything out is so easy to follow. This would be a good "first issue" to get familiar if there is no existing way implemented yet.

sn0ot avatar Dec 23 '20 01:12 sn0ot

Hi @sn0ot, thanks for your kind comments!

All colours are defined in _variables.scss (and in _syntax.scss if you plan on showing syntax highlighting for code) so that's the only place that you should need to override them. All other files refer to colours defined in these files.

So if you create a _variables.scss for your own site and redefine the colours over there, Hugo should use those instead of the theme's standard colours. You can copy the file that comes with the theme so you can be sure you're defining all variables.

The theme currently doesn't have a way to define different colour themes through configuration. I'd be happy to accept a PR for this kind of functionality!

EmielH avatar Dec 23 '20 23:12 EmielH

Thank you for the explanation!

I'll give it a shot over holiday :)

sn0ot avatar Dec 24 '20 16:12 sn0ot

Hi @EmielH, I have a question about the _syntax.scss for syntax highlighting. Any changes I make to _syntax.scss do not get reflected in the built site for my code snippets. I followed hugo's syntax highlighting reference and even created another syntax file with hugo gen chromastyles --style=monokai > _syntax.scss and replaces .chroma with .highlight. Any clue what is preventing me from changing the syntax colors?

sn0ot avatar Dec 29 '20 21:12 sn0ot

Apologies for the late reply, I didn't have access to a computer over the holidays. I'll look into your questions and pull request as soon as possible!

EmielH avatar Jan 03 '21 16:01 EmielH