Jump to content

We need a "dark mode" for the website


Antrad
 Share

Recommended Posts

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.

after2.png

before.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...

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.

Link to comment
Share on other sites

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.
image.png.eaacb85f3586dc0207dc7313cbd327a2.png

image.png.49d2a1e04bf8648bbe45ed06eb36abea.png

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.

Link to comment
Share on other sites

8 hours ago, blyad said:

As you can see background for it is in html.
image.png.eaacb85f3586dc0207dc7313cbd327a2.png

image.png.49d2a1e04bf8648bbe45ed06eb36abea.png

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Found PCGamingWiki useful? Please consider making a Donation or visiting our Patreon.
  • Who's Online   2 Members, 0 Anonymous, 302 Guests (See full list)

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Forum Statistics

    1.8k
    Total Topics
    9.2k
    Total Posts
×
×
  • Create New...