Dark mode

All suggestions about TPFC should be posted here. Discussions about changes to TPFC will also be carried out here.
Message
Author
User avatar
joby_toss
Posts: 2980
Joined: Sat Feb 09, 2008 9:57 am
Location: Romania
Contact:

Dark mode

#1 Post by joby_toss »

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.

User avatar
Andrew Lee
Posts: 3092
Joined: Sat Feb 04, 2006 9:19 am
Contact:

Re: Dark mode

#2 Post by Andrew Lee »

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.

User avatar
joby_toss
Posts: 2980
Joined: Sat Feb 09, 2008 9:57 am
Location: Romania
Contact:

Re: Dark mode

#3 Post by joby_toss »

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!

User avatar
Andrew Lee
Posts: 3092
Joined: Sat Feb 04, 2006 9:19 am
Contact:

Re: Dark mode

#4 Post by Andrew Lee »

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).

User avatar
joby_toss
Posts: 2980
Joined: Sat Feb 09, 2008 9:57 am
Location: Romania
Contact:

Re: Dark mode

#5 Post by joby_toss »

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

Image

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?

User avatar
__philippe
Posts: 687
Joined: Wed Jun 26, 2013 2:09 am

Re: Dark mode

#6 Post by __philippe »

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

   How, pray tell, does one activate dark mode :?: ... :roll:

User avatar
joby_toss
Posts: 2980
Joined: Sat Feb 09, 2008 9:57 am
Location: Romania
Contact:

Re: Dark mode

#7 Post by joby_toss »

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

User avatar
__philippe
Posts: 687
Joined: Wed Jun 26, 2013 2:09 am

Re: Dark mode

#8 Post by __philippe »

Image...Alzheimer catching up...:roll:

User avatar
Andrew Lee
Posts: 3092
Joined: Sat Feb 04, 2006 9:19 am
Contact:

Re: Dark mode

#9 Post by Andrew Lee »

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.

User avatar
joby_toss
Posts: 2980
Joined: Sat Feb 09, 2008 9:57 am
Location: Romania
Contact:

Re: Dark mode

#10 Post by joby_toss »

Andrew Lee wrote: Mon Sep 11, 2023 3:25 am Done!
Yes, this one really seems easier on the eyes. Thanks!

Image

lwc
Posts: 283
Joined: Tue Jun 26, 2012 10:40 pm
Contact:

Re: Dark mode

#11 Post by lwc »

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.
Attachments
homepage dark mode.png
editing dark mode.png
forum dark mode.png
forum search dark mode.png

User avatar
Andrew Lee
Posts: 3092
Joined: Sat Feb 04, 2006 9:19 am
Contact:

Re: Dark mode

#12 Post by Andrew Lee »

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?

User avatar
SYSTEM
Posts: 2044
Joined: Sat Jul 31, 2010 1:19 am
Location: Helsinki, Finland

Re: Dark mode

#13 Post by SYSTEM »

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.
My YouTube channel | Release date of my 13th playlist: August 24, 2020

User avatar
Midas
Posts: 6785
Joined: Mon Dec 07, 2009 7:09 am
Location: Sol3

Re: Dark mode

#14 Post by Midas »

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

Image

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. :idea:

lwc
Posts: 283
Joined: Tue Jun 26, 2012 10:40 pm
Contact:

Re: Dark mode

#15 Post by lwc »

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. :idea:
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.
Attachments
highlight.png

Post Reply