Dark text in dark theme of the forum


Image description: Screenshot of the forum topics list, with black text on dark grey background.

Uhm, look for yourself, i don’t think i have to explain a lot going on there :smiley: idk if that behaves the same for everyone, but it would be nice if the font could change to the same light grey as the rest of text.
Also the same applies to highlighted selection of “latest” “top” or “unread”, also black text on dark grey background.

Oh, an while i am at it, the banner on top of the forum has a white frame around it, at least for me


image description: top banner of the forum in the dark theme, orange fill with white frame.

also would be nice i think if the rest of the text would be black instead of white, to be consistent with the rest of the design.

Anybody else stuff for improvement of the dark theme? :smiley:

2 Likes

I’ve also noticed dark text here:


I think it would be far easier to read and would look better if the highlighted category was also orange.

Also, the image just beneath “Getting Started” in my screenshot should have the background removed.

Edit: most of the icons for buttons should also have better contrast.

2 Likes

The Discourse theme is a bit unfinished, I’ve did some fixes with the Stylus browser extension - check here for the source:

2 Likes

@admins: the dark theme is still not very usable… is there any way you could reuse the CSS proposed by @Bundyo in A request for dark mode - #22 by Bundyo or at least fix the “black text on dark background” problem pleeease? :slight_smile:

2 Likes

Still no changes to the dark theme? Still pretty much unfriendly to use


Who’s the best person at FW to ping for this?

1 Like

Dark mode is still in dire need of a rework. But hey, we all see now that y’all are focusing on the most important things at least :wink:

Can’t wait for Framework 16!

Great fixes! Here’s my take on them:

    .d-header {
        border-color: var(--tertiary);
    }

    .topic-list .main-link a.title {
        color: var(--primary) !important;
    }
    
    .topic-list-item,
    .topic-list-body {
        border-color: var(--secondary-very-high);
    }

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

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

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

    .badge-wrapper .badge-category .category-name {
        color: #000;
        font-weight: 700;
    }
    
    .widget-link {
        color: #000 !important;
    }
1 Like