Theme-based favicon switching

[ClxUne09]

Hey, I was trying to add theme-based favicon switching for site, and I almost got it to work. However, I think Docusaurus doesn't have a built-in feature to change the favicon based on the theme. So, I made some changes to docusaurus.config.js to switch the favicon dynamically. This adds a script tag to the head of the site, which switches the favicon depending on the theme: <link rel="icon" href="/img/favicon-dark.ico"> when the theme is light, and <link rel="icon" href="/img/favicon-light.ico"> when it's dark. It updates the favicon without requiring a page reload, and it mostly works correctly.

However, the problem is that you can't remove the favicon field from docusaurus.config.js. This means that Docusaurus will still include something like <link data-rh="true" rel="icon" href="/img/favicon.ico">, which interferes with the theme-based switching. The dynamic favicon change still happens every time the theme switches, but because of the default favicon, the switch might not always work correctly—especially if you reload the page while the dark theme is active.

I think making some changes related to existed link tag and deleting the favicon field could fix this, but it seems like Docusaurus requires it to function properly. It would be great if someone could help add this feature correctly.
Changes made:
Created new file for light theme named favicon-dark.ico that placed it static/img
Created new file for dark theme named favicon-light.ico that placed it static/img
Changed docusaurus.config.js:

const path = require('path');

module.exports = {
  title: 'Oh My Posh',
  tagline: 'A prompt theme engine for any shell.',
  url: 'https://ohmyposh.dev',
  baseUrl: '/',
  favicon: 'img/favicon.ico', // Default favicon
  organizationName: 'jandedobbeleer',
  projectName: 'oh-my-posh',
  onBrokenLinks: 'ignore',
  plugins: [
    path.resolve(__dirname, 'plugins', 'appinsights'),
    'docusaurus-node-polyfills'
  ],
  stylesheets: [
    "https://rsms.me/inter/inter.css",
    "https://fonts.googleapis.com/css2?family=Fira+Code&display=swap"
  ],
  themeConfig: {
    colorMode: {
      defaultMode: 'light',
      disableSwitch: false,
      respectPrefersColorScheme: true,
    },
    prism: {
      additionalLanguages: ['powershell', 'lua', 'jsstacktrace', 'toml', 'json', 'yaml'],
    },
    navbar: {
      title: 'Oh My Posh',
      logo: {
        alt: 'Oh My Posh Logo',
        src: 'img/logo-dark.svg',
        srcDark: 'img/logo-light.svg',
      },
      items: [
        {
          to: 'docs',
          activeBasePath: 'docs',
          label: 'Docs',
          position: 'left',
        },
        {
          to: 'blog',
          label: 'Blog',
          position: 'left'
        },
        {
          href: 'https://github.com/sponsors/JanDeDobbeleer',
          label: 'Sponsor',
          position: 'left',
        },
        {
          href: 'https://swag.ohmyposh.dev',
          label: 'Swag',
          position: 'left',
        },
        {
          href: 'https://github.com/jandedobbeleer/oh-my-posh',
          className: 'header-github-link',
          'aria-label': 'GitHub repository',
          position: 'right',
        },
        {
          href: 'https://www.gitkraken.com/invite/nQmDPR9D',
          className: 'header-gk-link',
          'aria-label': 'GitKraken',
          position: 'right',
        },
        {
          href: 'https://discord.gg/n7E3DkXssv',
          className: 'header-discord-link',
          'aria-label': 'Discord',
          position: 'right',
        },
        {
          href: 'https://staging.bsky.app/profile/ohmyposh.dev',
          className: 'header-bluesky-link',
          'aria-label': 'Bluesky',
          position: 'right',
        }
      ],
    },
    footer: {
      style: 'dark',
      links: [
        {
          title: 'How to',
          items: [
            {
              label: 'Getting started',
              to: 'docs/',
            },
            {
              label: 'Contributing',
              to: 'docs/contributing/started',
            },
          ],
        },
        {
          title: 'Social',
          items: [
            {
              label: 'GitHub',
              href: 'https://github.com/jandedobbeleer/oh-my-posh',
            },
            {
              label: 'Discord',
              href: 'https://discord.gg/n7E3DkXssv',
            },
            {
              label: 'Bluesky',
              href: 'https://staging.bsky.app/profile/ohmyposh.dev',
            }
          ],
        },
        {
          title: 'Links',
          items: [
            {
              label: 'Sponsor',
              href: 'https://github.com/sponsors/JanDeDobbeleer',
            },
            {
              label: 'GitKraken',
              href: 'https://www.gitkraken.com/invite/nQmDPR9D',
            },
            {
              label: 'Docusaurus',
              href: 'https://github.com/facebook/docusaurus',
            },
            {
              label: 'Privacy',
              href: '/privacy',
            },
          ],
        },
      ],
      copyright: `Copyright © ${new Date().getFullYear()} <a href='https://github.com/sponsors/JanDeDobbeleer' target='_blank'>Jan De Dobbeleer</a> and <a href='/docs/contributors'>contributors</a>.`,
    },
    announcementBar: {
      id: 'support_us',
      content:
        'If you\'re enjoying Oh My Posh, consider becoming a <a target="_blank" rel="noopener noreferrer" href="https://github.com/sponsors/JanDeDobbeleer">sponsor</a> to keep the project going strong 💪',
      backgroundColor: '#2c7ae0',
      textColor: '#ffffff',
      isCloseable: false,
    },
    appInsights: {
      instrumentationKey: '51741aa7-e087-4e80-b7b0-0863d467462a',
    },
    algolia: {
      appId: 'XIR4RB3TM1',
      apiKey: '15c5f4340520612ed98fe21d15882029',
      indexName: 'ohmyposh',
    },
  },
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          editUrl: 'https://github.com/jandedobbeleer/oh-my-posh/edit/main/website/',
        },
        theme: {
          customCss: [
            require.resolve('./src/css/prism-rose-pine-moon.css'),
            require.resolve('./src/css/custom.css')
          ],
        },
        blog: {
          onInlineAuthors: 'ignore'
        },
      },
    ],
  ],
  headTags: [
    {
      tagName: 'script',
      attributes: {
        type: 'text/javascript',
      },
      innerHTML: `
        (function() {
          const darkIcon = '/img/favicon-light.ico';
          const lightIcon = '/img/favicon-dark.ico';
          const link = document.querySelector('link[rel="icon"]') || document.createElement('link');
          link.rel = 'icon';
          document.head.appendChild(link);
          
          function updateFavicon() {
            const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
            link.href = isDarkMode ? darkIcon : lightIcon;
          }

          updateFavicon();
          window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateFavicon);
        })();
      `,
    },
  ],
};

[JanDeDobbeleer]

@ClxUne09 if we change this to an svg, we can use a built-in feature. And truth be told, this is a docusaurus feature more than an oh-my-posh one.