mattermost-mobile icon indicating copy to clipboard operation
mattermost-mobile copied to clipboard

Theme color sidebarHeaderTextColor is used with different backgrounds

Open nmatt opened this issue 1 year ago • 0 comments

Summary

The theme color sidebarHeaderTextColor is used with different background theme colors, which causes problems when those background colors differ in lightness/darkness.

Steps to reproduce

Use the following custom theme:

{"awayIndicator":"#eab11d","buttonBg":"#0044aa","buttonColor":"#ffffff","centerChannelBg":"#ffffff","centerChannelColor":"#000000","codeTheme":"github","dndIndicator":"#fb3232","errorTextColor":"#ff4048","linkColor":"#005599","mentionBg":"#f7f7f7","mentionBj":"#f7f7f7","mentionColor":"#145dbf","mentionHighlightBg":"#ffffff","mentionHighlightLink":"#166de0","newMessageSeparator":"#2fb538","onlineIndicator":"#0ae24a","sidebarBg":"#f7f7f7","sidebarHeaderBg":"#0044aa","sidebarHeaderTextColor":"#ffffff","sidebarTeamBarBg":"#003688","sidebarText":"#222222","sidebarTextActiveBorder":"#579eff","sidebarTextActiveColor":"#001155","sidebarTextHoverBg":"#dddddd","sidebarUnreadText":"#000000"}

Expected behavior

The expected behavior is for sidebarHeaderTextColor to only be used as the foreground color in conjunction with sidebarHeaderBg backgrounds.

Observed behavior (that appears unintentional)

On the mobile client, dialogs like "Edit" and "Reply" use sidebarHeaderTextColor as the foreground color on top of sidebarBg, making the text/buttons virtually invisible.

Possible fixes

Do one of the following:

  • Use sidebarHeaderBg as the background color instead of sidebarBg wherever sidebarHeaderTextColor is currently used as the foreground color.
  • Change the current uses of sidebarHeaderTextColor on sidebarBg to sidebarText.
  • Introduce new theme colors for the places where the incompatible foreground-background combinations are currently used.

nmatt avatar Oct 04 '23 15:10 nmatt