From 1728edf02b0393eb05d7c0cc24d3b70bab187249 Mon Sep 17 00:00:00 2001
From: Ben Jervis <bjervis@seek.com.au>
Date: Thu, 14 Dec 2023 15:56:49 +1100
Subject: [PATCH] Implement dark/light switching

---
 lib/makeWebpackConfig.js |  6 +++++-
 src/index.js             | 11 +++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/lib/makeWebpackConfig.js b/lib/makeWebpackConfig.js
index 98c17b26..0843f0e5 100644
--- a/lib/makeWebpackConfig.js
+++ b/lib/makeWebpackConfig.js
@@ -141,6 +141,10 @@ module.exports = async (playroomConfig, options) => {
           include: path.dirname(require.resolve('codemirror/package.json')),
           use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')],
         },
+        {
+          test: /\.png$/i,
+          type: 'asset/resource',
+        },
       ],
     },
     optimization: {
@@ -163,7 +167,7 @@ module.exports = async (playroomConfig, options) => {
         chunksSortMode: 'none',
         chunks: ['index'],
         filename: 'index.html',
-        favicon: 'images/favicon-inverted.png',
+        favicon: 'images/favicon.png',
         base: playroomConfig.baseUrl,
       }),
       new HtmlWebpackPlugin({
diff --git a/src/index.js b/src/index.js
index 9b0f5a8c..4bd28845 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,6 +2,8 @@ import { renderElement } from './render';
 import Playroom from './Playroom/Playroom';
 import { StoreProvider } from './StoreContext/StoreContext';
 import playroomConfig from './config';
+import faviconPath from '../images/favicon.png';
+import faviconInvertedPath from '../images/favicon-inverted.png';
 
 const polyfillIntersectionObserver = () =>
   typeof window.IntersectionObserver !== 'undefined'
@@ -14,6 +16,15 @@ polyfillIntersectionObserver().then(() => {
   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;
+
+  if (selectedElement) {
+    selectedElement.setAttribute('href', favicon);
+  }
+
   const renderPlayroom = ({
     themes = require('./themes'),
     components = require('./components'),