# \[bug-2001\]Markdown Tables do not respect theming

**URL:** <https://forum.inductiveautomation.com/t/bug-2001-markdown-tables-do-not-respect-theming/44136>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 5, 2021, 2:29am UTC](https://forum.inductiveautomation.com/t/bug-2001-markdown-tables-do-not-respect-theming/44136 "2021-03-05T02:29:11Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\
**Post date:** [March 5, 2021, 2:29am UTC](https://forum.inductiveautomation.com/t/bug-2001-markdown-tables-do-not-respect-theming/44136/1 "2021-03-05T02:29:11Z")

</div>

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 ☹

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/a/3a3846a69ce22379f3ad1f92f9652b76d9e2f26e.png)

```auto
| Syntax | Description |
| --- | ----------- |
| Header | Title |
| Paragraph | Text |

```

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 5, 2021, 5:16pm UTC](https://forum.inductiveautomation.com/t/bug-2001-markdown-tables-do-not-respect-theming/44136/2 "2021-03-05T17:16:38Z")

</div>

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

```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; }

```

---

<div class="post-metadata">

**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\
**Post date:** [March 5, 2021, 5:36pm UTC](https://forum.inductiveautomation.com/t/bug-2001-markdown-tables-do-not-respect-theming/44136/3 "2021-03-05T17:36:35Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 5, 2021, 5:48pm UTC](https://forum.inductiveautomation.com/t/bug-2001-markdown-tables-do-not-respect-theming/44136/4 "2021-03-05T17:48:55Z")

</div>

> [@ryanjmclaughlin](#):
>
> Looks like that CSS has hardcoded colors, can I just swap those over to the CSS color variables from theming?

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.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 5, 2021, 5:53pm UTC](https://forum.inductiveautomation.com/t/bug-2001-markdown-tables-do-not-respect-theming/44136/5 "2021-03-05T17:53:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\
**Post date:** [March 8, 2021, 3:06pm UTC](https://forum.inductiveautomation.com/t/bug-2001-markdown-tables-do-not-respect-theming/44136/6 "2021-03-08T15:06:34Z")

</div>

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

```auto
[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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/6/4658c2fb3254baff52248ee21d332b16dee31340.png)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 8, 2021, 5:50pm UTC](https://forum.inductiveautomation.com/t/bug-2001-markdown-tables-do-not-respect-theming/44136/7 "2021-03-08T17:50:23Z")

</div>

There’s always `!important`…

---

<div class="post-metadata">

**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\
**Post date:** [March 8, 2021, 5:54pm UTC](https://forum.inductiveautomation.com/t/bug-2001-markdown-tables-do-not-respect-theming/44136/8 "2021-03-08T17:54:32Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/3/732cbd4ecbbc5284463542edd46a28838f4dc3fb.jpeg)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/5/55ce145b0a19749c80c2fbb604a464832eb4c637.png)

---

<div class="post-metadata">

**Author:** ![jhottell](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jhottell/32/6472_2.png) [@jhottell](https://forum.inductiveautomation.com/u/jhottell)\
**Post date:** [July 31, 2026, 3:51pm UTC](https://forum.inductiveautomation.com/t/bug-2001-markdown-tables-do-not-respect-theming/44136/9 "2026-07-31T15:51:44Z")

</div>

Well five years later, this is still an issue in 8.3.3. I went into a rage for approx. 30 seconds then scrolled back up to your workaround Ryan. Thank you so much for sharing your fix! 60 seconds of adjusting a few colors and I am a happy camper. 🔥 🔥 🔥

I will definitely buy you a beer sometime.