[bug] variant="light" not work.

[callin2]

First of all you did great job!

I change example code just 'dark' to 'light' it only affected after one depth object. root level object display as 'dark' themeed.

[samdenty]

@callin2 Could you provide a reproducible example? https://codesandbox.io/s/rl7pk9w2ym

[callin2]

@samdenty99 example here =>> https://codesandbox.io/s/moy12rx51p just change dark to light and backgroundColor to white

[samdenty]

Ah I see. Currently you'd need to provide a custom style prop to the <Console> component. The variant prop is just passed to the react-inspector package.

See https://github.com/samdenty99/console-feed/blob/master/src/definitions/Styles.d.ts

[cvoege]

@samdenty is there any update on this, or anything I could do to fix this? Currently only the light background + dark text will work in my app, but variant simply doesn't change it right now.

[Mike-Dax]

I've been doing this as a workaround:

    <ConsoleFeed
      logs={logs}
      variant={isDark ? 'dark' : 'light'}
      styles={
        isDark
          ? {
              BASE_LINE_HEIGHT: 1.2,
              BASE_FONT_FAMILY: 'menlo, monospace',
              BASE_FONT_SIZE: '11px',
              LOG_ICON_WIDTH: 11,
              LOG_ICON_HEIGHT: 12,
            }
          : {
              BASE_LINE_HEIGHT: 1.2,
              BASE_FONT_FAMILY: 'menlo, monospace',
              BASE_FONT_SIZE: '11px',
              LOG_ICON_WIDTH: 11,
              LOG_ICON_HEIGHT: 12,
              // Light mode override since the variant doesn't seem to do anything
              LOG_COLOR: 'rgba(0,0,0,0.9)',
              LOG_BORDER: 'rgb(240, 240, 240)',
              LOG_WARN_BACKGROUND: 'hsl(50deg 100% 95%)',
              LOG_WARN_BORDER: 'hsl(50deg 100% 88%)',
              LOG_WARN_COLOR: 'hsl(39deg 100% 18%)',
              LOG_ERROR_BACKGROUND: 'hsl(0deg 100% 97%)',
              LOG_ERROR_BORDER: 'rgb(0deg 100% 92%)',
              LOG_ERROR_COLOR: '#f00',
              LOG_AMOUNT_COLOR: '#fff',
            }
      }
    />