Implement dark/light switching

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({

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'),