Change theme like Fabric Web ( Default / Dark) - office-ui-fabric

Question

In the documentation page of fabric, now each example component have a change theme funcionality
ie: example
enter image description here
How can I achive this funcionality. I have 2 themes (created in) and I want to switch betwen thems

Answer 1

Here is my preferred way, using React Context.
import React from 'react';
import { Fabric, Customizer } from '#fluentui/react';
import { useLocalStorage } from 'react-use';
// Setup Theme Context and create hooks
import {
DefaultCustomizations,
DarkCustomizations
} from '#uifabric/theme-samples';
export const ThemeList = {
light: DefaultCustomizations,
dark: DarkCustomizations
};
export const ThemeContext = React.createContext({
theme: 'light',
changeTheme: name => {}
});
const ThemeWrapper = ({ children }) => {
return (
<ThemeContext.Consumer>
{({ theme }) => (
<Customizer {...ThemeList[theme]}>
<Fabric>{children}</Fabric>
</Customizer>
)}
</ThemeContext.Consumer>
);
};
export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useLocalStorage('theme', 'dark');
const changeTheme = name => ThemeList[name] && setTheme(name);
const value = { theme, changeTheme };
return (
<ThemeContext.Provider value={value}>
<ThemeWrapper>{children}</ThemeWrapper>
</ThemeContext.Provider>
);
};
export const useTheme = () => React.useContext(ThemeContext);
// Now demo how to use it
export function App() {
const { theme, changeTheme } = useTheme();
return (
<button onClick={() => changeTheme('dark')}>
Switch to dark
</button>
);
}
import ReactDOM from 'react-dom';
ReactDOM.render(
<ThemeProvider>
<App />
</ThemeProvider>,
document.getElementById('root')
);
Note to moderator: Sorry that this answer was originally a duplicate. I deleted the duplicate.