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

[tipa]

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

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

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. We do this to keep the amount of open issues to a manageable minimum. In any case, thanks for taking an interest in this software and contributing by opening the issue in the first place!

[tipa]

Bump. Issue still present and I would appreciate if it could be fixed. It's holding me back from switching to dark theme

[SychO9]

Interesting, the chosen primary color is close to that of the background color, hence why it doesn't work that well in this case, it's also not accessibility friendly.

Bump. Issue still present and I would appreciate if it could be fixed. It's holding me back from switching to dark theme

I recommend in the mean time to add the following custom Less code from the dashboard:

@custom-lighter-color: #eee;

.Button--primary {
  color: @custom-lighter-color;
}

.define-header(@config-colored-header);
.define-header(true) {
  @header-bg:                      @primary-color;
  @header-color:                   @custom-lighter-color;
  @header-control-bg:              mix(#000, @header-bg, 10%);
  @header-control-color:           mix(@custom-lighter-color, @header-bg, 60%);
}

[tipa]

Thanks for your response @SychO9. Your workaround works well for the header, but there are still some issues. For example, the text color on the tags switches with the theme, which is undesirable as the text background (= the tag color) is the same, no matter if dark or light theme. This now causes "dark" tags to be hard to read:

If you have some workaround for that as well, I would be very thankful. Of course a fix in flarum-core would be great as well ;)

[tipa]

I found an addition to the workaround that fixes the problem that I explained in my comment above:

.TagLabel.colored .TagLabel-text {
    --tag-color: @custom-lighter-color;
}

And this makes the header text readable:

.Hero h2 {
  color: @custom-lighter-color;
}