Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

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