Adding themes

Initally I modified the Jekyll minima theme so that this site will have a dark theme. However, I thought it would be nice to add a toggle button so that if someone wants a lighter theme, they can choose it.

So, how does one go about doing that? It took me a day to figure it out. So, there are these CSS files (and related SASS files) that tell your browser how the page should look. To change the colour of some element, all I need to do is to modify appropriate fields in these files.

Next, I need to add a button of some sort to actually change the themes. This is handled by a JavaScript script. So, when you click the theme at the footer of this or any other page on this website, it calls a function. Now, the overall body of a page is marked to have a theme by default. The function so called toggles this marking.

Now, web browsers are clever. So they look at the body of the page and see that it is marked to have dark-theme say, and then they look at the css files to see if there are colour modifiers involved. In the css files, the browsers understand that the body should have such and such background colours and text colours.

However, there are other things to keep in mind. For example, tables in html are drawn on top of the background, so they do not inherit the background colour. If there was a single theme, then I could have just hard-coded the colour to be some specific thing (even unrelated to the background). However, I wanted the tables (and other elements on the webpage) to reflect the change in theme. Fortunately, others have figured out an answer to this in something called inherit in the css. So, I set tables and other element to inherit the background and text colours from the parent element (so, for example, tables are seen as children of the body element, and they inherit the colours from the body element).

It wasn't until much later that I realized that all it did was to make the background transparent, so that the inherited colour comes through. If you are on mobile, you might see three lines at the top of the page indicating the menu (it's called the hamburger menu), which also inherited the colours. The thing is that, upon clicking this menu, the dropdown menu will cover whatever text was directly beneath it.

With inherit, the background was transparent, so this lead to overlapping of the two texts making everything an unreadable mess. I tried various changes to the css files (this was before I realized that inherit set things to be transparent) before giving up and adding a funcitonality to the script that toggles colour. You see, css doesn't work with abstract concepts such as "the same colour as the background", you need to tell it the exact colour or make it transparent with inherit (I beleive there are other properties).

Coming to the script, it first stores, on your browser, your theme preference. Then as your browser loads the content, it sets the colours of the elements by looking at the theme preference stored on your device. This theme preference stored in localStorage is cleared whenever you clear browser cookies etc. And that's about it. At the end of the day, I quite like how it turned out.