2019-10-06-dark-theme.html (4381B) - raw

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