Dark Stylus theme for MusicBrainz, other MetaBrainz sites

Beckfield · August 27, 2021, 6:20am

I’ve been working on a dark theme for MB for some time, hoping to cut down the eye strain caused by the stark white standard site. Naturally, it’s not as simple as just changing the overall background color. I had tried the other two dark themes that Stylus has for MusicBrainz, but found too many areas where foreground/background colors were too similar, resulting in hard-to-read text.

The style was developed specifically for MusicBrainz, but when I found that it worked for most MetaBrainz project sites, I put a little more time into those sites as well. Stylus users who want to try it out can find it here:

ruben_nebur · August 27, 2021, 9:34am

This looks great! I will try it out. Thanks for sharing.

Beckfield · December 11, 2021, 12:43am

I’ve discovered an area where this theme needs to be fixed, but I don’t know how. If someone has some expertise with CSS, I’d appreciate any advice.

The situation arises when editing the Tracklist on a release. When an Artist field is empty, or does not have a resolved artist, the field is left in white, while resolved fields are green.

My theme doesn’t differentiate these fields (which I learned after spending 30 minutes wondering why it said I had an error but couldn’t tell which field it was), and I have been unable to determine the CSS selector that will allow me to do so.

If anyone can figure that out and let me know, I would appreciate it.

kellnerd · December 11, 2021, 1:35am

I think I can help you there as I have also written my own dark theme for MusicBrainz (after I had seen your post here), which I have been using and tweaking for a while now. So I am happy to give you something back (for inspiring me to explore the world of userstyles) before I am finally satisfied enough to publish a “finished” version of my own theme soon

I was able to darken all of the text input fields, except for those with special highlighting, using the following selector:

github.com

kellnerd/userstyles/blob/d7555f952a2a0b6beec6133cf87781f551a6c319/musicbrainz-dark.user.css#L266


      
          
          
	/* form elements */
          	input, textarea {
          		border-color: var(--border-accent);;
          	}
          	input[disabled], textarea[disabled] {
          		color: var(--text-weak);
          		border-color: var(--border-dimmed);
          	}
          	/* darken normal inputs, but keep original colors for those with a specific background color */
          	input[type=text]:not(.lookup-performed):not(.success):not(.error):not([style*=background]),
          	input:not([type]):not([style*=background]), textarea:not([style*=background]),
          	input[type=url], input[type=search], input[type=password], input[type=email] {
          		background: var(--background-dimmed);
          		color: var(--text);
          	}
          	/* invert all non-text inputs and buttons */
          	input[type=number], input[type=radio], input[type=checkbox], input[type=button], input[type=submit],
          	select, button, .buttons a {
          		filter: var(--invert-value);
          	}

It also deals with some other special cases but the important part is the input[type=text]:not(.lookup-performed) selector.

Beckfield · December 11, 2021, 3:37am

Thanks for that. That’s at least a couple levels more advanced than my knowledge, so I’m going to have to see if I can figure out how to make that work.

Beckfield · February 21, 2022, 6:04pm

I’m not having any luck making that work. I’m not too worried about it, as everything is at least readable, but I’ll let it rest for a while and maybe try again later.

It’s pretty gratifying to see there are 287 installs of this Stylus theme as of today.

akshaaatt · February 21, 2022, 7:01pm

Thanks for bringing this up. Hopefully, by the end of 2022, all the MetaBrainz websites will support a Light and Dark theme. I am actively working on this and we have figured this stuff out relatively. All it will take now is the time to get them to production

hds · April 6, 2022, 5:56am

Thanks a lot for this! Was hoping that there’d be an official setting by now but am very glad your option exists.

jesus2099 · April 6, 2022, 11:54am

Thanks to the #userstyles tag, you can also have a look at another dark user stylesheet, and even a Dark Reader extension! that could be even simpler, maybe.

Beckfield · July 13, 2022, 9:14pm

Finally had time to sit down and make this work. I found I had a couple other CSS elements that were interfering until I removed !important notations.

I gave an unresolved name a red background, so it alerts the user that an error is present.

In the process, though, I discovered a tooltip with a transparent background, so I’ve got something else to figure out:

Beckfield · July 19, 2022, 3:21pm

Ha! Found it.

RetroPunk · July 31, 2022, 9:33am

Just wanted to say thank you so much for this. Man, my eyes were killing me!

spUdux · October 24, 2022, 3:28pm

Excellent theme, thanks a ton! Just tinkered with Bookbrainz a bit and found “Edit aliases” and “Edit Identifiers” are hiding themselves there in the edition edit page e.g. Edit Harry Potter and the Philosopher’s Stone (Edition)

vs

Hopefully there’s an easy fix to that

Beckfield · October 24, 2022, 3:43pm

Yeah, I noticed that the other day too. Haven’t had time to dig into it.

Beckfield · March 5, 2024, 4:59pm

I finally remembered to look at this. I think I have it fixed. Hopefully without messing something else up.

00dani · May 16, 2024, 2:50am

Hey there! I think there may have been some changes to ListenBrainz, since it currently looks like this with this dark theme applied.

I’m not especially familiar with the underlying HTML and the classnames used, but hopefully this is a relatively small fix.