WIP: Update to Bulma theme / add dark mode

[StefanCodes]

Closes #457

What does this do?

Removes the Materialize CSS framework and drops in Bulma.

Bulma has a pretty good design system that lets us unlock dark mode without much additional effort.

Changes

• remove Materialize CSS
• remove SASS
• add Bulma and CSS-based FontAwesome
• (the big change) refactor all views to use Bulma CSS and general layout principles
• adds cookie-based dark mode persistence
• adds dark mode toggle button to main navbar
• defines dark mode CSS tokens derived from light mode Tubesync colors

Additional changes

Took a swing at updating the Sources list page. Happy to revert or move to a different PR:

[StefanCodes]

This is an experiment to see if we can eliminate SASS entirely and rely on pure CSS.

I originally hoped to be able to rely almost entirely on the Bulma styles so TubeSync could have minimal CSS, but this file is still larger than I'd like to really make this pitch.

My motivation here was to facilitate dark mode. I wasn't able to get theme switching to work when SASS variables were involved, but using CSS variables worked. There are some ways to shim in both (basically just redeclaring CSS vars for colours, and leave the SASS otherwise intact), but it seemed brittle to go that route.

Another option would be to let the TubeSync styling change a lot more to fit in with the Bulma defaults. I played with this a little bit and generally just didn't like what it looked like.

I'd love some opinions on this one.

[StefanCodes]

CDN Bulma. Maybe we should use a local copy?

[tcely]

I absolutely prefer a local copy.

[meeb]

Local would be essential.

[StefanCodes]

Done. I pulled Bulma and a CSS-based FontAwesome to a local vendor directory in ce182dd?w=1 and removed the previous SASS-based FA.

[StefanCodes]

This is the first of a few JS blocks - I think this is the first script in TubeSync.

I usually prefer implementing the script in TypeScript, but that introduces a bunch of extra build changes. Holding off until there's some consensus on what this should look like.

This script runs on page load to check what the stored theme is. This lives up here to prevent a flash of light mode styles before dark mode is applied.

[meeb]

Yeah I was a little militant and refused to use any JS at all for tubesync. I'm not opposed to some copy/paste hooks to make Bulma behave though.

[StefanCodes]

I don't think a dark mode button needs to sacrifice that design decision! I pulled all the JS and replaced the dark mode toggle with a back end version that sets a cookie instead (2c3cd20?w=1).

That also resolves a fouc issue that the JS solution introduced! 🥂

[StefanCodes]

There are some layout changes to the source page that's still not polished (happy to revert this).

There's 2 things I was playing with:

1. Allow for more wrapping so the page isn't so tall
2. Move the media name variables into a tooltip (instead of a long region at the bottom of the page)

[tcely]

I really dislike the tooltip because it makes copy/paste much more difficult.

[StefanCodes]

Reverted all the nonessential changes to the source add/edit pages. The move to Bulma is already more than enough for one PR.

[StefanCodes]

@StefanCodes Heads up. There's a conflict that needs to be resolved.

Thanks! I merged them in.