pixelfed / ideas

Issues board used for Pixelfed suggestions
8 stars 1 forks source link

Improve the dark color scheme to something more smooth and still be as accessible as possible #88

Open brunomiguel opened 6 months ago

brunomiguel commented 6 months ago

Some users, myself included, get eye strain from full black backgrounds. Pixelfed uses full black for the website background, the Android app too, so it can be less than ideal for some users. To tackle this, I've been using a userstyle on my desktop browser, but I'm sharing the changes I did here, so it can be at least evaluated for changes in the dark theme palette and become a starting point for this change.

@media (prefers-color-scheme: dark) {
    :root {
        --light: #181d25;
        --dark: #EFEDE7;
        --body-bg: #181d25;
        --body-color: #fdfdfb;
        --nav-bg: #181d25;
        --bg-light: #181d25;

        --light-gray: #2a2b37;
        --text-lighter: #818181;

        --card-bg: #2e3544;
        --light-hover-bg: #181d25;
        --btn-light-border: #718086;
        --input-border: #161618;
        --comment-bg: #181d25;
        --border-color: #818181;
        --card-header-accent: #181d25;

        --dropdown-item-hover-bg: #1E252F;
        --dropdown-item-hover-color: #818181;
        --dropdown-item-color: #64748b;
        --dropdown-item-active-color: #EFEDE7;

        --link-color: #f5f9b0;
    }

    a {
        color: var(--link-color);
    }
}

I leave an image showcasing the colors (with a different typeface, because reasons ^^') image