search

jantimon / favicons-webpack-plugin

Let webpack generate all your favicons and icons for you
MIT License
1.2k stars 211 forks source link

Dark Mode #359

Open liamcarter111 opened 4 months ago

liamcarter111 commented 4 months ago

Is it possible to support define different inputs for dark/light mode and the output injects the relivant prefers-color-scheme media attribute

See here https://joyofcode.xyz/dark-mode-favicon

guidev commented 3 weeks ago

This would be a fantastic addition!

I suggest introducing a logoDark parameter to accommodate dark mode, which could be implemented like this:

const FaviconsWebpackPlugin = require('favicons-webpack-plugin');

plugins: [
  new FaviconsWebpackPlugin({
    logo: './src/logo.png',
    logoDark: './src/logo_dark.png',
  }),
];

With this change, the generated HTML would be updated from:

<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">

to:

<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png" media="(prefers-color-scheme: light)">

<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-dark-16x16.png" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-dark-32x32.png" media="(prefers-color-scheme: dark)">

This approach would ensure that we support dark mode effectively, with coverage across 97% of browsers according to Can I use.