Favicon for Light and Dark Mode in Nuxt #favicon #html #nuxt #vue

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
    '@nuxt/content',
    '@nuxtjs/google-fonts'
  ],
  googleFonts: {
    families: {
      Inter: [300, 400, 500, 600, 700],
      Poppins: [300, 400, 500, 600, 700, 800]
    },
    display: 'swap'
  },
  app: {
    head: {
      link: [
        // Default favicon for browsers that don't support media queries
        { rel: 'icon', type: 'image/png', href: '/images/favicon-light-mode.png' },
        // Light mode favicon
        {
          rel: 'icon',
          type: 'image/png',
          href: '/images/favicon-light-mode.png',
          media: '(prefers-color-scheme: light)'
        },
        // Dark mode favicon
        {
          rel: 'icon',
          type: 'image/png',
          href: '/images/favicon-dark-mode.png',
          media: '(prefers-color-scheme: dark)'
        }
      ],
      script: [
        // Script to dynamically update favicon based on color scheme
        {
          innerHTML: `
            (function() {
              const updateFavicon = () => {
                const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                const favicon = document.querySelector('link[rel="icon"]:not([media])');
                if (favicon) {
                  favicon.href = isDark ? '/images/favicon-dark-mode.png' : '/images/favicon-light-mode.png';
                }
              };

              // Initial update
              updateFavicon();

              // Listen for color scheme changes
              window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateFavicon);
            })();
          `,
          type: 'text/javascript'
        }
      ]
    }
  },
  devtools: { enabled: true }
})