[bug-2001]Markdown Tables do not respect theming

Ignition
1

Ignition 8.1.2. Have some popups where I need some basic table data and use markdown, but markdown doesn’t seem to respect theming :frowning:

image

| Syntax | Description |
| --- | ----------- |
| Header | Title |
| Paragraph | Text |
2

What selector are you using to apply a theme?
Looking in browser devtools, it appears the styling is driven by PerspectiveComponents.css:

[data-component="ia.display.markdown"] {
  overflow: auto; }
  [data-component="ia.display.markdown"] h1, [data-component="ia.display.markdown"] h2, [data-component="ia.display.markdown"] h3, [data-component="ia.display.markdown"] h4, [data-component="ia.display.markdown"] h5, [data-component="ia.display.markdown"] h6 {
    margin: 1rem 0; }
  [data-component="ia.display.markdown"] blockquote {
    color: #666;
    margin: 0;
    padding-left: 3em;
    border-left: 0.5em #eee solid; }
  [data-component="ia.display.markdown"] table {
    border-collapse: collapse; }
    [data-component="ia.display.markdown"] table tr {
      border-top: 1px solid #c6cbd1;
      background: #fff; }
      [data-component="ia.display.markdown"] table tr:nth-child(2n) {
        background: #f6f8fa; }
    [data-component="ia.display.markdown"] table th,
    [data-component="ia.display.markdown"] table td {
      padding: 6px 13px;
      border: 1px solid #dfe2e5; }
  [data-component="ia.display.markdown"] ul, [data-component="ia.display.markdown"] ol {
    list-style-position: inside;
    padding-left: 32px; }
3

Selector? Like how am I changing the theme? Just setting session.props.theme = ‘dark’

Looks like that CSS has hardcoded colors, can I just swap those over to the CSS color variables from theming?

4

Hmm, I think for now you'd have to create a new theme that provided colors for these defaults. I'll check if there's a ticket to make the markdown component respect themes properly.

5

There wasn’t, but there is now. So, yes, in the short term you’d have to create a new theme, with selectors for the elements above that pull in the theme’s default color values (or whatever other color you want).

1 Like
6

Humm, so knowing that you will fix this eventually and I don't care that you wipe out my temp fix, I added a themes/light/palette/markdown.css (and did the import in the index.css) with the following

[data-component="ia.display.markdown"] blockquote {
  color: var(--neutral-80);
}

[data-component="ia.display.markdown"] table {
  color: var(--neutral-90); 
}

[data-component="ia.display.markdown"] table tr {
  border-top: 1px solid var(--containerBorder);
  background: var(--neutral-10); 
}

[data-component="ia.display.markdown"] table tr:nth-child(2n) {
  background: var(--neutral-20); 
}

[data-component="ia.display.markdown"] table th,  [data-component="ia.display.markdown"] table td {
  border: 1px solid var(--containerBorder); 
}

It seems to be working, however, in the client it seems that PerspectiveComponents.css has priority and is overriding the theme...

image
image988×496 44.3 KB

7

There’s always !important…

1 Like
8

image

image