Feature Request: Dark Mode 🕶

[An0m0ly]

I switch between over a dozen applications on my desktop every day. All of them are in dark mode ⬛. Then finally when I want to delight in the delicious offerings of the ytsync gods, BOOM 💥, my eyes suffer the disaster of a white screen ⬜. Please help save pupils 👁 from their demise. ☠

Thank you for your considerations 🤘

[bwt615]

Noir (and I'm sure other browser extensions) do this fine. I wouldn't waste time developing.

[zuble]

Dark Background and Light Text
extension for firefox

[dcronin05]

Noir (and I'm sure other browser extensions) do this fine. I wouldn't waste time developing.

Or rather don't develop in light mode to begin with. Dark should be the default and let people use extensions to make it light if they want.

[meeb]

If and when I ever get around to upgrading the interface to use Bulma it'll automatically gain dark and light theme support. That's a significant amount of work though and it's not especially high on the list.

[tcely]

For anyone who wants it, your browser can use the styles from #254 to apply a darker mode.

Using Stylus and the contributed "Dracula Theme for TubeSync" user style.

[StefanCodes]

@meeb I'm interested in taking on this task and played around with it a bit the last couple evenings.

A few questions:

1. Is migrating to Bulma still your plan?
2. Is the plan to fully remove Materialize and drop in Bulma?
3. Bulma is a bit opinionated about how HTML should be structured and the class names all differ a lot from Materialize, meaning that doing this "the Bulma way" would touch a looooot of the UI code. Any concerns about that?
4. Anything else to be aware of?

[meeb]

@StefanCodes thanks for taking an interest and sorry for taking a while to get back to your question. The plan is still generally to migrate to Bulma, however as this is a significant amount of effort for limited gain (and automatic dark mode) it's not been that high up the list for me to spend time on. The general drive for this was just to get some additional UI features and dark mode combined with Materialize no longer being maintained. It's not critical that a CSS framework has maintenance of course, but at some point there will be some issues with modern browsers and 7-8 year old CSS that causes problems.

I don't particularly have concerns about updating the templates, there's basically no JS in the current front end so it should just be a general slog of updating all the templates and fragments with no risk of esoteric JS stuff exploding.

My only concerns would likely be around the required tooling and dev process for Bulma 1.0 given it's incompatible with django-sass and requires Dart Sass. There's a few experimental Dart Sass Django packages but nothing like the previous stability of the libsass based packages. I wouldn't be too keen on having to bundle 100+mb of Sass nonsense just to get some CSS to display properly.

However, if your plan is to just use the minified bundled Bulma that might work. Any complex styling might be an issue though as that would suddenly devolve into Sass-land.

Edit: for my part, I was waiting for a sane, small and library based Django Dart Sass package first that didn't just wrap sass in a subprocess or other hacks.

[StefanCodes]

Gah, sorry @meeb - apparently my notifications are turned off for this repo!

I have a branch that's working quite well. I'll spend a little more time on polish and post a draft PR and see if any contributors can give it a quick sniff test!

[meeb]

Thanks! As this is likely to be a massive change feel free to just link your branch for now and I'll take a peek. I imagine the draft PR is going to be massive if you've rewritten every template.

[StefanCodes]

@meeb oh dear, it is rather large 😆

I have a draft PR here with a few inline comments: #1353

Happy to receive any early feedback on approach!