Finding specific CSS element/class to modify

You may have seen me bitc^H^H^H^Hcomplaining about this over on r/obsidianmd. I think I have it narrowed down (hence this post) but it’s been a long time since I’ve done JS/CSS.

Screen Shot 2022-04-04 at 2022 04 04 11.49.10 PM

As you can (hopefully) see, the “1.” in the ordered list is grey-on-dark-grey. They’re all like that, as well as the bullets in an unordered list. I’ve been grepping the files looking for these classes in .obsidian/* with no luck. AFAICT there is no cms-list-1 class.

I’ve seen that system font mentioned in a coupla’ places, but I’d really prefer learning how to track this down instead of changing anything and everything that uses that font and hoping I get lucky.

Using the Dev Tools, I was able to get the pop-up window that you see here which shows some of the info about that element.

I have been through the Settings and Styles for the Minimal theme, clicking on everything that was related to color and checkbox and list and I still can’t find the setting(s) to change the color of these elements.

Can someone tell me how to find these settings and make them upgrade-proof, i.e. I don’t want to have to make this change every time the theme is updated or whatever.

u almost there, if u click on the element, the dev tool will jump to that particular html element on the sidebar (see pic below). and if u scroll down a bit u’ll see that classes .cm-s-obsidian span.cm-formatting-list there uses font color variable --text-muted and it’s applied by the core app css (hence the app.css:2355)


u can control this back by applying css snippet (Add custom styles - Obsidian Help). u have choice among these 3 route (that i can think of right now) via css snippet

/* this change this variable's preset, subject to whether ur theme uses it or not */
body {
    --text-muted: #FFFFF0; /* choose any color u want */
}
/* inherit text-normal color (the editor color), most theme would use this */
body {
    --text-muted: var(--text-normal); /* use editor font color for formatting */
}
/* take control entirely of this formatting font color */
.cm-s-obsidian span.cm-formatting-list {
    color: #FFFFF0; /* choose any color u want */
}
1 Like

u almost there, if u click on the element, the dev tool will jump to that particular html element on the sidebar

Nope. Not in my setup. For example, I click on ‘##Tasks’ in my daily_note and the devtool panel doesn’t change.

Also, I coulda’ swore there was a Find function that would search the rendered HTML (so I could search on ‘Tasks’, for example) but I don’t see that.

I would have thought this feature (color of checkboxes) would be in one of the Style Settings or thereabouts; that it wouldn’t be necessary to add CSS snippets.

At this point, I guess I’ll just plug in your three code snippets and play around with them and see if I get lucky.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.