The problem with using variables with Bulma is that it uses SASS functions that given a color, output a different one (and it can't do that if the input color is a variable) so it doesn't compile. I tried to change the affected functions with similar ones supported in CSS, but the result wasn't what I wanted, and it changed a lot of things related to Bulma. After some thought, I decided to refrain from using a framework and just create a tailored stylesheet for my website. That would allow me to abandon the unCSS tool—which was pretty inconvenient to use—as well as having a better understanding of my CSS file.
Looking around for simple themes to base my new stylesheet in, I found a couple that, combined, could result in a similar website than the one I had. I based my theme on the Hugo Paper theme (you can see that the cards look very similar) and I added a header (inspired by the Hugo Grapes theme) and a footer. I changed how some elements appeared (such as the tables), I added some more features that I found interesting and I themed it with the colors I wanted. I also used my old site to inspire the new features (especially the header and footer), so it might resemble a site using Bulma, although it is not.
The process took a lot of time, since learning how everything worked and completely redoing the stylesheet was very time-consuming, however, the result was worth the time. Finally, you can enjoy a dark theme that toggles instantly, and it is now so much easier for me to redesign certain parts of the website, as I know more CSS and have a better understanding of my stylesheet.