style: use css light-dark in svg favicons

fvsch · Nov 13, 2024 · 5b37c83 · 5b37c83
1 parent bedc9a7
commit 5b37c83
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 28 deletions.
diff --git a/assets/favicon-error.svg b/assets/favicon-error.svg
diff --git a/assets/favicon-list.svg b/assets/favicon-list.svg
diff --git a/lib/page-assets.js b/lib/page-assets.js
@@ -1,20 +1,10 @@
-export const FAVICON_ERROR = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
-<style>
-svg { fill: #333 }
-@media (prefers-color-scheme: dark) {
-svg { fill: #ccc }
-}
-</style>
+export const FAVICON_ERROR = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+style="color-scheme: light dark; fill: light-dark(#333, #ccc)">
 <path fill-rule="evenodd" d="M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Zm0 1.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15Z M9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM7 5a1 1 0 0 1 2 0v3a1 1 0 0 1-2 0V5Z"/>
 </svg>`;
 
-export const FAVICON_LIST = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
-<style>
-svg { fill: #333 }
-@media (prefers-color-scheme: dark) {
-svg { fill: #ccc }
-}
-</style>
+export const FAVICON_LIST = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+style="color-scheme: light dark; fill: light-dark(#333, #ccc)">
 <rect x="1" y="2.75" width="2" height="2" rx="1"/>
 <rect x="1" y="7.25" width="2" height="2" rx="1"/>
 <rect x="1" y="11.75" width="2" height="2" rx="1"/>