Checklist panel only appears as black text in light mode, meaning I can't read any todo's

[Guvna-McBacon]

Using checklist plugin. In light mode black text doesn't show. I'm not a coder, so not sure if this is an issue to be solved for Red Graphite or Checklist and will cross-post.

Keep up the great work!

Cheers

[Taitava]

Edit 2022-04-01: My fix accidentally changes the main pane's font color too. I'll try to come up with a better fix a bit later.

Edit 2022-04-14: I fixed the CSS selector to only target the right side panel.

I haven't tested this a lot. If any more problems occur, I'll try to adjust it more.

---

A quick fix

1. Create a new file in .obsidian/snippets/ folder (you need to create the folder if it does not exist). The file name can be whatever, e.g. red-graphite-side-panel-fix.css.

2. Put the following content to the file:

div.mod-right-split div.view-content
{
  color: var(--text-nav);
}

3. Open settings in Obsidian, go to the Appearance tab and look at CSS snippets.
   

4. Click the small Reload snippets icon near CSS snippets.

5. Enable red-graphite-side-panel-fix snippet when it appears.

Result:

I'm using Dangling links plugin as an example here. Now the text is white (but the link stays red like it should).

(My Obsidian version is 0.13.33.)

[seanwcom]

Apologies for the lack of updates. Unfortunately I just don't have time to keep up with this as much as I'd like to. I have updated the theme to be compatible with the 1.0 release of obsidian. This is a complete rewrite and because I don't have much time for updates, I've tried to simplify things and have really made this mostly a UI theme rather than adjusting any text.

[Taitava]

Thank you @seanwcom for updating the theme! ❤️ Even if this particular text issue is not fixed, it's nice that the theme is compatible with Obsidian 1.0 and is generally working quite well again. 😎👍

[seanwcom]

I'm seeing another issue in a fresh install now that it's available in the community themes. So I'll address that, as well as take a closer look at this issue too. 😄

[seanwcom]

Ok, I think I've got this cleaned up now. If you're still using the theme and the plugin take a look and let me know. Here's an example while hovering over one:

[Taitava]

Thank you @seanwcom! Your fix works really well! ❤️

I tested using the Dangling links plugin. I'll add some images just to document how well the fix works for me:

After fix:

Before fix:

Way better now after the fix! 🥂

[seanwcom]

Awesome! Let me know if you run into any other issues. :)

[Taitava]

A problem with my own plugin

Hi, I'm coming back to this old issue. I'm a bit confused, the Dangling links works well like I described above, but my own plugin's (Shell commands) Custom variable right side pane's text is not visible. It's visible if I either switch from Light to Dark base color theme, or if I switch to use the default theme of Obsidian.

Obsidian version: 1.1.2 (happened on 1.0 too).
Red graphite version: 1.0.1

My pane uses the following HTML elements:

• <h3>Custom variables</h3>
• <ul> and <li> elements
• All of their texts are invisible, but <li>s have their bullets visible.

Somehow --text-normal has the same color as the background. Perhaps side panes should use some other color variable for their texts? But then again I'm not certain why the Dangling links pane works well. Can there be something wrong with my plugin?

My problematic pane:

My pane working ok on Obsidian's default theme:

HTML code of my side pane (taken from inspector):

<div class="workspace-leaf mod-active"><hr class="workspace-leaf-resize-handle"><div class="workspace-leaf-content" data-type="SC-custom-variables-view"><div class="view-header"><div class="clickable-icon view-header-icon" draggable="true" aria-label="Drag to rearrange"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-code-2"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg></div><div class="view-header-nav-buttons"><button class="clickable-icon" aria-disabled="true" aria-label="Navigate back"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></button><button class="clickable-icon" aria-disabled="true" aria-label="Navigate forward"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></button></div><div class="view-header-title-container mod-at-start"><div class="view-header-title-parent"></div><div class="view-header-title">Custom variables</div></div><div class="view-actions"><a class="clickable-icon view-action" aria-label="Unlink tab" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a><a class="clickable-icon view-action mod-pin-leaf" aria-label="Pin" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-pin"><line x1="12" y1="17" x2="12" y2="22"></line><path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"></path></svg></a><a class="clickable-icon view-action" aria-label="More options"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg></a></div></div><div class="view-content"><div class="container"><h3>Custom variables</h3><ul><li aria-label="User should set this to 'example'." class="SC-custom-variable-view-list-item">{{_mandatory_field}}<br><em>No value yet.</em></li><li aria-label="This should become 'Default'." class="SC-custom-variable-view-list-item">{{_field_with_default_value}}<br><em>No value yet.</em></li><li aria-label="This should become an empty string." class="SC-custom-variable-view-list-item">{{_optional_field}}<br><em>No value yet.</em></li><li aria-label="" class="SC-custom-variable-view-list-item">{{_field_using_variables}}<br><em>No value yet.</em></li><li aria-label="Used in Shell commands URI testing." class="SC-custom-variable-view-list-item">{{_uri_custom_variable_1}}<br><em>No value yet.</em></li><li aria-label="Used in Shell commands URI testing." class="SC-custom-variable-view-list-item">{{_uri_custom_variable_2}}<br><em>No value yet.</em></li><li aria-label="Used in FINISH TEST." class="SC-custom-variable-view-list-item">{{_plugin_version}}<br><em>No value yet.</em></li><li aria-label="Used in FINISH TEST." class="SC-custom-variable-view-list-item">{{_operating_system}}<br><em>No value yet.</em></li><li aria-label="Used in FINISH TEST." class="SC-custom-variable-view-list-item">{{_test_status}}<br><em>No value yet.</em></li><li aria-label="Delete this variable, don't commit." class="SC-custom-variable-view-list-item">{{_temporary}}<br><em>No value yet, but defaults to: </em><strong>Oletus</strong></li></ul></div></div></div></div>

AFAIK I don't use any CSS that would affect side pane colors, but here's my plugin's current CSS anyway.

---

Same problem with community plugins installation modal

Here the Show installed only text is not visible. But if using Obsidian's default theme, then the text is visible:

Thank you @seanwcom again for your support! ❤️