feat: add global SVG color-blind filters for media elements

theme-selector.js

@@ -9,6 +9,8 @@ class ThemeSelector extends HTMLElement {
   }
 
   async connectedCallback () {
+    // Append colorblind filters to the main document
+    document.body.appendChild(this.createColorBlindFilters())
     const currentTheme = await db.getTheme()
     this.shadowRoot.querySelector('#theme-select').value = currentTheme || 'light'
     this.applyTheme(currentTheme || 'light')
@@ -69,6 +71,72 @@ class ThemeSelector extends HTMLElement {
 
     return template.content
   }
+
+  createColorBlindFilters () {
+    const svgNS = 'http://www.w3.org/2000/svg'
+    const svg = document.createElementNS(svgNS, 'svg')
+    svg.setAttribute('id', 'colorblind-filters')
+    svg.setAttribute('style', 'display: none')
+
+    const defs = document.createElementNS(svgNS, 'defs')
+
+    const filters = [
+      {
+        id: 'deuteranopia',
+        values: '0.29031,0.70969,0.00000,0,0 0.29031,0.70969,0.00000,0,0 -0.02197,0.02197,1.00000,0,0 0,0,0,1,0'
+      },
+      {
+        id: 'deuteranomaly',
+        values: '0.57418,0.42582,0.00000,0,0 0.17418,0.82582,0.00000,0,0 -0.01318,0.01318,1.00000,0,0 0,0,0,1,0'
+      },
+      {
+        id: 'protanopia',
+        values: '0.10889,0.89111,0.00000,0,0 0.10889,0.89111,0.00000,0,0 0.00447,-0.00447,1.00000,0,0 0,0,0,1,0'
+      },
+      {
+        id: 'protanomaly',
+        values: '0.46533,0.53467,0.00000,0,0 0.06533,0.93467,0.00000,0,0 0.00268,-0.00268,1.00000,0,0 0,0,0,1,0'
+      },
+      {
+        id: 'tritanopia',
+        values: '1.00000,0.15236,-0.15236,0,0 0.00000,0.86717,0.13283,0,0 0.00000,0.86717,0.13283,0,0 0,0,0,1,0'
+      },
+      {
+        id: 'tritanomaly',
+        values: '1.00000,0.09142,-0.09142,0,0 0.00000,0.92030,0.07970,0,0 0.00000,0.52030,0.47970,0,0 0,0,0,1,0'
+      },
+      {
+        id: 'achromatopsia',
+        values: '0.299,0.587,0.114,0,0 0.299,0.587,0.114,0,0 0.299,0.587,0.114,0,0 0,0,0,1,0'
+      }
+    ]
+
+    // Iterate through each filter and append to defs
+    filters.forEach((filter) => {
+      const filterElem = document.createElementNS(svgNS, 'filter')
+      filterElem.setAttribute('id', filter.id)
+      filterElem.setAttribute('color-interpolation-filters', 'linearRGB')
+
+      const feColorMatrix = document.createElementNS(svgNS, 'feColorMatrix')
+      feColorMatrix.setAttribute('type', 'matrix')
+      feColorMatrix.setAttribute('values', filter.values)
+
+      filterElem.appendChild(feColorMatrix)
+      defs.appendChild(filterElem)
+    })
+
+    svg.appendChild(defs)
+    return svg
+  }
 }
 
 customElements.define('theme-selector', ThemeSelector)
+
+function appendColorBlindFiltersToBody () {
+  const existingSvg = document.querySelector('#colorblind-filters')
+  if (!existingSvg) {
+    document.body.appendChild(createColorBlindFilters())
+  }
+}
+
+appendColorBlindFiltersToBody()

theme.css

@@ -90,35 +90,35 @@
 
 :root[data-theme="deuteranomaly"] img,
 :root[data-theme="deuteranomaly"] video {
-  filter: hue-rotate(7.5deg) contrast(90%);
+  filter: url(#deuteranomaly);
 }
 
 :root[data-theme="protanomaly"] img,
 :root[data-theme="protanomaly"] video {
-  filter: hue-rotate(-7.5deg) contrast(90%);
+  filter: url(#protanomaly);
 }
 
 :root[data-theme="deuteranopia"] img,
 :root[data-theme="deuteranopia"] video {
-  filter: hue-rotate(10deg) contrast(125%);
+  filter: url(#deuteranopia);
 }
 
 :root[data-theme="protanopia"] img,
 :root[data-theme="protanopia"] video {
-  filter: hue-rotate(-10deg) contrast(125%);
+  filter: url(#protanopia);
 }
 
 :root[data-theme="tritanopia"] img,
 :root[data-theme="tritanopia"] video {
-  filter: hue-rotate(90deg) contrast(90%);
+  filter: url(#tritanopia);
 }
 
 :root[data-theme="tritanomaly"] img,
 :root[data-theme="tritanomaly"] video {
-  filter: hue-rotate(45deg) contrast(90%);
+  filter: url(#tritanomaly);
 }
 
 :root[data-theme="achromatopsia"] img,
 :root[data-theme="achromatopsia"] video {
-  filter: grayscale(100%) contrast(75%);
+  filter: url(#achromatopsia);
 }