itwinUi-layout ThemeButton

[Paolo-lab]

Hello everyone good morning, I'm trying to use ITwinUi-layouts and I would like to add the bottom button to change the theme as in the examples, I attach a small photo, I found the repository on github, and the ThemeButton and the ThemeContext , but I don't it is clear where I have to insert it, I tried to insert it in the "<PageLayout.ToolsArea>" but I get a context error

thanks for the precious help

[mayank99]

That theme switcher is not part of the layout. If you need it like that, you will have to use your own CSS with position: fixed.

However, a better place for the theme switcher would be in the Header, either next to the notifications icon, or somewhere inside the dropdown-menu that opens on clicking the three dots ⠇.

As for how to implement the actual theme switcher:

1. you are expected to use <ThemeProvider> at the top of your tree.
2. you need to pass it a theme prop. You can store its value anywhere in your global state.
3. inside your theme button, read/write the global theme state.

[r100-stack]

@Paolo-lab, to add onto the above answer, you can see more info on our documentation website's theming section.

If this answers your question, kindly select "mark as answer" on the above answer. Else, feel free to follow up if it is still not working. We'd be happy to help!