V1Engineering Forum Dark Mode

New Home Forum Random or Off Topic V1Engineering Forum Dark Mode

This topic contains 42 replies, has 8 voices, and was last updated by  Tim 1 month, 1 week ago.

Viewing 30 posts - 1 through 30 (of 43 total)
  • Author
    Posts
  • #113738

    Tim
    Participant

    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 user thanked author for this post.
    #113748

    Ryan
    Keymaster

    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.

    #113753

    Jeffeb3
    Participant

    Is there a firefox or firefox on android option?

    #113756

    Tim
    Participant

    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.

     

    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.

    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 🙂

    • This reply was modified 2 months ago by  Tim.
    #113760

    Jeffeb3
    Participant

    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.

    #113761

    Tim
    Participant

    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)

    • This reply was modified 2 months ago by  Tim.
    #113764

    Jeffeb3
    Participant

    I wonder if there is a different css for mobile.

    #113766

    Ryan
    Keymaster

    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.

    #113770

    Tim
    Participant

    I wonder if there is a different css for mobile.

    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 user thanked author for this post.
    #113775

    Geoffrey
    Participant

    Ahhh, now my dark mode matches everywhere… Thanks!

    1 user thanked author for this post.
    Tim
    #113796

    Jeffeb3
    Participant

    Updated and it works great on mobile!

    #113797

    Jeffeb3
    Participant

    Also:

    YoureGoodAtCss !important

    2 users thanked author for this post.
    #113798

    Tim
    Participant

    Also:

    YoureGoodAtCss !important

    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 🙂

    #113810

    K Cummins
    Participant

    Also:

    YoureGoodAtCss !important

    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 🙂

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

    #113878

    Barry
    Participant

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

    #114036

    Tim
    Participant

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

    #114055

    Jeffeb3
    Participant

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

    #114061

    Tim
    Participant

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

    #114064

    Ryan
    Keymaster

    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.

    #114593

    Jeffeb3
    Participant

    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.

    screenshot-2019-09-18-1568843221

    Soo Dark!

    1 user thanked author for this post.
    Tim
    #114596

    Jeffeb3
    Participant
    #114601

    Tim
    Participant

    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.

    screenshot-2019-09-18-1568843221

    Soo Dark!

    I’m probably going to use your version haha, I made the first version on my work monitor which is in a brightly lit room and it looked a lot darker. Good work!

    • This reply was modified 1 month, 3 weeks ago by  Tim.
    1 user thanked author for this post.
    #114604

    Ryan
    Keymaster

    Is this preferred? I can change the whole site if this is the way to go. Should we do a poll or something? I use the dark theme on my phone, the text editors I use,  kinda weird I have never really noticed preferring a website one way or the other.

    #114609

    Jeffeb3
    Participant

    Trying to be the devils advocate here…

    A lot of people see dark mode as somehow for hackers or complicated. I personally really like it, but I’m not sure how broad users from different backgrounds, especially quiet ones that don’t frequent the forums would react to it.

    But I love it. 🙂

    #114611

    Tim
    Participant

    I wish there was a plugin to allow users to switch. Because there is limitation to what can be done with this extension… for example, the iframe.

    I don’t think dark themes are necessarily for everyone.

    • This reply was modified 1 month, 3 weeks ago by  Tim.
    #114614

    Jeffeb3
    Participant

    Can you catch the iframe with another one of these tags:

    @-moz-document regexp(".*v1engineering.com/forum/.*")
    
    1 user thanked author for this post.
    Tim
    #114621

    Tim
    Participant

    Can you catch the iframe with another one of these tags:

    1
    @-moz-document regexp(".*v1engineering.com/forum/.*")

    As far as I can tell, the iframe has a piece of JS in it that pulls (some of, for example, text color) the styling from the body tag of the parent page at runtime so anything we would do wouldn’t work. I did find someone asking about styling an iframe and the developer of stylus said it wasn’t possible. Same thing from a bunch of stackoverflow answers too, though those are talking about plain CSS.

    That is an interesting idea though, I might try it when I have some free time.

     

    ahhh that totally works Jeffe. The src for the iframe is set programmatically and I don’t have time to find the actual URL right now but if you add the root of v1.com to the regex you can style the input box. doh.

    edit: wait now I can style it without changing the regex. I broke something on my end. oh well, will figure out tomorrow.

    • This reply was modified 1 month, 3 weeks ago by  Tim.
    • This reply was modified 1 month, 3 weeks ago by  Tim.
    • This reply was modified 1 month, 3 weeks ago by  Tim.
    #114639

    Barry
    Participant

    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.

    screenshot-2019-09-18-1568843221

    Soo Dark!

    I took it further…  I just wish chrome on android did extensions.

    dark

    Attachments:
    #114665

    Jeffeb3
    Participant

    Maybe it’s not so bad? I really like. Have I mentioned that?

    #114666

    Jeffeb3
    Participant

    Barry. That is very dark.

Viewing 30 posts - 1 through 30 (of 43 total)

You must be logged in to reply to this topic.