Bulma V 1.0, Dart Sass and Dark mode

[domw95]

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]

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.