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

Issue with Dark Mode and Theme Mode Switch


Issue with Dark Mode and Theme Mode Switch

Hi, I am using the Rails version of Metronic8 and have followed all of the documentation to get the template up and running successfully. However, I am running into an issue where I cannot set the template to use 'Dark mode' by default, nor does the Theme Mode Switch button appear on the top navbar.

I have set the following attributes in the `settings.yml` file:
KT_THEME_MODE_DEFAULT: 'dark'
KT_THEME_MODE_SWITCH_ENABLED: true

Reviewing the compiled HTML via Chrome Dev Tools, I can see that the HTML attribute `data-bs-theme="light"` is set on the HTML element, as well as the cookie 'data-bs-theme' is set to 'light'.

I'm not sure if there is another place that I am supposed to be setting these values so any help would be appreciated.

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)


Any suggestion? I got the same issue as well



To answer my own question, you need to replace

var defaultThemeMode = "light"

with

var defaultThemeMode = "<%= Rails.configuration.settings.KT_THEME_MODE_DEFAULT %>"

On app/views/partials/theme-mode/_init.html.erb


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