Make Title Bar of PWA version match Supernotes Theme

Feature Requests
1

I know that it’s possible for PWA to change the color of the browser rendered Title Bar of the window. I think it would be great small visual quality of life change for those stuck to being able to use only PWA on work devices, or for anyone who prefers PWA for other reasons (browser extensions etc.).

image
image1606×793 21.5 KB

Cheers!

1 Like
2

I’m not experiencing this issue with Supernotes as I use the desktop app, but I have encountered a similar problem while using PWAs elsewhere. At that time, I configured a code injector extension to automatically execute the following code every time that site loaded. Although this is not a fundamental solution, this provided a satisfactory result.

const changeColor = (toDark) => {
    let color = "#f3f3f3";
    if (toDark) {
        color = "#131313";
    }

    let elem = document.querySelector("meta[name=theme-color]");
    if (!elem) {
        elem = document.createElement("meta");
        elem.name = "theme-color";
        elem.content = color;
        document.head.appendChild(elem);
    } else {
        elem.content = color;
    }
};

changeColor(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    changeColor(e.matches);
});

Note that this code changes the title bar color based on the browser theme settings, not Supernotes theme.

Also, it would be better if there was official support for meta theme tag!

2 Likes