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:
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:
into:
Obviously on metronic"s next update there"s a chance I will lose my changes.
Is there some other fix?
Thank you.
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 (2)
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...
Hi,
Can you please replace KTThemeMode with this version and use the below theme mode init script:
Then you can add
Regards.
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.
React Dev Vacancy
KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
