Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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!

user
Charles 2 years ago
Metronic Rails
2 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

user
Krizerg 1 year ago

Any suggestion? I got the same issue as well


user
Krizerg 1 year ago

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(