search

StefMa / hugo-fresh

Hugo Fresh Theme
https://hugo-fresh.vercel.app
MIT License
633 stars 371 forks source link

Bulma V 1.0, Dart Sass and Dark mode #211

Open domw95 opened 4 months ago

domw95 commented 4 months ago

Thanks so much for creating this theme, I've been developing a site and its looking great.

I don't know if anyone has looked into updating to Bulma V1.0, but I have had a try myself.

The main issue is that its based on Dart Sass and uses syntax such has @use which isn't supported in LibSass that ships with Hugo (and is deprecated). Hugo can use Dart Sass, as shown in the docs. Basically you have to install the binary, and set transpiler to dartsass in the CSS options. This commit shows the changes.

One of the benefits of this is that it gives you dark mode (issue #156 ), although currently its a bit broken due to the way the colours are configured in this theme.

It is also quite simple to modify Bulma. The sass variables can be overridden by importing the module like this:

@use "../../bulma/sass" as * with ($primary: #4FC1EA);

And then $primary can be used as a variable in the rest of the sass files (or not if its no longer required because its the default for e.g a button)

I haven't quite figured out how this would play with the rest of the colours in the theme and whether it can work for automatic dark mode. If I managed to get it all working, is this something you would be interested in changing?

StefMa commented 4 months ago

Hey @domw95 ,

Thank you for looking into this! I am very interested in all of the stuff yiu mentioned. Replacing a deprecated sass engine, upgrade to Bulma 1.0, and dark mode!

Maybe we can make this changes incremental step by step?

Maybe a PR for each change? Would this make sense? Would this work?

I would also say that we ignore dark mode for now. Let's focus on Bulma and the Dart Sass for now. Even if there is kind of primitive support for dark mode, let's ignore those. As long as users won't have a bad user experience it would be fine I guess.

passw0rd123 commented 1 month ago

Bulma has also a prebuild version using css variables to configure such things as colors used in this theme which are supported by all modern browsers.

If there is no special usecase for sass in this theme, there should be no need to build it ourselfes. This would reduce the dependencies and maybe also the need of the hugo extended version.

StefMa commented 1 month ago

Hey @passw0rd123 Thanks for the information. I also only inherit this theme 🙃 I don't know if saas is required or not. Maybe you can help to find out? Actually using the normal version of Hugo and removing the dependency sounds pretty great!