[SOLVED] A request for dark mode

[Xavier_Jiang]

It’s under Preferences → Interface.
That said, I had twiddled with Discobot and thus I am both Licenced and Advanced User.

[Bundyo]

One can use the integrated dark mode in Discourse settings, but it looks a bit unfinished, so I did some tweaking with the Stylus extension (make sure to set it only to this host).

:root {
    --header_background: #222;
}

.d-header {
    border-color: #333;
}

.d-header #site-logo {
    filter: invert(100%);
}

.topic-list .main-link a.title {
    color: inherit !important;
}

.custom-footer {
    background: var(--secondary-very-high);
}

.custom-footer .flexbox,
.custom-footer .third-box .social .social-link .d-icon {
    color: var(--secondary-medium);
}

.btn .d-icon,
.nav-pills > li a.active,
.btn-primary, #create-topic {
    color: #fff;
}

.badge-wrapper .badge-category .category-name {
    color: #fff;
    mix-blend-mode: difference;
    font-weight: 700;
}

Also ideas how to make the tag text color more readable on different backgrounds are welcome.

[junaruga]

Perhaps, below page is a clue for admin to enable dark mode in this forum?

Allow users to select dark / light theme

[Roberto_Vernina]

@buzz_recount

For a solution that doesn’t use Dark Reader for any reason*, then you can use the built-in dark mode in this Discourse instance’s settings.

I was about to reply to the thread and suggest the same, and I’ve also made a screenshot to illustrate it:

[Bundyo]

@Roberto_Vernina

I was about to reply to the thread and suggest the same, and I’ve also made a screenshot to illustrate it:

It is a bit broken. Check my answer above for а fix through the Stylus extension.

[junaruga]

Yeah this forum’s Color Scheme Dark, Dark + @Bundyo 's Stylus extension setting without Dark Reader extension, gave me a nice experience. Thanks.

[King_INF3RN0]

@junaruga

I just wanted to say the “Dark Reader” extention on Firefox, and mentioned above is great.

Looks great, though it’d be nice to exist across the board for my phone’s widget browser for the forum as well, plus a white version of the FW logo. Wouldn’t be too hard I’d expect?

[King_INF3RN0]

@FrameworkBee

@Chiraag_Nataraj

It would be wonderful if y’all could take a look to set those colors

Unfortunately, we are looking into this now as we have never enabled it and it may just be the forum doing so in an update. But, it’s not ADA compliant at this time which, we are attempting to fix but with certain aspects, it won’t let us. So, we are seeing if we can turn it off for now until we can find a better solution, I do apologize. I can’t wait to use dark mode myself :<

Any update on this?

[Xavier_Jiang]

Users > preferences > interface

[FaultedBeing]

Ay! It uh, may be almost two years since I started this thread, but I’ll take it! Thanks!

[King_INF3RN0]

@Xavier_Jiang

Users > preferences > interface

Thanks! Just wish I can get it OLED dark

[Xavier_Jiang]

@FaultedBeing

may be almost two years since I started this thread, but I’ll take it! Thanks!

I am pretty sure it’s out for like 6 months or so.
I am a light mode user so I dont really care.

[JacobFavreault]

The built-in dark mode looks pretty… yeah

Does anyone have any examples of extension dark modes on chromium? I’ve tried some in the past but they’ve all been pretty jank with weird coloring, especially with the fonts on the Latest screen

[Archer_Allstars]

Unfortunately, I don’t see the option in the setting. Firefox 113.

I can set dark mode in other Discourse forum without issues.

[Nicolaos]

@Archer_Allstars

Unfortunately, I don’t see the option in the setting. Firefox 113.

I can set dark mode in other Discourse forum without issues.

I’ve had the same experience. I’m using Darkreader for the time being but it seems bizarre for the built in option to be missing.

[Martin_Pavelek]

@Archer_Allstars

Unfortunately, I don’t see the option in the setting. Firefox 113.

Same here, same version; I can confirm I no longer see the option in settings. But it was there not too long ago: I used it to enable the dark mode a few months back, and it still works. So funnily enough, even if I wanted to turn it off now, with the setting gone I can’t.

[Bundyo]

@Martin_Pavelek

But it was there not too long ago: I used it to enable the dark mode a few months back

Same here. Fix by removal.

[Nicolaos]

@Bundyo

Also ideas how to make the tag text color more readable on different backgrounds are welcome.

Its not supported yet, but in the future you’ll likely be able to specify a color that’s actually a list of colors and have the browser pick the one with the best contrast.

color-contrast() - CSS: Cascading Style Sheets | MDN

[Morpheus636]

The option was never supposed to be enabled because Framework’s engineering team never looked at it or approved it. It was likely turned on by accident as part of an update. Because it had some bugs that caused things to not display correctly, and generally did not look up to par with Framework’s design standards (as you can see in the screenshots that others have posted), the team decided to disable it until Framework engineering has time to set it up properly and get it looking good.

Unfortunately, they don’t have the resources to do this immediately, but it’s on their list to look at in the future. Until then, your best bet, like others have suggested, is to use a browser extension. Thanks, all!

[Morpheus636]

@Martin_Pavelek

So funnily enough, even if I wanted to turn it off now, with the setting gone I can’t.

This should be fixed now. Thanks for bringing it to our attention!