Show current color in favicon

Author: ai

types.d.ts

@@ -11,6 +11,11 @@ declare module '*?worker' {
   export default worker
 }
 
+declare module '*.svg?url' {
+  let image: string
+  export default image
+}
+
 declare const COLOR_FN: 'lch' | 'oklch'
 declare const LCH: boolean
 declare const L_MAX: number

view/base/index.ts

@@ -1,7 +1,10 @@
+import { formatLch } from '../../lib/colors.ts'
 import { isHotkey } from '../../lib/hotkeys.ts'
 import { accent } from '../../stores/accent.ts'
+import { current, valueToColor } from '../../stores/current.ts'
 import { redo, undo } from '../../stores/history.ts'
 import { loading } from '../../stores/loading.ts'
+import simpleLogo from './simple.svg?url'
 
 // The only way to detect Mac is using old API
 // eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -35,3 +38,16 @@ document.body.addEventListener('keydown', e => {
     undo()
   }
 })
+
+if (COLOR_FN === 'oklch') {
+  let iconLink = document.querySelector<HTMLLinkElement>(
+    'link[rel="icon"][type="image/svg+xml"]'
+  )
+  current.subscribe(value => {
+    let colorLogo = simpleLogo.replace('%23000', formatLch(valueToColor(value)))
+    if (value.l > 0.9) {
+      colorLogo = colorLogo.replace('%23fff', '%23000')
+    }
+    iconLink?.setAttribute('href', colorLogo)
+  })
+}