Allow changing background color

[Visual-Dawg]

Allow changing background color

[Visual-Dawg]

Some variables which would be nice:

• max-width for the whole thing (with normal, wide and full being preset values)
• Foreground color palette (a Tailwind palette)
• Background color palette (a Tailwind palette)
• Primary color palette (a Tailwind palette)

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

[Visual-Dawg]

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

[Visual-Dawg]

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 :)

[Visual-Dawg]

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

[imfing]

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

[Visual-Dawg]

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

[Visual-Dawg]

Some variables which would be nice:

• max-width for the whole thing (with normal, wide and full being preset values)
• Text color palette (a Tailwind palette)
• Background color palette (a Tailwind palette)
• Primary color palette (a Tailwind palette)

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.

[Visual-Dawg]

Some variables which would be nice:

• max-width for the whole thing (with normal, wide and full being preset values)
• Text color palette (a Tailwind palette)
• Background color palette (a Tailwind palette)
• Primary color palette (a Tailwind palette)

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.

[imfing]

@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

[Visual-Dawg]

@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