Showing different favicons for light and dark schemes

[Santiago Botto]

Hi! This is a really simple thing to do that comes really handy when your default favicon is quite dark and gets lost on the browser tab when that sweet dark mode comes in.

 

For the client area:

In order to change the favicon according to the theme of the browser (light or dark), at your templates/$template/head.tpl file (maybe inside an overwrites folder if your theme uses them), replace the link tags used for the favicons (I'd love to be more specific but the code to replace varies from module to module) with this:

<link id="light-scheme-icon" rel="icon" type="image/png" href="/path/favicon.png">
<link id="dark-scheme-icon" rel="icon" type="image/png" href="/path/favicon-dark.png">
<script type="text/javascript">
    'use strict';
    function setupIcons() {
        const lightSchemeIcon = document.querySelector('link#light-scheme-icon');
        const darkSchemeIcon = document.querySelector('link#dark-scheme-icon');
        function setLight() {
            document.head.append(lightSchemeIcon);
            darkSchemeIcon.remove();
        }
        function setDark() {
            lightSchemeIcon.remove();
            document.head.append(darkSchemeIcon);
        }
        const matcher = window.matchMedia('(prefers-color-scheme:dark)');
        function onUpdate() {
            if (matcher.matches) {
                setDark();
            } else {
                setLight();
            }
        }
        matcher.addListener(onUpdate);
        onUpdate();
    }
    setupIcons();
</script>

Make sure to change the paths to your icons. I know some of you may want to have the correct list of the over 20 icon sizes browsers and such are using nowadays but, for us people looking to keep it simple, this works just fine.

 

For the admin area:

At the header.tpl of your theme (for Blend it's admin/templates/blend/header.tpl, replacing admin with your custom admin directory name), look for the following line of code:

<title>WHMCS - {$pagetitle}</title>

Note that you may have changed WHMCS to your company name.

Right above it, paste same code you added to the header.tpl of the client area.

 

Maybe this is just too simple it's overkill to be adding this to the community, but I just see it as something with a lot of appeal this days.

I hope this saves someone some time!

[brian!]

I would have thought that rather than editing templates, you should inject all of that code into the templates using clientareaheadoutput and adminareaheaderoutput hooks.