flarum / flarum/issue-archive

[A11Y] Text/Icon colors on colored backgrounds change in dark mode

Open
#152 5 comments 0 reactions 0 assignees View on GitHub
org/keep type/accessibility
Dominant language
No language data
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

## Bug Report

**Current Behavior**
Texts on colored background switched to dark text/icon color

**Steps to Reproduce**
1. Enable Dark Mode in admin settings
2. Enable "Colored header" and set color to "#5572F7"
3. Go back to main page

**Expected Behavior**
Texts on colored backgrounds continue to use a bright color.
Other web apps (Twitter, GitHub) also mostly use bright colors on their colored buttons

**Screenshots**
![image](https://user-images.githubusercontent.com/2863198/107187332-217a7480-69e6-11eb-8471-8a57b9a7d2b3.png)

**Environment**
- Flarum version: 0.7.1
- Webserver: apache
- Hosting environment: shared
- PHP version: 7.4.15
- Browser: Edge Version 88.0.705.63

```
Flarum core 0.1.0-beta.15
PHP version: 7.4.15
Loaded extensions: Core, date, libxml, openssl, pcre, zlib, filter, hash, pcntl, readline, Reflection, SPL, session, standard, restrictdocroot, bcmath, bz2, calendar, ctype, curl, dba, dom, mbstring, fileinfo, ftp, gd, gettext, gmp, iconv, imap, intl, json, ldap, exif, mysqlnd, PDO, pgsql, Phar, posix, shmop, SimpleXML, soap, sockets, sodium, sqlite3, sysvmsg, sysvsem, sysvshm, tidy, tokenizer, xml, xmlwriter, xsl, mcrypt, mysqli, pdo_mysql, pdo_pgsql, pdo_sqlite, xmlreader, xmlrpc, apcu, decimal, gnupg, igbinary, imagick, msgpack, psr, yaml, zip, mongodb, phalcon, redis, Zend OPcache
+----------------------+------------------+--------+
| Flarum Extensions | | |
+----------------------+------------------+--------+
| ID | Version | Commit |
+----------------------+------------------+--------+
| flarum-approval | v0.1.0-beta.15 | |
| flarum-bbcode | v0.1.0-beta.15 | |
| flarum-emoji | v0.1.0-beta.15 | |
| flarum-lang-english | v0.1.0-beta.15 | |
| flarum-flags | v0.1.0-beta.15 | |
| flarum-lock | v0.1.0-beta.15 | |
| flarum-markdown | v0.1.0-beta.15 | |
| flarum-mentions | v0.1.0-beta.15 | |
| flarum-statistics | v0.1.0-beta.15 | |
| flarum-sticky | v0.1.0-beta.15.1 | |
| flarum-subscriptions | v0.1.0-beta.15 | |
| flarum-suspend | v0.1.0-beta.15 | |
| flarum-tags | v0.1.0-beta.15 | |
| fof-polls | 0.3.2 | |
| fof-user-directory | 0.5.0 | |
| fof-oauth | 0.2.1 | |
| flarum-likes | v0.1.0-beta.15 | |
| flarum-nicknames | v0.1.0-beta.15 | |
| fof-nightmode | 0.7.1 | |
+----------------------+------------------+--------+
Base URL: https://workinghours.timopartl.com
Debug mode: off
```

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue by enabling Dark Mode, turning on Colored header with #5572F7 in admin settings, and checking the main page. Trace the styles responsible for text and icon colors on colored backgrounds. Done means those elements remain bright and readable in dark mode without changing the configured background color.

Written by the indexing model from the issue text.

Assessment

Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.