Author: oscarbenedito <email@example.com>
Date: Sun, 6 Oct 2019 17:52:00 +0200
New entry: dark-theme
1 file changed, 15 insertions(+), 0 deletions(-)
diff --git a/content/blog/2019-10-06-dark-theme.md b/content/blog/2019-10-06-dark-theme.md
@@ -0,0 +1,15 @@
+title: "Creating a dark theme"
+tags: ["CSS", "Website"]
+#draft: true # Remember to state the date in file name before commiting!
+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](https://github.com/nanxiaobei/hugo-paper/) theme (you can see that the cards look very similar) and I added a header (inspired by the [Hugo Grapes](https://github.com/shankar/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.