Dark mode code in light mode

Custom CSS & Theme Design
1

Hello,
I want to have dark-mode code in a light-mode Obsidian theme. I’ve looked for themes that have this but didn’t find any. I put together the following css code snippet that does the trick for the ‘default’ obsidian style, by looking through the default app.css and copying colors:

/* In light mode, render code using dark-mode colors */
.HyperMD-codeblock, :not(pre) > code[class*="language-"], pre[class*="language-"] {
  --code-background: #242424;
  --code-normal: #b3b3b3;
  --code-comment: #666666;
  --code-function: #e0de71;
  --code-important: #e9973f;
  --code-keyword: #fa99cd;
  --code-operator: #fb464c;
  --code-property: #53dfdd;
  --code-punctuation: #b3b3b3;
  --code-string: #44cf6e;
  --code-tag: #fb464c;
  --code-value: #a882ff;
  --caret-color: #dadada;
}

/* ??? */
body {
  --caret-color: var(--caret-color);
}

If anyone knows of a better way to do this, that would be great.

2

Hey, if it works, it works! :smiley:

The only thing that comes to mind is that if you switch themes at some point, .HyperMD-codeblock, for example, might not be specific enough to override whatever CSS the theme is using. So, you could be more specific:

.theme-light .markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock,
.theme-light .markdown-rendered :not(pre) > code[class*="language-"], 
.theme-light .markdown-rendered pre[class*="language-"] { 
    /* styles */
}

But if it’s working, no need to change anything at this point. :tada: