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

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.

Posting Permissions

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