Filter+ from Dark Reader

edemaine · Apr 8, 2023 · 82d7893 · 82d7893
1 parent 739cd64
commit 82d7893
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,11 @@ To see every change with descriptions aimed at developers, see
 As a continuously updated web app, Cocreate uses dates
 instead of version numbers.
 
+## 2023-04-08
+
+* Dark mode better preserves color saturation using new SVG color filter
+  from [Dark Reader](https://darkreader.org/)'s Filter+ mode.
+
 ## 2023-01-20
 
 * Fix SVG export of pen strokes with arrows.

diff --git a/client/DrawApp.coffee b/client/DrawApp.coffee
@@ -485,6 +485,12 @@ export DrawAppRoom = ->
         <filter id="selectFilter">
           <feGaussianBlur stdDeviation="5"/>
         </filter>
+        {### Filter+ from Dark Reader, https://github.com/darkreader/darkreader/blob/7f047b20909b09b8cdb3e45550d0c586abeb98a4/src/generators/utils/matrix.ts#L42 ###}
+        <filter id="invertFilter" x="0" y="0" width="999999" height="999999"
+         style="color-interpolation-filters: srgb">
+          <feColorMatrix type="matrix"
+           values="0.33333 -0.66667 -0.66667 0 1 -0.66667 0.33333 -0.66667 0 1 -0.66667 -0.66667 0.33333 0 1 0 0 0 1 0"/>
+        </filter>
         {### arrowhead from https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker ###}
         <marker id="arrow" viewBox="0 0 10 10" refX="9.5" refY="5"
          markerWidth="4" markerHeight="4" orient="auto-start-reverse"

diff --git a/client/cursor.coffee b/client/cursor.coffee
@@ -7,7 +7,8 @@ export makeCursor = (icon, xFrac, yFrac) ->
   if fancyCursor.get()
     options = {}
     if dark.get()
-      options.style = 'filter:invert(1) hue-rotate(180deg)'
+      #options.style = 'filter:invert(1) hue-rotate(180deg)'
+      options.style = 'filter:url(#invertFilter)'
     icons.cursorCSS icon, xFrac, yFrac, options
   else
     null

diff --git a/client/lib/icons.coffee b/client/lib/icons.coffee
@@ -156,10 +156,15 @@ export modIcon = (icon, attrs) ->
     icon
 
 ## Wrap icon in <svg>...</svg> tag
+invertFilter = null
 export svgIcon = (icon, attrs) ->
   icon = getIcon icon
   if typeof icon == 'object'
     {icon, width} = icon
+  ## Include inverting <filter> if needed
+  if attrs?.style?.includes 'invertFilter'
+    invertFilter ?= document.getElementById('invertFilter').outerHTML
+    icon = invertFilter + icon
   """<svg xmlns="http://www.w3.org/2000/svg"#{viewBox width}#{formatAttrs attrs}>#{icon}</svg>"""
 
 ## Stack icons, from bottom to top, just by concatenation

diff --git a/client/main.styl b/client/main.styl
@@ -95,13 +95,18 @@ html, body, #root, #container
   grid-area: center
   position: relative
 
+body
+  --filter: none
+  &.dark
+    //--filter: invert(1) hue-rotate(180deg)
+    --filter: url(#invertFilter)
+
 .board, .modal, .overlay
   position: absolute
   overflow: hidden
   width: 100%
   height: 100%
-  /.dark &
-    filter: invert(1) hue-rotate(180deg)
+  filter: var(--filter)
 .board
   cursor: crosshair
   touch-action: none  // PointerEvents only
@@ -224,17 +229,16 @@ button(activeBorder)
       fill: black
     text-anchor: middle
     font-size: 10px
-  /.dark & svg
-    filter: invert(1) hue-rotate(180deg)
+  svg
+    filter: var(--filter)
 .width, .dash
   line
     stroke: var(--currentColor)
 
 .color, .opacity, [data-tool="fill"] svg
   width: 100%
   height: 100%
-  /.dark &
-    filter: invert(1) hue-rotate(180deg)
+  filter: var(--filter)
 
 #opacities > .tool:not(:first-child)
   padding: 0
@@ -440,7 +444,7 @@ body:not(.history)
 .modal.error
   background: pink
 .modal.info
-  background: #bbb
+  background: #ddd
 .modal-title
   font-weight: bold
   font-size: larger
@@ -460,8 +464,7 @@ body:not(.history)
   svg
     width: 100%
     max-height: 50vh
-  /.dark &
-    filter: invert(1) hue-rotate(180deg)
+  filter: var(--filter)
 
 // Based on keyframes from Font Awesome Free (see `lib/icons.coffee`).
 @keyframes fa-spin