The New Way to Build! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Learn More
Light
Dark
System
Ask  Question

Dark and Light Mode Toggle React Demo1


Hi,

Is there any way to toggle between dark-mode and light-mode? The same with the HTML version? I'm planning on creating a switch where a user can switch between light and dark mode without having to refresh the page in React.


user
Paolo Nikko 4 years ago
Metronic React
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
Carmelo D 4 years ago

Hi,

You can setup dark mode for the React version following the doc: https://preview.keenthemes.com/metronic8/react/demo1-docs/docs/dark-mode.
We don't have a runtime switcher between light/dark modes.

Regards,
Keenthemes support


user
Carmelo D 4 years ago

You can try to import styles together with custom CSS classes, smth like:

.dark-one {
import './_metronic/assets/sass/style.dark.scss'
}

.light {
import './_metronic/assets/sass/style.scss'
}


And switch these cssClasses in your body tag.
Try this, maybe it will help you.

Regards,
Keenthemes support


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