Fixing the colour accessibility for dark mode
4 votes c/freepost Posted by vaeringjar — 4 votes, 11 comments — Source

@zPlus

I wasn’t sure how you prefer patches/PRs/MRs and I was lazy and just wanted to send this over because I keep putting it off and getting distracted.

These changes should fix the colour accessibility for dark mode. I chose a slightly less extreme contrast for dark mode just in case I completely missed something. So if I did miss something, it should still be better than it was before.

There’s also still an existing issue with the monkey showing up extremely small when changing the view to 375x800 or smaller.

I hope all is well.

@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #333;
    color: #ddd;
  }
  a, a:hover, a:visited {
    color: #ff0; /* add this for better contrast against the background */
  }
}

@media only screen and (min-width: 800px) {
  .menu > .flex-item {
    /* color: #000; */ /* remove this one line */
  }
}

@media only screen and (max-width: 800px) {
  .menu.visible a {
    /* color: #000; */ /* and also remove this one line */
  }
}
2 votes DustDFG

Hello!

  1. About PRs and similar. The repo is at https://clif.peers.community/zplus/freepost.git so you could just create fork at NotABug. I don’t know what zPlus prefers but it is what I did

  2. As I know freepost allows you not to fill link field. When you fill it, the post/link becomes “unique” so if someone else wants to use that link freepost won’t allow to make a post with a link that have been already used… Just a piece of info ¯\_(ツ)_/¯

2 votes zPlus

Regarding point 2, here’s the explanation: in the past, different people used to submit the same link multiple times. Someone made a patch to prevent this, and it’s been like that since that patch.

2 votes zPlus

Thank you vaeringjar :)

I’ll try to add these changes asap. If you have the repo anywhere (NAB?) I can pull from there otherwise I’ll just add them manually.

1 vote vaeringjar

Okay cool. If you don’t get around to it before I do later, I’ll put in a PR on NAB.

There’s also the voting background when the user hasn’t voted yet. I forgot to check that one. I can probably fix that one too.

1 vote zPlus

You don’t really need to open any PR on NAB, though. Have you got the repository uploaded there? I’ll just git pull from it.

1 vote vaeringjar

Sorry, I haven’t been able to get stylus to work. I might be running a ~~python~~ npm/node version that’s too recent. I know I’ve run it before no problem.

Either way, I’m not entirely sure where it’s configuring the prefers-color-scheme from.

EDIT: I typed python when I meant npm. Anyway I’ll give this another try later.

1 vote zPlus

I haven’t actually been using stylus for a while. I dropped it in favor of plain CSS (just to remove the extra dependency). I think you might still be using the “main” branch, but I actually created a new branch called “communities” when I added groups last year. This has the up to date files.

1 vote zPlus

Thank you for the help. Still not perfect but I think I was able to make it readable at least.

1 vote vaeringjar

Cool, sorry I have so much going on I totally spaced it out. And when I came back not too long ago tuxfamily was having an issue.

The highlighted post style probably needs a different background, but that’s so much better.

EDIT: It’s this rule:

.container > .content > .post > .comments > .comment:target {
  background-color: lightyellow;
}
2 votes zPlus

oh thank you! I completely missed it. I’ve changed it. Don’t know if it looks good but at least it’s readable :)

1 vote vaeringjar

Looks great! Thanks zPlus!