Alcumus / react-doc-viewer

Apache License 2.0
243 stars 103 forks source link

What do the theme colors do? #92

Open chadlavi-casebook opened 3 years ago

chadlavi-casebook commented 3 years ago

I'm experimenting in a codesandbox since this library does not have live code examples.

For theming, you give this example in your README:

<DocViewer
  documents={docs}
  theme={{
    primary: "#5296d8",
    secondary: "#ffffff",
    tertiary: "#5296d899",
    text_primary: "#ffffff",
    text_secondary: "#5296d8",
    text_tertiary: "#00000099",
    disableThemeScrollbar: false,
  }}
/>

But it's not documented anywhere what those theme keys control the colors of -- and in experimenting with a PDF, it seems that the intuitive guesses I made are wrong about this.

For example, it looks like the text_primary color is also used for text that appers over the tertiary background, even though the text_tertiary key exists. Also the text_secondary does not control the color of the back/forward icons on the secondary-colored back-forward buttons; those icons seem to be fixed to always be white?

I would expect all text that appears in an element that takes the primary background color to have the primary_text color. Ditto for secondary and tertiary. But this does not seem to be the case.

Further documentation of what these theme keys control is necessary, and I think there are also some bugs here -- but this is undocumented enough that i can't tell if it's a bug or just unintuitive but expected behavior.

For reference, here is the codesandbox (with some truly horrid colors in the theme just to make it really obvious what is what): https://codesandbox.io/s/frosty-haze-8jslf?file=/src/App.tsx