search

imfing / hextra

🔯 Modern, batteries-included Hugo theme for creating beautiful doc, blog and static websites
https://imfing.github.io/hextra/
MIT License
657 stars 154 forks source link

Allow changing background color #292

Open vdawg-git opened 8 months ago

vdawg-git commented 8 months ago

Feature Description

Currently it is not possible to change the background color consistently without hacking a lot on the custom Css.

Problem/Solution

Using a variable which defines the background color. That is also possible with Tailwind.

Alternatives Considered

Simply changing the background of the body, but some elements have their own background and the colors do not match then.

vdawg-git commented 8 months ago

Overall, I think it would be nice, if the theme uses variables for its colors which fall back to the Tailwind colors, if not defined

vdawg-git commented 8 months ago

I found this Tailwind plugin https://github.com/mertasan/tailwindcss-variables ,which should make this much easier. Turning everything into a variable would be too much work I think, but background and text colors would be nice :)

vdawg-git commented 8 months ago

what would also be cool is if the Tailwind config gets exposed or if it can be overridden somehow

imfing commented 8 months ago

I found this Tailwind plugin mertasan/tailwindcss-variables ,which should make this much easier. Turning everything into a variable would be too much work I think, but background and text colors would be nice :)

that would be very ideal. not sure tailwindcss-variables would work with PostCSS as it's not mentioned in the README afaik.

what would also be cool is if the Tailwind config gets exposed or if it can be overridden somehow

it may be possible to override via a custom postcss config file: https://gohugo.io/hugo-pipes/postcss/

currently the postcss config is defined at: https://github.com/imfing/hextra/blob/main/postcss.config.js

but by overriding the config, users will need to set up many things incl. nodejs, npm, postcss, tailwind css, and proper hugo config (e.g. dev.toml) to trigger rebuild during styles change

will need to carefully think about the use case and how to expose this while keeping a nice dev experience

vdawg-git commented 7 months ago

PostCss is used by default by Tailwind, so plugins work with it by default.

And yes, exposing the config and thus requiring the whole JS techstack would defeat the purpose of using Hugo :D

vdawg-git commented 7 months ago

Some variables which would be nice:

This should cover 99% of all theming things I think

I am not sure about a nice way to let the user provide Tailwind palettes though. The most flexible would be that each variable is one color, like fg-500, bg-950 and primary-300. This with a reference to tools like https://www.tints.dev/purple/A855F7 and https://uicolors.app/create would make it easy to customize and provide those palettes based on one color.

vdawg-git commented 7 months ago

Some variables which would be nice:

This should cover 99% of all theming things I think

I am not sure about a nice way to let the user provide Tailwind palettes though. The most flexible would be that each variable is one color, like fg-500, bg-950 and primary-300. This with a reference to tools like https://www.tints.dev/purple/A855F7 and https://uicolors.app/create would make it easy to customize and provide those palettes based on one color.

vdawg-git commented 7 months ago

Some variables which would be nice:

This should cover 99% of all theming things I think

I am not sure about a nice way to let the user provide Tailwind palettes though. The most flexible would be that each variable is one color, like fg-500, bg-950 and primary-300. This with a reference to tools like https://www.tints.dev/purple/A855F7 and https://uicolors.app/create would make it easy to customize and provide those palettes based on one color.

I could try to get a PR going for this. Never used Hugo, nor do I know Go, but this is just Tailwind, so I can give it a shot :D

imfing commented 7 months ago

@Visual-Dawg Thanks, I think it would be nice to make everything override-able via CSS vars. It would be great if you could try it out and send me a PR.

Side note, there are some pretty exciting things in Tailwind CSS v4 which would make customization much easier

vdawg-git commented 7 months ago

@imfing Will do. I also saw the news about Tailwind v4. Looks really cool I might try it out for the PR, if it works