[BUG] Table title is almost invisible

[rahaaatul]

Description

A table title is almost invisible, fading with background color.

Information

In which mode does the bug occur?

• [x] Reading/Preview Mode
• [ ] Source Mode
• [x] Live Preview

Which editor are you using?

• [ ] Legacy Editor
• [x] New Editor

Which version of Obsidian are you using?

• [ ] Public Release (Desktop)
• [x] Public Release (Mobile)
• [ ] Insider Release (Desktop)
• [ ] Insider Release (Mobile)

Checklist

• [x] I have updated to the latest version of the theme (Obsidian Settings → Appearance → Themes - Manage → Update).
• [x] I made sure that the issue is related to this theme, by checking that the issue does not occur with other themes or the default theme.

[LEFD]

Thanks a lot for the bug report! it looks like you are using bold text in the tables header, which clashes with its background gradient. I have never thought of that occurrence 😄

[LEFD]

a possible fix could be using the light theme colors for colored text on gradients for the dark theme and vice versa. this improves readability but looks bad imo.

another option would be removing the color of emphasised text on gradients altogether:

adding a stroke to the text does not look good either.

if anyone got any suggestions, feel free to share them!

[rahaaatul]

What's the CSS for this particular part? I'd like to try some color variants and give you feedback.

[LEFD]

@rahaaatul check out e53fdf6edf2468c4ff0fbf1ea0828ab2ca243f0f.

other types of text, like links might need some styling as well. but we could do this later. for now, we need to find something that works for this theme.

[rahaaatul]

@LEFD what do you think of going custom?

/* bold in table header */
th strong,
.table-cell-wrapper .cm-s-obsidian .cm-strong {
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(
      var(--gradientDegree),
      var(--blue) 0%,
      var(--yellow) 100%
    );
}

---

background-image: linear-gradient(var(--gradientDegree), var(--blue) 0%, var(--yellow) 100%)

---

background-image: linear-gradient(var(--gradientDegree), var(--blue), var(--yellow), var(--green));

[LEFD]

@rahaaatul using a custom gradient for colored, bold text on another gradient might work for one type of emphasized text. But this color gradient doesn't work with light mode and we would need to account for other types of colored text, like links.

I was thinking of putting a box around colored text on gradients:

th strong,
.table-cell-wrapper .cm-s-obsidian .cm-strong,
th em,
.table-cell-wrapper .cm-s-obsidian .cm-em,
th strong > em,
.table-cell-wrapper .cm-em.cm-strong,
th a.internal-link,
th a.external-link {
  background-color: var(--background-primary);
  border: var(--tag-border-width) solid var(--tag-border-color);
  font-size: var(--tag-size);
  font-weight: var(--tag-weight);
  text-decoration: var(--tag-decoration);
  border-radius: 4px;
  padding: 0.125em 0.25em ;
}

What do you think?

[rahaaatul]

I was thinking of putting a box around colored text on gradients

That works; but I'll be honest, it doesn't look good at all. How about this:

CSS Snippet

```css table { outline: 2px solid hsla(var(--red-tuple), 0.6); outline-offset: 0px; box-shadow: 0 0 10px 1px hsla(var(--orange-tuple), 0.3); /* Customize the color and spread */ margin: 10px; border-radius: 8px; z-index: 1; } thead { background-color: var(--layer-2); } tr { border: 1px solid var(--layer-3); } th { border-bottom: 2px solid hsla(var(--red-tuple), 0.6) !important; } .markdown-rendered tbody tr:nth-child(odd), .markdown-rendered tbody tr:nth-child(even) { background-color: var(--layer-1); } .markdown-rendered tbody tr:nth-child(odd):hover, .markdown-rendered tbody tr:nth-child(even):hover { background-color: var(--layer-2); } td:nth-child(odd), td:nth-child(even) { border-right: 1px solid var(--layer-3) !important; } td:last-child { border-right: none !important; } th strong, .table-cell-wrapper .cm-s-obsidian .cm-strong, th em, .table-cell-wrapper .cm-s-obsidian .cm-em, th strong>em, .table-cell-wrapper .cm-em.cm-strong, th a.internal-link, th a.external-link { -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text; background-image: linear-gradient(var(--gradientDegree), var(--pink) 0%, var(--orange) 100%); } ```

I'm a beginner in CSS, so couldn't do much. But you get the idea, right?

You could add something like:

• Slightly lower the font size for the cell items.
• Align items centrally by default or if possible, justify.

What do you think?