We need a "dark mode" for the website

[Antrad 37]

The website is too bright and it needs a "dark mode" to make it more comfortable for us.

I made a very simple example in GIMP. The white parts are changed to value 95, the availability box to 90 and background is set to 80.

Even this minor change makes it more comfortable to look at, while it doesn't impact the overall design.

This would be a good enough start, but others may like even darker mode.

[Suicide machine 53]

I've been experimenting with creating some overrides for it using Stylish (although you can pretty much override anything you want in common.css file by creating common.css under your own profile - but it's obviously better to come up with something that works in Stylish instead of making tons of edits of the file) as sort of a joke with CDPR announcements etc. but I am getting lost in all the dependencies, especially with stuff on Home page.

[Patrxgt 20]

You know, that you can just use Dark Reader extension for your browser?

[Suicide machine 53]

1 hour ago, patrxgt said:

You know, that you can just use Dark Reader extension for your browser?

Good idea, but sites like awful like this 😞 Has issues in the same places where I had it when I tried overriding styles.

[redsigma 0]

Its funny cause i use opera gx and the dark mode is enable. I didnt even remember this site doesnt have the mode.

[Aaronth07 0]

Totally agree. Dark reader doesn't work too well for it unfortunately. Would love to have a proper dark mode.

[loolou78 1]

As long as It's optional.

[Aaronth07 0]

I have been working on a basic dark mode CSS for the site, if you want to try it. There are some issues and it's not fully complete, but it works great for browsing IMO.

 

https://www.pcgamingwiki.com/wiki/User:Aaronth07/common.css

 

Just apply this to your personal CSS under preferences. 

 

EDIT: Blyad made a much better dark mode. Use his.

[Patrxgt 20]

On 3/29/2021 at 12:56 AM, Suicide machine said:

Good idea, but sites like awful like this 😞 Has issues in the same places where I had it when I tried overriding styles.

Try changing motive engine to filter+ and play a little with contrast and brightness sliders. For me there is no problems with Dark Reader after setting everything up right.

[blyad 3]

https://pastebin.com/BTJQL94w

Here you go, you need extension Stylus for the browser.
If youre using Opera/GX you need also "Install Chrome Extensions" and than you install it from chrome store.

Here are some pics how it looks:

[loolou78 1]

Your post is too long, you should put the CSS code in a file and upload it instead of posting the whole thing on the forum.

[blyad 3]

Tought <code> would have an iframe or something, but it dosen't. Changed it for pastebin link

[Aaronth07 0]

Very nice. This definitely works better than the code I posted above. Especially since it still works when you're logged out. One thing i'm curious about, how did you get the controller types section to be consistent with the other rows? I remember than the HTML had an inline style for that specific element, and I wasn't able to overwrite that with the user CSS. Same with the expandable rows.

[blyad 3]

14 hours ago, Aaronth07 said:

Very nice. This definitely works better than the code I posted above. Especially since it still works when you're logged out. One thing i'm curious about, how did you get the controller types section to be consistent with the other rows? I remember than the HTML had an inline style for that specific element, and I wasn't able to overwrite that with the user CSS. Same with the expandable rows.

As you can see background for it is in html.

You can just double click it, copy it and do something like this in CSS:

[style="background-color: rgb(245, 245, 245);"] {
	background: #333 !important;
}

It must be with !important at the end or it won't work, it needs to be overwritten.

[Aaronth07 0]

8 hours ago, blyad said:

As you can see background for it is in html.

You can just double click it, copy it and do something like this in CSS:

[style="background-color: rgb(245, 245, 245);"] {
	background: #333 !important;
}

It must be with !important at the end or it won't work, it needs to be overwritten.

Oh. Very interesting. I didn't realize you could change the HTML style in CSS! Well TIL. Thanks!