Syntax highlighting Hex codes?

[Dewdman42]

I am wanting to use a dark code block theme within an overall light obsidian theme. I have been unable to find a way to do this out of the box easily, it seems all the light themes tend to use a light code block theme also. I am currently using minimal theme, and using the minimal theme plugin, selected various different color schemes, all of which result in light code block for a light overall obsidian color scheme.

so then I turned to using The Style Settings plugin, but it doesn’t seem to have a way to show me what the current hex codes are for each of the syntax highlighting colors of whatever the currently selected color scheme are. it just lets you set them individually, but there is not way, for example, for me to look at a darker color scheme in order to find out the collection of color hex codes to use for that scheme, so that I can then switch to a light scheme and then using StyleSettings, change those particular things and end up with a nice dark themed code block.

does anyone know where I can find the hex codes for some well known dark code block color schemes? These are codes for the background and then each of the highlighter elements, such as comments, functions, keywords, etc…

I guess this could also be done with css snippets, but the GitHub docs for the minimal theme warns about doing that and says its preferable to use the Style Settings plugin to do it.

So anyway, I just want to have a nice dark code block theme to use with my light themed Obsidian, but I am not gifted enough to figure out the best color scheme, I’m a writer, not a designer. But I’d love to just get some color hex codes as used by some of the popular code editor themes out there and use those, but I don’t know where I can find that info or use Style Settings to discover it from the color schemes included in minimal, etc. Any suggestions?

[ariehen]

The base code block colors as defined by the default theme (in the app.css) are:

  --code-background: var(--background-primary-alt);
  --code-normal: var(--text-muted);
  --code-comment: var(--text-faint);
  --code-function: var(--color-yellow);
  --code-important: var(--color-orange);
  --code-keyword: var(--color-pink);
  --code-operator: var(--color-red);
  --code-property: var(--color-cyan);
  --code-punctuation: var(--text-muted);
  --code-string: var(--color-green);
  --code-tag: var(--color-red);
  --code-value: var(--color-purple);

The colors themselves will vary depending on the language you give the code block, so you’ll have to play around.

Specifically for Minimal, all the different additional colors schemes (selectable with Minimal Theme Settings) are in the Minimal.css starting around line 5472 (as of this post).

So you could use a few of the above to change things up. These are colors from the Ayu color scheme in dark mode,

  --color-red:#ff6666;
  --color-orange:#ffad66;
  --color-yellow:#ffd137;
  --color-green:#87D96C;
  --color-cyan:#95e6cb;
  --color-blue:#73d0ff;
  --color-purple:#dfbfff;
  --color-pink:#f27983;

but we want to apply them to light mode in code blocks only and not mess with anything else. Replacing var(--color-yellow) → #ffd137 and so on.

.theme-light .view-content {
    --code-background: black;
    --code-normal: #b3b3b3;
    --code-comment: var(--text-faint);
    --code-function: #ffd137;
    --code-important:#ffad66;
    --code-keyword: #f27983;
    --code-property: #95e6cb;
}

*added .view-content

We don’t want inline code to get the black background, so we need this:

.cm-s-obsidian .cm-inline-code:not(.cm-formatting), 
.markdown-rendered :not(pre) > code {
    background-color: inherit;
}

And finally, so we can see the cursor when it’s in a dark code block:

.theme-light .mod-cm6 .cm-line.HyperMD-codeblock  {
    caret-color: orange;
}

So altogether:

.theme-light .view-content {
    --code-background: black;
    --code-normal: #b3b3b3;
    --code-comment: var(--text-faint);
    --code-function: #ffd137;
    --code-important:#ffad66;
    --code-keyword: #f27983;
    --code-property: #95e6cb;
    /* more as needed */
}

/* removes the background color set above from inline `code` */
.cm-s-obsidian .cm-inline-code:not(.cm-formatting), 
.markdown-rendered :not(pre) > code {
    background-color: inherit;
}

/* changes caret color when cursor is in a dark code block */
.theme-light .mod-cm6 .cm-line.HyperMD-codeblock  {
    caret-color: orange;
}

So, you could try something like this , or just grab the hex colors from the color scheme you like and add them to the light theme Minimal Style Settings toggles.

Tested in the default and Minimal themes.

[holroy]

@ariehen

So, you could try something like this , …

@ariehen , I reckon that my feelings when reading this is a mixture of awe and bewilderment of the elegance and simplicity of such advanced styling you just happened to throw together.

I mean, “try something like this”, and you have a book to read through or try to understand. I love your work, and just wanted to let you know we see it and appreciate it!

[Dewdman42]

right so the main question I have is where did you find those # hex codes for Ayu?

I am looking right now into another source for some theme hex codes from the open source command line highlighter called “highlight” there theme files are very simple and have the hex codes, they might work but anyway, just trying to find some actual working collections of color hex codes that represent some known color schemes… I will take a look at your css snippets also to try that approach. The docs for the minimal theme said something like code snippets might work ok or might not but they rather recommend using Style Settings plugin to adjust the code block colors.

