Any good dark mode styles?

I’ve been trying different dark mode scripts for Stylus but so far am not impressed.

I have tried these:
A. MusicBrainz Dark Grey And Orange
B. MusicBrainz dark
C. MusicBrainz Nord Dark

For some reason, all have the top banner sticky to the top (which is OK) but in white as soon as I scroll and with a stupid box shadow. Oh, that is UI Enhancements. Pity classes are changed or added. Another edit: it is not UI Enhancements, it is the Super Mind Control II. No idea why I needed that so disabled it.

A and C have a pink hover on the table rows so you cannot read white text. Brilliant. B has no hover on the table rows, fortunately. The purple text (links) on orange background is a mismatch, though. And B shows the popups (edit relationship etc) in white. Lists have white text on white background. None of these look properly tested, to be honest.

I see the CSS uses some variables but it’s not implemented everywhere. Dialogs have a fixed background color. Is ther work being done on the UI part? Can people help? (I am a C#/PHP backend and HTML/CSS/JS/Svelte frontend developer.)

Are there any others? Is this possible with ViolentMonkey?

I just asked this also on listenbrainz community. I think it is a very basic thing that should be on all websites these days.

Dark mode? - ListenBrainz - MetaBrainz Community Discourse

https://darkreader.org/ is the only option currently I think.

Author of the MusicBrainz Dark userstyle here, I can’t speak for the other authors, but I am using it daily and usually fix regressions as soon as I spot them.
And as you have noticed, some quirks are caused by userscripts which are not necessarily installed by the author of the userstyle.

You can install my companion style for userscripts, the sticky header from SUPER MIND CONTROL is among the things for which it has a fix.

Does this refer to my userstyle? If so, where do you see those?

I can’t reproduce that, they are dark for me (artist credit and relationship dialogs). Recently there was a regression, but it has been fixed since version 2024.4.2, which version do you have installed?

Again, does this refer to my userstyle? If so, where do you see those and what do you mean with “lists”?

In general, please report those things though, otherwise they might stay unnoticed. That’s why I have an issue tracker.

1 Like

You should disable STATIC_MENU in SUPER MIND CONTROL Ⅱ userscript.

This is also something you should disable at the same place.

Thanks for the reply, truly appreciate this. Two examples here:
image
Purple link on orange background and the tooltip has a light background.

If you update it regularly, then it might be a problem with Stylus not knowing it has an update. Is there a way to get updates automatically? I only used the Stylus button and ‘search for styles’, never installed styles any other way.

I’ll definitely use the issue tracker next time, thanks for that!

I just see that “MusicBrainz dark” is not the same as “MusicBrainz Dark”… Maybe rename your style “MusicBrainz Dark Kellnerd”? :slight_smile:

What does that actually do? I cannot find a good description.

That explains a few things :joy:

I only knew of the userstyles which are listed in the wiki, I had no idea there was another “MusicBrainz dark”, this one from 2013.
Now I see where you got it from, it is from Stylus’ integrated search. Mine is currently hosted only on GitHub, maybe I should also upload it in one of the places where Stylus’ search finds it.

I’m not a fan of putting my nickname into the userstyle’s name, but if anyone has a good suggestion for a new name I will take it.

Admittedly I wasn’t very creative here, but I wasn’t sure after which feature to name it because I tried to imagine how MB would look if it had a native dark theme, with as few opinionated decisions as possible.
Almost the whole userstyle only changes colors, basically reversing the brightness scale.

Maybe “MusicBrainz Dark Side” would work, named after the fitting album which is shown in my example screenshot?

1 Like

I created a Stylus theme called “MetaBrainz All Projects Dark.” You might see if it’s any better for your needs.

It has sections for BookBrainz, AcousticBrainz, Picard (the web page, not the app), and the MetaBrainz Blog page. It’s pretty complete for MusicBrainz, but I haven’t kept up with the other sections, so they may be a bit outdated/incomplete.

1 Like

Or Dark Side of the MusicBrainz!
:sunglasses::rainbow::triangular_ruler:

5 Likes

All the options are explained in the settings:

makes the main MB menu always visible (and can be clicked to scroll to top)

Note: It doesn’t work on mobile.

1 Like

Hmm, confusing. For what it’s worth, I’ve now added the other script to the wiki page, with a note that it was last updated in 2013. It wont help with people finding it via other channels, but maybe it will help a little.

Aha, a menu item is under Editing, never saw that, thanks.

Added an issue on github but it was submitted under my work account. I suggested al styles were removed from the scripts to separate functionality with UI so it does not conflict with styles.

1 Like

Thanks, great work! I compared the two. They are quite similar, my eyes prefer the MusicBrainz Dark because of the smaller font.

Good idea, thank you. I’ve dropped the article, though.

The new name of v2024.5.22 is now “Dark Side of MusicBrainz”, updating should work seamlessly as the filename/URL is still the same.

It is now also hosted on UserStyles.world for better discoverability:

3 Likes