Dark mode

Message

joby_toss · #1 Post by **joby_toss** » Fri Sep 08, 2023 7:25 pm

Hi, Andrew!
Have you considered adding a dark mode option for the database/forum board? Often times I check the website in the middle of the night and the current light themes are quite bright.
Thanks!
https://www.phpbb.com/customise/db/styl ... es/dark-17

I currently use the Dark Reader Vivaldi extension, but it doesn't work perfect with TPFC.

#2 Post by **Andrew Lee** » Fri Sep 08, 2023 11:04 pm

Will take a look later and see if there are any good dark themes available of phpBB.

If you know of a good phpBB dark theme, feel free to let me know.

joby_toss · #3 Post by **joby_toss** » Fri Sep 08, 2023 11:58 pm

I like the DVGFX2 theme, but I don't know the technical limitations for implementing it.
Please, don't put much effort into it, especially if it might not be a popular request!
Thanks!

#4 Post by **Andrew Lee** » Sat Sep 09, 2023 10:49 pm

I have installed 3 dark themes:

1) DVGFX2
2) Lucid Lime
3) Prosilver (Dark Edition)

Try them out and lemme know which one you prefer. Personally, my favorite is (2).

joby_toss · #5 Post by **joby_toss** » Sun Sep 10, 2023 12:06 am

Forums look great with DVGFX2 theme because of the higher contrast.

Thank you very much!

P.S. Would prefer if the Prosilver (Dark Edition) theme would have the Grey color scheme enabled instead of the default Blue one.

Edit: forums theme is separate from the main website one, right?

__philippe · #6 Post by **__philippe** » Sun Sep 10, 2023 7:15 am

Barely dare uttering this newbie inquiry to the-powers-that-be :

How, pray tell, does one activate dark mode

...

joby_toss · #7 Post by **joby_toss** » Sun Sep 10, 2023 8:24 am

Click your username (top right) -> User Control Panel -> Board preferences -> Edit global settings -> My board style -> (select desired) -> Submit

__philippe · #8 Post by **__philippe** » Mon Sep 11, 2023 1:40 am

...Alzheimer catching up...

#9 Post by **Andrew Lee** » Mon Sep 11, 2023 3:25 am

joby_toss wrote: ↑Sun Sep 10, 2023 12:06 am P.S. Would prefer if the Prosilver (Dark Edition) theme would have the Grey color scheme enabled instead of the default Blue one.

Done!

joby_toss wrote: ↑Sun Sep 10, 2023 12:06 am Edit: forums theme is separate from the main website one, right?

Yeah unfortunately. The main website never does support themes.

One possibility might be to use a browser extension like Tampermonkey and patch the main website's CSS to your liking.

joby_toss · #10 Post by **joby_toss** » Mon Sep 11, 2023 5:48 am

Andrew Lee wrote: ↑Mon Sep 11, 2023 3:25 am Done!

Yes, this one really seems easier on the eyes. Thanks!

lwc · #11 Post by **lwc** » Wed May 22, 2024 9:16 am

I've came up with a minimal code fit for this specific site to turn it to Dark mode - only for those that chose Dark Mode in their OS.
How about just adding this to the database's <head>? There may be a missed element here or there but I think it covers pretty much everything.

Code: Select all

<style>
@media (prefers-color-scheme: dark) {
  :not(a), input::placeholder {color: white !important; background-color: black !important;}
  .logo>*:first-child {background-color: dimgray !important;}
  a {color: deepskyblue !important;}
}
</style>

?
In fact, you can enhance it and make it fit for the forum too instead of forcing users to both register and look for a dark mode theme setting:

Code: Select all

<style>
@media (prefers-color-scheme: dark) {
  :not(a), input::placeholder {color: white !important; background-color: black !important;}
  .logo>*:first-child {background-color: dimgray !important;}
  a:not(.username-coloured) {color: deepskyblue !important;}
  input[type="submit"], input[type="reset"] {background-image: initial !important;}
}
</style>

