Using both dark and light mode

I am in the early stages of building an app using Keen's Laravel Metronic 8 template. My app is configured with the Demo1 layout, running version 8.0.35.

In the Laravel Metronic 8 sample app at https://preview.keenthemes.com/metronic8/laravel/login?demo=demo1 , I can toggle back and forth between light and dark modes.

Is this feature feasible to use in a production environment, or is it just in your sample app to show the different options you can choose?

The toggle switch doesn't work in my app. It looks like the dark mode styles are not being copied to the public directory via webpack. I see in the documentation that there is a build option to build for dark mode.

If I run "npm run build --dark-mode", will that only include the dark mode styles?

Is there a way to include both light and dark mode styles, and successfully enable the user to set it to their choice, or would that result in an app that is a nightmare to build and maintain?

Also, when I click the toggle switch from http://my-app.local/dashboard, it just redirects me to /index. Not sure why that is happening, but it appears to be a problem in the theme()->getPageUrl() method.

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 (5)

Thank you for your interest in Metronic happy

npm run build will generate normal style.
npm run build --dark-mode will generate both normal and dark mode style.

The dark mode feature was for the demo and may be used in the production. Since you have to pass the query "mode" in the URL to enable the dark mode, you have to customize it to keep it in the session or cookie to keep it enabled.

isDarkMode() function in app/Core/Adapters/Theme.php is used to determine which style to be loaded. https://ibb.co/6y68TB1

Could you please send the screenshot of which toggle do you mean?

Thanks

Hi,

I'm trying to change the getCurrentMode() function in app/Core/Adapters/Theme.php, to get the current user's preferred mode from the database (or session), but trying to access either of them results in errors. Any suggestions?

Hi,

npm run build --dark-mode will generate additional dark mode styles and you can enable both dark and light mode in your application.

You can refer to the Laravel Dark Mode documentation.

Regards

I’m not sure how to add a photo here, but it’s the toggle switch at the bottom of the pop up menu you get when you click on the user avatar.

Please use https://imgur.com/ for your screenshots and just place the image here using IMG html tag.

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