Ensure favicon is displayed on Preview links

seek-oss · Jan 3, 2025 · 9125d5a · 9125d5a
1 parent 6095dc4
commit 9125d5a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/.changeset/clean-pets-push.md b/.changeset/clean-pets-push.md
@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Ensure favicon is displayed on Preview links.
diff --git a/lib/makeWebpackConfig.js b/lib/makeWebpackConfig.js
@@ -178,6 +178,7 @@ module.exports = async (playroomConfig, options) => {
         chunksSortMode: 'none',
         chunks: ['preview'],
         filename: 'preview/index.html',
+        favicon: path.join(__dirname, '../images/favicon.png'),
         publicPath: '../',
       }),
       new VanillaExtractPlugin({

diff --git a/src/preview.js b/src/preview.js
@@ -1,9 +1,22 @@
 import { renderElement } from './render';
 import Preview from './Playroom/Preview';
+import faviconPath from '../images/favicon.png';
+import faviconInvertedPath from '../images/favicon-inverted.png';
 
 const outlet = document.createElement('div');
 document.body.appendChild(outlet);
 
+const selectedElement = document.head.querySelector('link[rel="icon"]');
+const favicon = window.matchMedia('(prefers-color-scheme: dark)').matches
+  ? faviconInvertedPath
+  : faviconPath;
+
+const formattedFavicon = `../${favicon}`;
+
+if (selectedElement) {
+  selectedElement.setAttribute('href', formattedFavicon);
+}
+
 const renderPreview = ({
   themes = require('./themes'),
   components = require('./components'),