Mastodon system appearance support with StopTheMadness

December 5, 2022
By Jeff Johnson of Underpass App Company

The popularity of Mastodon is growing. More of my customers are using it. However, the web user interface of Mastodon is… not great. One shortcoming is that it doesn't respect the system light and dark appearance preference, despite having separate light and dark appearance themes in the site preferences. I personally tend to switch back and forth between appearances at different times of day. Fortunately, I have a solution to this problem, using a StopTheMadness custom style element. After experimenting, I've come up with some decent CSS to support dark mode on Mastodon. You'll first want to set your site theme to Mastodon (Light). Then add custom website options in StopTheMadness for your Mastodon instance (for example, mastodon.social), and paste the following CSS into the custom <style> element field.

:root {
    color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
    :not(button) {
        color: revert !important;
    }
    :not(button, .privacy-dropdown__option) {
        background-color: revert !important;
    }
    .column-header__wrapper button,
    .notification__filter-bar button,
    #tabs-bar__portal button {
        color: revert !important;
        background-color: rgba(30,30,30,0) !important;
    }
    div[role="listbox"], .modal-root__modal, .dropdown-menu, h1.column-header, .search-popout, .tabs-bar__wrapper {
        background-color: rgb(30,30,30) !important;
    }
}

By the way, you may also want to disable the "Stop link trackers" website option for your Mastodon instance, as I mentioned in a previous blog post, otherwise some links may unexpectedly open in a new tab instead of the same tab. I've now filed a bug report about this issue with Mastodon, so hopefully they'll fix it.

December 7, 2022 Update: I tweaked the CSS a bit to fix some color and transparency issues.