Dark theme for custom formatters in devtools dark mode

[timmywil]

I'm not sure how custom formatters work, but the logs are currently hard to read when devtools is in dark mode. I imagine the colors are customizable, but it would be nice if the default formatters had a config option for viewing in dark mode (any dark foreground colors would be swapped with lighter ones).

[darwin]

Should be doable by providing alternative styling via config: https://github.com/binaryage/cljs-devtools/blob/4b40423b6d6532b95fd2e97fa900fefff576e8b6/src/lib/devtools/defaults.cljs#L225

Or maybe just overriding color table would be enough (not sure about background colors): https://github.com/binaryage/cljs-devtools/blob/4b40423b6d6532b95fd2e97fa900fefff576e8b6/src/lib/devtools/defaults.clj#L8

I'm personally not going to spend time on this. I don't use dark mode. But I would accept pull requests if someone would be willing to maintain dark mode config overrides.

[darwin]

@timmywil I saw you forked the repo. I think maybe some background colors will be missing because I rely on defaults. Feel free to add new named colors or new css styles.

Also I would recommend you to explore "invert" css filter first. You might be able to achieve good results simply inverting and maybe rotating hue at root level in :cljs-land-style.

[darwin]

Another tip (in case you were not aware): You can start chrome with --remote-debugging-port and then inspect DevTools instance with custom formatted output using another (independent) DevTools. This way you can inspect rendered custom formatters html structure in Elements panel.

See https://developer.chrome.com/devtools/docs/debugger-protocol#remote

[frankitox]

Leaving this here for anyone that wants a quick solution. It uses manual installation:

(ns main
  (:require
   [devtools.core :as devtools]))
   
(let [{:keys [cljs-land-style]} (devtools/get-prefs)]
  (devtools/set-pref! :cljs-land-style (str "filter:invert(1);" cljs-land-style)))
(devtools/install!)

Here's how it looks

Thanks @darwin for the hints!

[chr15m]

You use a CSS media query to set styles based on the browser's dark mode setting like this:

@media (prefers-color-scheme: dark) {
  /* ... customised style e.g. filter:invert(1); ... */
}

I can't easily see how to include this clause to add the filter to just the :cljs-land-style. It kind of needs to be in a new CSS section rather than modifying the current :cljs-land-style I think. If @darwin can give me a hint as to how I could include/append this extra piece of CSS I can test and put a PR together.

[chr15m]

@dvingo posted this snippet in the shadow-cljs Slack channel which works great when added to your build target in shadow-cljs.edn:

:compiler-options {:external-config
 ;; these are for legibility when using dark theme devtools
 ;; any of these can be overwritten
 ;; https://github.com/binaryage/cljs-devtools/blob/master/src/lib/devtools/defaults.cljs
 {:devtools/config
  {:keyword-style   "color: #909113;"
   :cljs-land-style "background: rgba(0,0,0,0);color:#eee;border-radius:2px;"
   :string-style    "color: #16b4c4;"
   :symbol-style    "color: rgb(239,194,194);"
   :body-style      "display:inline-block;padding:3px 12px;border-top:2px solid rgba(60,90,60,.1);margin:1px;margin-top:0px;background:transparent;"}}}