2019-10-06-dark-theme.md (3810B) - raw


      1 <!-- title: Creating a dark theme -->
      2 <!-- slug: dark-theme -->
      3 <!-- categories: Personal domain, Projects -->
      4 <!-- date: 2019-10-06T00:00:00Z -->
      5 
      6 The first contact I had with HTML and CSS was about two years ago, when I
      7 created my first website along with a friend who already had some experience
      8 with them, as well as with JavaScript. We used a premade theme (based on
      9 [Bootstrap][bs]), so I didn't really learn much CSS, but I started understanding
     10 what was HTML and how it worked. One year later, I wanted to design my own
     11 website and I decided to build my own theme. I looked up many CSS frameworks and
     12 ended up using [Bulma][b] because of how simple it is (I didn't need many
     13 features for a personal website). It worked pretty well and I had a first
     14 contact with CSS and SASS, but when I finally finished my page and released it
     15 under my domain, I soon wanted another feature: the possibility to change to a
     16 dark theme.
     17 
     18 I started looking for dark colors that I liked and I came up with a nice design,
     19 now I needed to combine the two designs with a simple toggle JavaScript
     20 function. The way I implemented it, the function switched the default CSS file
     21 for the one defining the dark theme. However, if you try to change your theme by
     22 changing the stylesheet, you will realize that it takes a split of a second for
     23 the page to re-render, especially the first time you toggle the theme since it
     24 has to download the whole file before rendering the page. It can sound like a
     25 minor problem, but it was notable, so I tried to shorten the time needed to
     26 toggle the theme. I used a tool (unCSS) that removes unused CSS from a
     27 stylesheet, which made the file so much smaller but, although the download time
     28 was reduced, the page still took too long to re-render. Looking around online I
     29 concluded that my best option was to make only one file using CSS variables, and
     30 just change the value by changing HTML elements' classes with the JavaScript
     31 function.
     32 
     33 The problem with using variables with Bulma is that it uses SASS functions that
     34 given a color, output a different one (and it can't do that if the input color
     35 is a variable) so it doesn't *compile*. I tried to change the affected functions
     36 with similar ones supported in CSS, but the result wasn't what I wanted, and it
     37 changed a lot of things related to Bulma. After some thought, I decided to
     38 refrain from using a framework and just create a tailored stylesheet for my
     39 website. That would allow me to abandon the unCSS tool—which was pretty
     40 inconvenient to use—as well as having a better understanding of my CSS file.
     41 
     42 Looking around for simple themes to base my new stylesheet in, I found a couple
     43 that, combined, could result in a similar website than the one I had. I based my
     44 theme on the [Hugo Paper][hp] theme (you can see that the cards look very
     45 similar) and I added a header (inspired by the [Hugo Grapes][hg] theme) and a
     46 footer. I changed how some elements appeared (such as the tables), I added some
     47 more features that I found interesting and I themed it with the colors I wanted.
     48 I also used my old site to inspire the new features (especially the header and
     49 footer), so it might resemble a site using Bulma, although it is not.
     50 
     51 The process took a lot of time, since learning how everything worked and
     52 completely redoing the stylesheet was very time-consuming, however, the result
     53 was worth the time. Finally, you can enjoy a dark theme that toggles instantly,
     54 and it is now so much easier for me to redesign certain parts of the website, as
     55 I know more CSS and have a better understanding of my stylesheet.
     56 
     57 
     58 [bs]: <https://getbootstrap.com/> "Bootstrap"
     59 [b]: <https://bulma.io/> "Bulma"
     60 [hp]: <https://github.com/nanxiaobei/hugo-paper/> "Hugo Paper — GitHub"
     61 [hg]: <https://github.com/shankar/hugo-grapes/> "Hugo Grapes — GitHub"