search

urbit / landscape

Product board for Landscape.
20 stars 6 forks source link

Dark mode `code` background in chat not very visible. #124

Closed ohAitch closed 3 years ago

ohAitch commented 3 years ago

Describe and screenshoot the design issue Dark mode code background in chat not very visible.

2257D9D5-BE78-448D-BBEF-9378F596CF52

Is it a visual design issue? Is Indigo being used incorrectly? Possibly?

To Reproduce Steps to reproduce/view the behavior:

  1. Open landscape chat
  2. Find a post with inline code.
  3. Turn on system dark mode. You will no longer be able to find which posts have inline code.

Expected design behavior Similar light theme and dark theme inline code contrast.

1483D578-AFB6-43C8-9644-381C4A7F7565

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Slightly but not particularly more visible if I disable night-shift - not that nightshift + darkmode is an uncommon combination.

matildepark commented 3 years ago

The answer is that it’s using a value that’s black with partial opacity when it should flip to using a white with partial opacity in dark mode.

matildepark commented 3 years ago

Oh okay, so the issue here is that it's using custom CSS and not the indigo theme at all. Since we wrap the chat text in react-markdown I'm not clear on how to make it use indigo-react.

@g-a-v-i-n Do we need to add a markdown renderer to indigo-react or is there a way to wrap react-markdown in our theme? It seems that even inside a <Text> element that the outputted <code> elements don't inherit from the indigo-react theme.

ohAitch commented 3 years ago

Ideally this is what css classes are for?

matildepark commented 3 years ago

I mean we could just add a light-gray variable in dark mode CSS declarations, but we're moving from atomic CSS classes to CSS in JS / styled-system, so it's sort of an antipattern for me to fix it that way.

tylershuster commented 3 years ago

https://www.npmjs.com/package/react-markdown#use-custom-renderers-syntax-highlight ?

matildepark commented 3 years ago

Oh ho, very good, very good. Let's see.

ohAitch commented 3 years ago

CSS in JS as in letting libraries define internal styles that are subsequently impossible to override? ;)

I am reminded of how [I think Discord?] now has a function you can call to get a promise of the symbol-mangled computed class names for particular components, because people need them to cascade stylesheets in extensions.