TTLG|Thief|Bioshock|System Shock|Deus Ex|Mobile
Results 1 to 23 of 23

Thread: Dark theme?

  1. #1
    New Member
    Registered: Jun 2017

    Dark theme?

    Is there an option to enable a dark colour theme (dark background, light text) in the forums? If not, are there any plans to make such a theme?

    I've made a couple of userstyles for various websites for the browser addon Stylish (I'm currently using its fork, Stylus), and I'm thinking about making a dark theme for ttlg.com, too.

  2. #2
    Member
    Registered: Mar 2001
    Location: Ireland
    I made one a long time ago, but a forum update broke it, and I never got around to making one for the new forum software again after that.

  3. #3
    Member
    Registered: Apr 2007
    I use a Chrome Extension called dark mode / night reader.
    https://chrome.google.com/webstore/d...gafanjjc?hl=en

    Here's what it looks like on this site.
    https://i.imgur.com/jsM7d7P.png
    Windows 10 Pro, i7-4790K, GTX 1070 x2, Maximus Hero Vii, 32gb DDR3 2400.
    https://pcpartpicker.com/b/z7ccCJ

  4. #4
    New Member
    Registered: Jun 2017
    Hey, that looks pretty good. Thanks for sharing!

    That gave me an idea: rather than inspect each element on the webpage and change their colours, why not invert everything? Luckily, CSS allows not only this but also hue rotation, which can give me a result identical to what is in your screenshot.

    So, in case you already have Stylus or Stylish installed, you can use the userstyle here.

    Edit: I also altered the spoiler tags a bit to reduce the contrast compared to other elements.
    Last edited by maxigaz; 4th Dec 2017 at 10:18.

  5. #5
    Member
    Registered: Mar 2001
    Location: Ireland
    That site seems highly dodgy, since it won't even open with ad blockers running. Here's the clean CSS code:

    Code:
    @-moz-document domain(ttlg.com)
    {
     
      html
      {
        filter: invert(100%) hue-rotate(180deg);
        background: black;
      }
    
      .son, .spoiler, .soff
      {
        filter: invert(80%) hue-rotate(180deg);
      }
    }
    Also, while the idea is nice and simple, it has some serious problems with the way it inverts images:



    ... Hilariously, that image looks perfectly normal when running the user stylesheet, as it's been inverted twice and just looks like normal TTLG.
    Click to see the problem.
    Last edited by Nameless Voice; 4th Dec 2017 at 16:03.

  6. #6
    New Member
    Registered: Jun 2017
    userstyles.com works fine for me using uBlock Origin and uMatrix, although I understand that having fewer (or no) ads or trackers would be better. If you happen to know a more suitable place to share userstyles, let me know. (In the mean time, I can also paste my changes here.)

    Thank you for pointing out the images, it totally slipped my mind. I've tried some pseudo-rules to exclude images (using :not), but I don't know exactly how to use them in this case. So, for now, I applied an additional filter to change inversion and hue rotation for images inside posts and smileys back to original. May not be the most practical solution, but it just works™.

    This is how my code looks like at the moment:

    Code:
    @-moz-document domain(ttlg.com)
    {
    	html {
    		filter: invert(100%) hue-rotate(180deg);
    		background: black;
    	}
    
    	.son, .spoiler, .soff {
    		filter: invert(80%) hue-rotate(180deg);
    	}
    
    	.content img, /* Images inside posts */
    	.editor_smiliebox ul.smiliebox li img, /* Smileys in new post page part I */
    	div.blockrow.posticons table tbody tr td label img /* Smileys in new post page part II */ {
    		 filter: invert(100%) hue-rotate(180deg);
    	}
    }
    Further suggestions are very welcome.

  7. #7
    Member
    Registered: Mar 2001
    Location: Ireland
    Strange, that site is just a white page for me with those extensions installed. No matter.
    You could try https://pastebin.com/


    The inversion works surprisingly well, though some thing such as post icons and smileys look decidedly odd. Still impressive for not needing to edit a single image.

  8. #8
    New Member
    Registered: Jun 2017
    I've just discovered that Stylus supports usercss, which means css files stored locally or on the web can be opened by it. This allows me to edit them in my favourite editor (Neovim), enable live update, and, most importantly, they can be installed and updated from VCS like GitHub and GitLab.

    So, if I've done it right, you should be able to install it from GitLab by going here and clicking on "Install directly with Stylus". Then, if you check "Check for updates" in the tab newly opened, you'll be able to do that from Stylus, without any need of userstyles.org or copy-and-pasting.

  9. #9
    Member
    Registered: Mar 2001
    Location: Ireland
    My dark theme is now available again from the theme selection menu at the bottom-left corner of the forums.




    Let me know if you spot anything that isn't dark-styled.
    I might take another look through it at a a later date and redo some of the icons to make them more dark-theme friendly.

  10. #10
    New Member
    Registered: Jun 2017
    It looks beautiful. Thank you!

    On the desktop version of the website, at the bottom of the reply page, the area with the title "Posting Permissions" is still white.

    Also, you haven't made a theme for the mobile versions (the mobile style selectable in the bottom left corner and ttlg.mobi), have you? Although I mostly browse the forums from desktop, sometimes browsing them from mobile is more convenient for me.

  11. #11
    Member
    Registered: Mar 2001
    Location: Ireland
    That's strange, the posting permissions box is dark for me?

    I thought ttlg.mobi doesn't actually let you post?
    Therefore, I only use the full desktop site on my mobile.

  12. #12
    Moderator
    Registered: Apr 2003
    Location: Wales
    Thanks, NV, for your efforts in getting this up and running again.

  13. #13
    New Member
    Registered: Jun 2017
    Here's what I can see under Firefox 57.0.2 (even with Stylus disabled, so it shouldn't interfere):



    Also, I've just noticed that the editor section looks out of place, too:



    You're probably right about ttlg.mobi, but the mobile version of ttlg.com/forums (selected in the bottom left corner) allows you to log in and reply. By the way, does the desktop version looks fine on your mobile phone? Because I need to zoom in on my Moto G (3rd gen) using Fennec F-Droid to be able to read it.

  14. #14
    Member
    Registered: Mar 2001
    Location: Ireland
    I don't quite understand why the permissions box is white, since it isn't on anything I've tried it on (Firefox 56, Firefox 59/Nightly, Chrome, Firefox for Android. The editor also wasn't white for me, but after poking around in my user settings, it is now (even after changing them back). I'll see about getting that fixed soon. I didn't even know TTLG had a mobile skin with full functionality. I was just using the normal skin, which needs a lot of zooming and panning on mobile (especially since different posts have seeming random text sizes.) That mobile skin is ugly and doesn't seem to show you and it's really hard to see when threads have new posts, making its usefulness questionable at best.
    Last edited by Nameless Voice; 29th Dec 2017 at 16:26.

  15. #15
    Moderator and Priest
    Registered: Mar 2002
    Location: Dinosaur Ladies of the Night
    SWANKY!

  16. #16
    Member
    Registered: Oct 2007
    Location: up the hill
    This looks great, thanks.

  17. #17
    Member
    Registered: Aug 2004
    Location: CT, USA
    Quote Originally Posted by Nameless Voice View Post
    My dark theme is now available again from the theme selection menu at the bottom-left corner of the forums.
    Thanks for implementing this again, I've really missed it!

  18. #18
    Moderator
    Registered: Jan 2003
    Location: NeoTokyo
    Quote Originally Posted by Nameless Voice View Post
    Let me know if you spot anything that isn't dark-styled.
    This is going to make my mod privilege show, but a thread which has been deleted is left out of the conversion, which makes for a jarring bright line in the line-up of threads. I don't know if you can fix it if you can't even see them, but if you can it'd be great. (Haven't looked up if deleted posts are covered or not yet.)

    Edit: Also poll results.

    I'm going to keep looking around and edit other things in if I find any.
    Last edited by demagogue; 21st Mar 2018 at 07:34.

  19. #19
    Desperately Dodgy Moderator
    Registered: Nov 2001
    Location: Fields of bluegrass
    Deleted posts are also very bright, like deleted threads.

  20. #20
    Member
    Registered: Mar 2001
    Location: Ireland
    Uh, do you have any CSS identifiers for those?

  21. #21
    Member
    Registered: Mar 2001
    Location: Ireland
    Fixed.

  22. #22
    Moderator
    Registered: Jan 2003
    Location: NeoTokyo
    Beautiful, thanks!

  23. #23
    Member
    Registered: May 2012
    Location: France
    Yep, that's nice. Thanks indeed :}

    Also, for other websites which don't provide a dark theme, Firefox users can use an extension such as Dark Background and Light Text, which has several options including plain old "invert colors" as well as a stylesheet processor that allows the user to choose his own colors.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •