maxigaz on 25/11/2017 at 19:20
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.
Nameless Voice on 25/11/2017 at 20:16
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.
maxigaz on 4/12/2017 at 13:43
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 (
https://userstyles.org/styles/152384/ttlg-forums-dark-theme) here.
Edit: I also altered the spoiler tags a bit to reduce the contrast compared to other elements.
Nameless Voice on 4/12/2017 at 19:56
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:
(
https://i.imgur.com/Wvqdu8p.jpg)
Inline Image:
https://i.imgur.com/Wvqdu8p.jpg... 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.
maxigaz on 4/12/2017 at 21:05
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.
Nameless Voice on 4/12/2017 at 22:16
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.
maxigaz on 5/12/2017 at 19:42
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 (
https://gitlab.com/maxigaz/userstyles) 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.
Nameless Voice on 20/12/2017 at 19:22
My dark theme is now available again from the theme selection menu at the bottom-left corner of the forums.
Inline Image:
https://imgur.com/nuBcUcn.pngLet 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.
maxigaz on 21/12/2017 at 14:20
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.