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:
// 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");
}
// 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);
}
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:
<!--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-->
data-theme-mode="light"
attribute to the HTML root element to set user defined theme mode instead of saving it in the browser storage.