Looking for a way to detect dark mode so I can alter the style CSS accordingly

I use markdown to take notes in DT3 and use a custom style sheet to control the preview. This works great until my Mac switches to dark mode…then all of my pretty CSS text is too dark to see against the dark background.

Is there a way I can detect that the system is running in dark mode so I can alter the text color in CSS? For web broswers I can use the construct:

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        color: white;
    }
}

But that doesn’t seem to work in my DT3 CSS for markdown.

Welcome @lionelg

Yes, that is the correct method to use.
However, are you making the CSS adjustment in an external stylesheet?

Yes. It’s an external stylesheet stored in …/Application Support/DEVONthink/Stylesheets and referenced from DEVONthink preferences.

This would be an issue with WebKit caching the style.
There are various workarounds for this including using Data > Convert > to HTML to assess the change, as well as a quit and relaunch of DEVONthink. However, I personally do such styling directly in the Markdown document and apply it to an external stylesheet later once I’m satisfied with the styling. This way I can test it in realtime, directly in the document in DEVONthink.

Not a bad idea. I found myself in a cycle of editing the css > quitting DT3 > restarting DT3 to see the changes. I’ll try working inline with a sample doc to see if I can get it to work before moving the CSS to an exernal stylesheet.

So just to confirm, you think that the test I was trying to use:

@media (prefers-color-scheme: dark)

Should return a positive result if the Mac is in dark mode?

Yes.

<!-- Styling -->
<style type="text/css">
@media (prefers-color-scheme: dark) {
p {
color:red;
}
}
</style> 

This changes all paragraph text to red if you’re using macOS’ dark mode.

Works like a charm here. Thanks. I’ll try to get it working with my larger chunk of CSS now. I’m no CSS whiz – C was always my language of choice ;o(

You’re welcome. Happy styling (it’s easy to lose hours mucking about with it :stuck_out_tongue: )

The next release will work around this issue so that previewing Markdown always uses the latest version of local stylesheets (no matter whether in- or outside databases).

3 Likes