I feel like I should be able to figure this out myself, but in case someone else has already done so—is there a way to play with dark mode colours in Markdown previews? I can’t seem to get the preview to pick up on CSS variables, though I’m not that proficient in CSS so I may just be messing something up. (I did get this to work on my website, though.)
Hard to say without code and examples.
@BLUEFROG good point! I take it from your comment that it should be possible to show different styles in light mode and dark mode within DT via CSS, then?
Here’s a sample of what isn’t working for me. It’s pared down from my normal CSS file, but it still seems to fail in the same way:
:root {
--theme: light;
--primary-color: 35, 31, 32;
}
[data-theme=dark] {
--theme: dark;
--primary-color: 255, 255, 255;
}
body {
color: RGB(var(--primary-color));
font-family: Baskerville, serif;
margin: 0;
max-width: 100%;
}
I’m guessing there’s something wrong with how I’m detecting dark mode in the [data-theme=dark] line, or something?
Edit: screenshots.
Light mode. The text pictured is the :root { --primary-color } value (#231f20).
Dark mode. Text disappears! Spooky.
What’s the Markdown for the page?
Just:
css: x-devonthink-item://8564F046-3B2E-4056-9958-A6A9BE886472
# Test
testing
I would not use the :root element. Other than specificity, it’s the same as the HTML element.
You ready for this?
PS: Due to the potential style caching issue, I suggest using internal styling in the Markdown until you achieve the desired look. After that you can move it to an external stylesheet if you want, but iterations are much faster with internal CSS.
2 Likes
Ah, okay. I got the :root concept from a tutorial on setting this up on the web. Thought it’s as good a place as any to start on a DT css file.
Ready for wha?
I guess I’m just looking for an example css selector that picks up on dark mode in DT. I just need to know how to detect it, then I can go from there. If such a thing is possible!
Come on, y’all! Make some noise!!!
CSS is in the HOUSE!!! 
Standard dark mode
Custom light mode
Custom dark mode
…and the document that brought it all to you…
6 Likes
Ah, nevermind, got it!
@media (prefers-color-scheme: dark) {
html {
variable-name: variable-value;
}
}
Works like a charm.
PS: your PS
PS: Due to the potential style caching issue, I suggest using internal styling in the Markdown until you achieve the desired look. After that you can move it to an external stylesheet if you want, but iterations are much faster with internal CSS.
is a great tip. woof. So many times I could have avoided quitting the app and restarting it!
Fabulous! And those all look excellent.
Thanks! I love me some Markdown and CSS. So sexy and adaptable and fun. 
1 Like
Hah. The best part is that I can finally stop using color: #444 for body text because it’s barely legible against both white and black backgrounds. 
1 Like
Nice!
Could you possibly post the document in Markdown - that will be helpful for me to use as a template to explore further
Thanks
Sure, it’s possible but I would really suggest grabbing the screencap (which you can easily click to show then drag onto your desktop) and typing it out in a new Markdown document.
Just like with scripting, blindly using someone else’s code or copy and paste is a poor way to learn. Typing, screwing up, correcting, screwing up again, correcting again, and finally feeling the accomplishment of getting the code in your hands will benefit you more in the long run.
And trust me, I have years of typing and screwing up. Gotta start somewhere
3 Likes
I have a question in the same direction - it is possible to change the background of the notes in the dark mode from black to something else?
This is what I have in the settings:
This is how it looks like:
What i want it to keep dark mode of DT3 but change the background of the notes to something else.
What 'notes" ? There is no singular note format in DEVONthink.
Also Preferences > General > Appearance > Use dark backgrounds for documents can be disabled.
Note = Document.
Look on the screenshot above, you call it “Note Font” in your software.
Yes, your trick did it. Cheers.
Yes, but as noted in the Help, this refers to rich text formats: rich text, formatted note, and rendered Markdown with no default stylesheet.
IMHO, this is highly confusing.
If there is no format “note” in devonthink this wording shall not be used in the preferences of the app. Instead, the app preferences shall name the file formats supported, i.e. RTF, Formatted Notes, MD.
This would make it crystal clear to the user what to expect (w/o searching in the guide).