The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro

how to change the sidebar color in react metronic demo1


hi,
i am using metronic react demo 1 theme, when i am changing the theme mode to dark or light the sidebar color is every time black, i want sidebar color to white when thememode is light, and dark the sidebar color if mode is dark, and one more thing when user first time login then the default mode is light but when we check on theme switcher button the mode is selected to dark i tested that thing on your website as well on incognito mode.


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

Deleted comment
Deleted comment
Deleted comment
Deleted comment
Deleted comment
Deleted comment
Deleted comment
 
Deleted comment
 
Deleted comment
Deleted comment
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment

Hi,

Thank you for reaching out to us.

We are using dark sidebar layout by default which has dark sidebar in light and dark modes. The light sidebar layout changes the sidebar color based on the selected mode, to switch to light sidebar layout you can change layoutType property to light-sidebar in src/_metronic/layout/core/_LayoutConfig.ts then clear your localStorage and hard refresh the page to use an updated configuration.

By default, we take the user system selected mode, you can find script setting the mode from prefers-color-scheme in index.html.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


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  :(
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.