Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

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:

  1. log in for first time (theme is LIGHT)--> cookie kt_metronic_theme_mode_value is created (value='light')
  2. enter my personal profile and select DARK theme as my preferred theme
  3. log out
  4. 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!
  5. 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 sad ).

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.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


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...


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(