locate this section of code in your app.js file, which in appgyver web build is app(some long sting).js, under next/static/chunks,pages:
function d(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=[a.default.createElement("meta",{charSet:"utf-8"})];return e||t.push(a.default.createElement("meta",{name:"viewport",content:"width=device-width"})),t}
add new items to it like this:
function d() {
var e = arguments.length > 0 && void 0 !== arguments[0] && arguments[0];
var t = [
a.default.createElement("meta", { charSet: "utf-8" }),
a.default.createElement("meta", { name: "viewport", content: "width=device-width" }),
a.default.createElement("meta", { name: "theme-color", content: "#000000" }) // Add this line for the theme color
];
return e || t.push(), t;
}
in this case i added the “theme-color”, which makes the browser on chrome and a few other browsers change to the color you specify. you can also create a script to update the theme when your app changes from dark mode to light mode, and many other things.
which if you only add it to the html pages, this script overwrites it. it is in this manner they try to suppress you from being able to build custom products.
you can make the theme-color update so that it will be light for a user who uses light theme and dark for a user wo uses dark theme by setting the value of your darkMode variable to local storage when changed and creating a js file in the root of your web build, for example themeScript.js and include this code
document.addEventListener('DOMContentLoaded', function() {
function updateThemeColor(color) {
var metaTag = document.querySelector('meta[name="theme-color"]');
if (metaTag) {
metaTag.setAttribute('content', color);
}
}
function handleDarkMode() {
var darkMode = localStorage.getItem('darkMode');
if (darkMode === 'true') {
updateThemeColor('#000000');
console.log('darkMode'); // Set the color when dark mode is enabled
} else {
updateThemeColor('#d3daf0');
console.log('lightMode'); // Set the color when dark mode is disabled
}
}
handleDarkMode();
window.addEventListener('storage', function(event) {
if (event.storageArea === localStorage && event.key === 'darkMode') {
handleDarkMode();
}
});
});
If you want it to update immediately you have to get the script into the next.js react dom. i will play with it and see if I can do it later