Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

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


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