Theme UI at server-side issue
Hi all.
I'm aware of the new dynamic UI theme management but there's a problem.
I could decide to persist my preferred UI theme at server side (i.e. on a DB table), so that next time I sign in the application my favourite theme is automagically restored (*even* if I'm logging in from a brand new device, i.e. a smartphone).
Steps are:
- log in for first time (theme is LIGHT)--> cookie kt_metronic_theme_mode_value is created (value='light')
- enter my personal profile and select DARK theme as my preferred theme
- log out
- log in again --> page is parsed server side and automatically a data-theme="dark" is appended to the main HTML tag (due to my profile's preference): note that this is happening at server-side *before* the page is served to the client!
- the JS script inside the index page (or the JS fragment inside KTThemeMode.init() inside scripts.bundle.js) read the cookie kt_metronic_theme_mode_value persisted (with 'light' value) and this override the data-theme="dark" on the "prepared" HTML page.
So the UI is initially dark (just a bunch of milliseconds), then turns to light (but I said that my favourite theme was dark
).By now I'm able to get the desired behaviour by switching the following lines:
// Class definition
var KTThemeMode = function () {
...
var getMode = function() {
var modeParam = getParamName("value");
var menuMode = getMenuMode();
if ( localStorage.getItem(modeParam) !== null ) {
return localStorage.getItem(modeParam);
}
if ( element.hasAttribute("data-theme") ) {
return element.getAttribute("data-theme");
}into:
// Class definition
var KTThemeMode = function () {
...
var getMode = function() {
var modeParam = getParamName("value");
var menuMode = getMenuMode();
if ( element.hasAttribute("data-theme") ) {
return element.getAttribute("data-theme");
}
if ( localStorage.getItem(modeParam) !== null ) {
return localStorage.getItem(modeParam);
}Obviously on metronic's next update there's a chance I will lose my changes.
Is there some other fix?
Thank you.
Replies (3)
I ran into a similar issue with the theme management, and after digging around, I found that switching the code logic worked for me too. It's a bit of a workaround, though, and you're right—future updates could override it. I was also looking for a permanent solution, like one for storing theme preferences in a way that the server would always prioritize it, even with new devices. While troubleshooting, I was browsing britshomegarden for some outdoor furniture ideas, and it made me realize how important it is for preferences to sync across devices seamlessly. Hopefully, a better solution comes up soon!
Hi,
Can you please replace KTThemeMode with this version and use the below theme mode init script:
<!--begin::Theme mode setup on page load-->
<script>
var defaultThemeMode = "light";
var themeMode;
if ( document.documentElement ) {
if ( document.documentElement.hasAttribute("data-theme-mode")) {
themeMode = document.documentElement.getAttribute("data-theme-mode");
} else {
if ( localStorage.getItem("data-theme") !== null ) {
themeMode = localStorage.getItem("data-theme");
} else {
themeMode = defaultThemeMode;
}
}
if (themeMode === "system") {
themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
document.documentElement.setAttribute("data-theme", themeMode);
}
</script>
<!--end::Theme mode setup on page load-->Then you can add
data-theme-mode="light" attribute to the HTML root element to set user defined theme mode instead of saving it in the browser storage.Regards.
Maybe you should consider a data-kt-preferred-theme (or data-kt-default-theme) to let the user specify what the default theme should be (in case there isn't any cookie) and use it inside KTThemeMode? It should work...
