Get 2024 Templates Mega Bundle!14 Bootstrap, 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)


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


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.


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  :(