Allow dark/light theme switch on user browser

[SijieFu]

1. New fearture: dark/light theme toggle on the webpage with user preference. Solves toggle between dark and light mode #911.
   • html[data-theme="dark"] selector to overwrite default light theme variables.
   • localStorage to store user preference of the theme. This is for theme consistency. User preference overwrites the default theme at compile.
2. Fix: Navigation text overflow and wide empty spaces on mobile screens (or width-limited screens).
   • Deprecated $masthead-height to position the sidebar and the main body below the navbar. When the site title is long, this causes overflow to the fixed height. $masthead-height definition is still kept as a backup.
   • The navbar height is set to fit-content and the padding-top for the sidebar and the main body is updated together with updateNav() function.
   • Minor updates to related padding/margin to fix large empty spaces.

[rjzupkoii]

Thanks for the pull request and hard work to get this running!

[Gabri110]

First of all, I want to say that I love this feature! But I have a doubt: is this PR compatible with having different themes?

I have been trying to create a new file in _sass/theme/ and importing it in assets/css/main.scss, but I can't make it work. The only workaround that I have found is to directly modify the colours in the _default.scss and _dark.scss files directly. Do you know if there is another way around this?

[rjzupkoii]

@Gabri110 This might be better as a thread over on discussions but I think it depends if you have the updated version with all of the changes to _sass or not. That was laid out with the assumption that there can be more than just two themes (i.e., light and dark) but I just didn't implement all of the logic to select between them since we only have the two themes so far.

[Gabri110]

@rjzupkoii I am working from the last release. I have opened the discussion #3235 ;)