Mastodon: Too few color variables in style sheet theme

Created on 5 Jan 2018  ·  4Comments  ·  Source: tootsuite/mastodon

Hi, I'm working on a new mastodon theme and suffering from a problem of visual accessibility.
The problem is that user re-definable color variables defined in variables.scss are too few so we can only create very simple colored themes. e.g. I think that It would be very difficult if we try to make "white(=opposing to default)" color theme.

Does anybody have a good idea?

refactoring ui

Most helpful comment

I think that this problem can be solved by adding variables to some extent with mastodon. For example, it is strange that text color has $ui-base-color , is not it?

I think this is a structural defect.
Text as text color, button as button color, background as independent color, I think that each should be separated.

All 4 comments

I think that this problem can be solved by adding variables to some extent with mastodon. For example, it is strange that text color has $ui-base-color , is not it?

I think this is a structural defect.
Text as text color, button as button color, background as independent color, I think that each should be separated.

May be you should have a look to this (light) theme developed by Mathieu Dubois.

I used it as a base to do my own (Cafe) theme for my own instance. Some screenshots here

But I agree that the color variables are not enough detailed to do it properly.

This is a huge accessibility issue. As of today, there is a too few variables to make a truly accessible theme.
For example, $ui-primary-color, which is used both as a background and a text color, needs to be:

  • light enough to be used for text on a $ui-base-color background;
  • light enough to be used as a background for a dark text;
  • dark enough to be used for text on a white background.

When you put all of this constraints together, for each variables, you can't have a theme that respect the contrast recommendations every time.
I don't know what the proper fix would be, but I guess we need to add more variables.

This issue should be tagged with "accessibility" and should probably be at least of medium priority.

Have the recent merged PRs resolved this sufficiently?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

golbette picture golbette  ·  3Comments

sorin-davidoi picture sorin-davidoi  ·  3Comments

cumbiame picture cumbiame  ·  3Comments

KellerFuchs picture KellerFuchs  ·  3Comments

phryk picture phryk  ·  3Comments