First of all you did great job! I change example code just 'dark' to

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

I've been doing this as a workaround: <div class="highlight highlight-source-tsx n

[bug] variant="light" not work. about console-feed HOT 5 OPEN

samdenty commented on July 21, 2024

[bug] variant="light" not work.

from console-feed.

Comments (5)

cvoege commented on July 21, 2024 1

@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.

from console-feed.

samdenty commented on July 21, 2024

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

from console-feed.

callin2 commented on July 21, 2024

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

from console-feed.

samdenty commented on July 21, 2024

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

from console-feed.

Mike-Dax commented on July 21, 2024

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',
            }
      }
    />