Dark theme for custom formatters in devtools dark mode #30

Activity

1. darwin

   added

   help wanted

   on Nov 10, 2016
2. darwin commented on Nov 10, 2016

   

   darwin

   on Nov 10, 2016

   Last edited by darwin

   Member

   More actions

   Should be doable by providing alternative styling via config:
   

   cljs-devtools/src/lib/devtools/defaults.cljs

   Line 225 in 4b40423

   ; -- styles --------------------------------------------------------------------------------------------------------------

   Or maybe just overriding color table would be enough (not sure about background colors):
   

   cljs-devtools/src/lib/devtools/defaults.clj

   Line 8 in 4b40423

   (def named-colors

   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.
3. darwin commented on Nov 11, 2016

   

   darwin

   on Nov 11, 2016

   Last edited by darwin

   Member

   More actions

   @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.
4. darwin commented on Nov 11, 2016

   

   darwin

   on Nov 11, 2016

   Member

   More actions

   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
5. frankitox commented on Aug 10, 2020

   

   frankitox

   on Aug 10, 2020

   More actions

   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!

   👍React with 👍21Reacted by Antonin Hildebrand, Ryan De La Torre, Christopher Joslyn, William Calderipe, Carina, Grigory Shepelev, Björn Ebbinghaus, Jarppe, Akhil Wali, Baruch Berger and 11 more
6. chr15m commented on Aug 19, 2023

   

   chr15m

   on Aug 19, 2023

   Last edited by chr15m

   More actions

   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.
7. chr15m commented on Nov 24, 2023

   

   chr15m

   on Nov 24, 2023

   More actions

   @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;"}}}

   👍React with 👍6Reacted by Antonin Hildebrand, Franco Biasin, Daniel Vingo, Ray Stubbs, Luciano Maiwald and Michael Salihi