Search…

X3 Photo Gallery Support Forums

Search…
 
tbp
Experienced
Topic Author
Posts: 42
Joined: 12 Apr 2020, 09:19

favicon for dark mode

17 Feb 2021, 02:28

Hi Karl

I'm currently playing around with my favicon. I usually use dark mode whenever possible and created my favicon to match with browsers in dark mode. Unfortunately the icon does not look good in "normal" mode, as I use a white color as foreground color and a ransparent background.

Is there a simple way in X3 or via CSS/JS to load a special favicon for dark mode browsers and another one for non dark mode browsers?

Thanks, 
Tom
  
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: favicon for dark mode

17 Feb 2021, 04:45

The FAVICON is not part of a website's design and cannot be "changed" by CSS. It's just a <link> tag in the document head, telling the browser where to find the icon.
Code
<link rel="icon" href="favicon.png">
You might be able to hack it for some modern browsers that are able to detect "prefers-color-scheme: dark" via Javascript, although it only works browsers that also update the favicon after changing the source. Ref: https://stackoverflow.com/questions/551 ... nt-favicon

You can add this to Settings > Custom > Custom Javascript:
Code
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.querySelector('[rel="icon"]').href = '/content/custom/favicon/DARK-favicon.png';
}
I think it will work in Chrome, Firefox, Edge, but not Safari or Explorer.
 
tbp
Experienced
Topic Author
Posts: 42
Joined: 12 Apr 2020, 09:19

Re: favicon for dark mode

17 Feb 2021, 11:34

Thanks, Karl.

I just uploaded two png files into the favicon folder:
favicon-v2.png -> for light mode
favicon-dark-v2.png -> for dark mode

Unfortunately I always get the dark file, even if I'm on a system without dark mode.

Do you have any idea?


EDIT:

I adjusted the script as follows and renamed the png's:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme:dark)').matches) 
{
  document.querySelector('[rel="icon"]').href = '/content/custom/favicon/favicon-dark.png';
} else {
  document.querySelector('[rel="icon"]').href = '/content/custom/favicon/favicon-light.png';
}

Now the correct favicon is loaded.



Thanks,
Tom
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: favicon for dark mode

17 Feb 2021, 23:26

You would only need to replace the icon from the one that is being showed by default. Likely X3 was showing the dark icon by default (first icon in folder), and then obviously it wouldn't make much difference when replacing dark icon with dark icon. Your solution works fine, although I would assume you could reduce it to the following:
Code
if (window.matchMedia && !window.matchMedia('(prefers-color-scheme:dark)').matches) 
  document.querySelector('[rel="icon"]').href = '/content/custom/favicon/favicon-light.png';
}
In the above, the default "dark" icon is replaced with "light" icon, if the color scheme is NOT set to dark.