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