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

React demo 1 - theme sidebar issue


Hi,

I'm working on demo1 of Metronic (8.2.1).

I have noticed that on REACT, the sidebar does not change the theme, if you select new theme. Sidebar always stays on 'dark' theme and never changes.

That is not the case of HTML demo1. HTML demo works as expected (sidebar changes according to new theme).

How do I fix this? I've looked into theme provider and i'm a bit lost. I've tried changing dark-sidebar to light-sidebar in _LayoutConfig.ts, but then it's stuck to 'light' theme.

Is there a patch available that solves the issue of changing the sidebar according to theme?

Best,
Matej


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


Hi Lauris,

thank you for your reply.

As I've already mentioned in the question, the solution you have suggested does not work for me (I already tried it).

I would like to dynamically change the sidebar:
- when light theme is chosen, I'd like the sidebar to be light
- when dark theme is chosen, I'd like the sidebar to be dark

In order to do that, the sidebar theme should be settable from the code.

Should I raise the ticket somewhere else, via some other support, or is this the place to solve this issue?

Thanks and best,
Matej



Hi Matej,

The behavior you have described is how the light sidebar works. To view the configuration with values from the config, you can clear your local storage and hard refresh the page.

Alternatively, you can click on "Layout -> Light Sidebar" in the header menu.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi Lauris,

thank you - it works. I completely missed 'Layout' option in React demo.

I have noticed that combination Dark theme + Light sidebar does not work (both sidebar and theme are dark - sidebar does not turn light.).

Is that an expected behavior? It dosent bother me, I'm just curious.

Best,
Matej



Hi Matej,

In the dark sidebar layout, the sidebar remains dark in both light and dark modes. Meanwhile, in the light sidebar layout, the sidebar adjusts according to the selected theme mode.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi Matej,

Sorry for the late reply.

By default, the React version uses a dark sidebar layout which has a dark sidebar for both dark and light themes. If you prefer a white sidebar for the light theme and a dark sidebar for the dark theme, you can switch to the light sidebar layout.

To make this change, update the property in src/_metronic/layout/core/_LayoutConfig.ts.


layoutType: "light-sidebar",


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