P.S.
phpBB also has a dark mode extension.

#12 Post by **Andrew Lee** » Thu May 23, 2024 3:56 am

I added the second version to style.css, but it doesn't seem to do anything after setting appeareance to "Dark" on Chrome.

Read up a bit on "@media (prefers-color-scheme: dark)" as well. Don't you need to refine at least the "body" tag in order to set a dark background?

SYSTEM · #13 Post by **SYSTEM** » Thu May 23, 2024 5:25 am

Andrew Lee wrote: ↑Thu May 23, 2024 3:56 am I added the second version to style.css, but it doesn't seem to do anything after setting appeareance to "Dark" on Chrome.

Read up a bit on "@media (prefers-color-scheme: dark)" as well. Don't you need to refine at least the "body" tag in order to set a dark background?

Dark mode is working fine on my PC.

I think it follows the Windows preference.

#14 Post by **Midas** » Thu May 23, 2024 6:45 am

As a user of Windows 10 dark theme, here's how TPFC looks right now for me (logged in)...

Blue highlight on blue links isn't the most readable choice, IMHO. That logo image should also be fully transparent, perhaps, but with black text changed to white. And the search box is truncated somehow.

lwc · #15 Post by **lwc** » Thu May 23, 2024 8:59 am

Andrew Lee wrote: ↑Thu May 23, 2024 3:56 am I added the second version

It's not needed since you didn't put it in the forums. Maybe put it in the forums too to assist those that need it and aren't logged in and changed themes? Also consider the aforementioned phpBB extension (although the easiest solution is still that short <style>).

Yes, it relies on Windows' dark mode setting. You can set Chrome's own mode to "Device" to honor it.
You can also quickly switch back and forth from light to dark mode using Chrome DevTools (see how).

Midas wrote: ↑Thu May 23, 2024 6:45 am Blue highlight on blue links isn't the most readable choice, IMHO.

The site actually determines which link to highlight using JavaScript and not just pure CSS.
I therefore propose to add the following to <head> to counter it:

Code: Select all

<script>
changeHighlight();
function changeHighlight() {
    var elm='li.[ID]>a', color='navy';
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        elm=document.querySelectorAll(elm.replace('[ID]', document.body.className));
        if (elm.length>0)
            elm[0].style.backgroundColor = color;
    }
}
</script>

That logo image should also be fully transparent, perhaps, but with black text changed to white.

But it's already transparent and that's exactly why it happens - because it was designed with a black text over a transparent background. In my CSS I've chosen the lightest dark shade background to counter it.
Images that want to support both modes should either not contain text or not have a transparent background (but then it will force one mode for all users).

And the search box is truncated somehow.

Also true when editing listings. So please use this modified CSS instead of my original one:

Code: Select all

<style>
@media (prefers-color-scheme: dark) {
  :not(a), input::placeholder {color: white !important; background-color: black !important;}
  .logo>*:first-child {background-color: dimgray !important;}
  a:not(.username-coloured) {color: deepskyblue !important;}
  fieldset>input[type="submit"], fieldset>input[type="reset"] {background-image: initial !important;}
  div>input[type="submit"] {background-color: gray !important;}
}
</style>

But if you don't plan to put it in the forum than just this is enough:

Code: Select all

<style>
@media (prefers-color-scheme: dark) {
  :not(a), input::placeholder {color: white !important; background-color: black !important;}
  .logo>*:first-child {background-color: dimgray !important;}
  a {color: deepskyblue !important;}
  div>input[type="submit"] {background-color: gray !important;}
}
</style>

Keep in mind you need the aforementioned <script> too.

The Portable Freeware Collection Forums

Dark mode

Dark mode

Re: Dark mode

Re: Dark mode

Re: Dark mode

Re: Dark mode

Re: Dark mode

Re: Dark mode

Re: Dark mode

Re: Dark mode

Re: Dark mode

Re: Dark mode

Re: Dark mode

Re: Dark mode

Re: Dark mode

Re: Dark mode