V1Engineering Forum Dark Mode

I started working on a dark mode theme for the forum. It is available on userstyles.org here

I highly recommend the Chrome addon Stylus. It is a fork of the older extension Stylish, but without any of the tracking or analytics. If you install the extension, you can simply visit this site and click the icon in the top right of Chrome, then click “find styles” and my style should pop up. Alternatively, you can go to userstyles.org and click “Install Style” on that page.

I welcome anyone to make modifications to this, I’m not great with colors. But I tried to follow the design of the original forum (IE this color is darker than the other color which is darker than the other color) just translated to shades of grey. It is certainly a work in progress. Main thing is probably dealing with the reply/new post editor and other form inputs/buttons.

1 Like

That is cool, I wonder if there is an option for me to do that on this side, optionally of course.

So that lets you override the css style sheet, shoot. Let me know if you come up with a better overall theme for the site, sounds like I could just plug in some numbers and viola, better looking site.

Is there a firefox or firefox on android option?

Yes, both. https://addons.mozilla.org/en-US/firefox/addon/stylish/

The one thing I can’t style apparently is the reply box. Because it’s an iframe… and it seems to do some weird inheriting from the body tag, so the font color is a bit strange in the reply box. But I’m currently working on that.

 

Thanks! I’m only going to work on dark mode because my PC is in my bedroom and sometimes I like to stay up late… bright white pages make the girlfriend a bit mad at me when she’s trying to sleep :slight_smile:

Hmmm.

I got this to work on the desktop, but on the mobile, I followed your link, installed it, then went back to the forums and it’s white. I clicked on the stylish button from the menu, and it’s there under installed, but it’s greyed out (like not available) and the forum pages are still white.

I would even go darker. This is still pretty white :). Looks easy enough to change though.

Hmmm, I don’t have android so I can’t test it. I would assume it is something to do with the regex expression that dictates which URLs the styles are applied to. (which Chrome does not use, that is mozilla only)

I wonder if there is a different css for mobile.

I use divi, I see an option to change over to dark mode but no option to make in an option for users…if that makes sense.

There might be some sort of collision happening. I should go back through and add !important to everything. Because at the very minimum the body text color should be changing. It’s just selecting the body tag.

1 Like

Ahhh, now my dark mode matches everywhere… Thanks!

1 Like

Updated and it works great on mobile!

Also:

YoureGoodAtCss !important

2 Likes

hahaha When I’m actually writing CSS I NEVER use !important. and I cringe when I see others doing it… but the documentation for Stylus recommends it so I don’t feel as bad :slight_smile:

I’m no longer a front-end developer, but it was hammered in pretty good that !important is the styling equivalent to GOTO in OO code. It’s there, and it works, but you damned well better have a good reason for using it (and it usually involves coping with some mouth-breather’s copy & paste from a down-voted Stack Overflow answer).

That’s much easier on the eyes! Dark mode everywhere!!!

I keep getting a notification saying @Vincentcaf is replying to this thread. Spam, Ryan?

I’m subscribed here and I’m not seeing anything.

Okay I am not sure what the heck but I will delete them. @vincentcaf If you are legit just sign up again and maybe that will fix it.

I have really liked this theme, but I want it to go farther. So I made it even darker. I’m no css wizard, but it seemed pretty simple to look at what you’ve done and extend it. The only one I added was a ‘pre’ one for some preformatted code. The rest was just dropping a lot of intensity.

[attachment file=114594]

Soo Dark!

1 Like