[ariehen]

@holroy Much appreciated.

I feel the same when trying to wrap my head around your Dataview solutions.

[ariehen]

@Dewdman42

where did you find those # hex codes for Ayu?

I linked directly to them here:

@ariehen

Minimal.css starting around line 5472 (as of this post).

Both CSS snippets and/or setting things via Style Settings will work fine with Minimal (and other themes as well).

I use Style Settings, for sure, but I sometimes get lost in all the settings and/or find the interface fiddly for setting lots of options. In this case, I would rather write out all the hex codes (or whatever) in a snippet vs. clicking into each option in Style Settings, typing, saving, click, etc. It 's my preference is all in this case.

[woofy31]

@ariehen

.cm-s-obsidian .cm-inline-code:not(.cm-formatting), 
.markdown-rendered :not(pre) > code {

I literally fear the day when Obsidian will change all these classes and the HTML structure to something entirely different thus creating havoc among all existing CSS snippets, themes & plugins

I tried to make my snippets use as few of these super-specific and weird-named classes as possible, but due to specificity I still have to use some of them, and it makes me super anxious!

[Dewdman42]

I am using snippets for a couple things, its not a big deal, and I do prefer to see them in the snippets folder also rather then buried inside whatever StyleSettings edits. But anyway, there definitely is always the possibility that the snippets break something with some themes or in the future, that is definitely true. For now I am just trying to gather some hex codes…and thanks for the reference to the Minimal.css file which should give me stuff.

[Dewdman42]

So I got the darker code block. I used Style Settings to do it. One thing is, the editor mode highlighting is different then the read mode highlighting, though they are both dark.

And another problem with this is that when I go to edit the code in the code block…the dark background hides the cursor which is generally black or dark to go along with my light over all theme. so that’s an annoyance I’ll have to figure out a solution. Maybe I should use that code editor plugin or something like that.

[ariehen]

Yeah, that one for targeting inline code is particularly ugly. Ugh.

[ariehen]

Yeah,

Obsidian uses Prism for syntax highlighting. For more information, refer to Supported languages.

Note
Live Preview mode doesn’t support PrismJS and may render syntax highlighting differently.

https://help.obsidian.md/Editing+and+formatting/Basic+formatting+syntax#Code+blocks ← linked above.

---

@Dewdman42

And another problem with this is that when I go to edit the code in the code block…the dark background hides the cursor

I feel like you are not clicking the links or reading what I suggested here. The cursor solution is above.

/* changes caret color when cursor is in a dark code block */
.theme-light .mod-cm6 .cm-line.HyperMD-codeblock  {
    caret-color: orange;
}

Good luck!

[Dewdman42]

First, I’m not using LivePreview at all. I use source code mode or read mode. so whatever problem I mentioned is not related to LivePreview.

Secondly I did my attempt using Style Settings, not your code snippets. I asked for the hash codes which you provided thank you. I will try your code snippet tomorrow to see if it has the same problem with the source editing view having a dark theme and unable to see the cursor or not. that would definitely prove the snippet approach superior to using Style Settings plugin…which is maybe a bit too much like a black box.

regards

[ariehen]

Understood.

The documentation should be clearer here. CodeMirror syntax highlighting is used for both Source mode and Live Preview; PrismJS is used for Reading view.

I double checked and the caret color CSS works in both Source mode and Live Preview.

[Dewdman42]

What I actually would prefer is that when I go to edit stuff inside a fenced code block that all syntax highlighting be turned off completely. but I digress. Tomorrow I will try the code snippet approach and see how it goes.

[ariehen]

You could try this:

.markdown-source-view:not(.is-live-preview) .HyperMD-codeblock > * {
    color: #b3b3b3; 
}

from: MarkGone: Get rid of that pesky MD styling

[Dewdman42]

Alright I tried the code snippet example you provided yesterday thanks again. It does indeed work better then the minimal theme approach using Style Settings. I can see the orange cursor while editing and I like that I can see the colors in my snippet file…easy. Only one little gotcha, don’t know if you have a solution…I see the part where we removed the dark background from inline code, but it also makes inline code hard to read because they are adopting white or light font colors also…
E

You appear to be a wizard with Obsidian and CSS, and I am a rank beginner to figure something like that out, but can you think of any way to force the inline code to also use the lite theme font colors?

[ariehen]

Not a wizard by far; I’m just getting better at poking around.

I’m not sure what parts of the above CSS you are using (or Style Settings set), but inline code is taken care of by this part. You could give this a try. Adjust the background-color and font color to your preference.

.cm-s-obsidian :is(.cm-inline-code, .cm-inline-code.cm-formatting),
.markdown-rendered :not(pre) > code {
    background-color: inherit;
    color: green;
}

Reading view:

[Dewdman42]

I am not using Style Settings now, I am using the example you gave in your first post. I will try this additional add

[Dewdman42]

That seems to work, thanks