In my app, I am trying to provide the ability to change themes dynamically. I have two themes - light and dark.
The app is initialized with the light theme. See below (css.global('body', {...}):
@observer
class App extends Component {
render() {
const { paletteType } = rootStore.appStore;
const palette = {
primary: {
main: blue[500]
},
secondary: {
main: pink.A400
},
error: {
main: red.A400
},
type: paletteType,
// Initialize background to white (default is #fafafa)
// This allows pictures with white background to blend in.
background: {
default: paletteType === 'light' ? '#ffffff' : '#303030'
}
};
const theme = createMuiTheme({ palette });
css.global('body', {
height: '100%',
margin: 0,
background: theme.palette.background.default,
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.fontSize,
color: theme.palette.text.primary,
// Helps fonts on OSX look more consistent with other systems
WebkitFontSmoothing: 'antialiased',
MozOsxFontSmoothing: 'grayscale',
// Use momentum-based scrolling on iOS devices
WebkitOverflowScrolling: 'touch'
});
return (
<ThemeProvider theme={theme}>
<Provider rootStore={rootStore}>
<Shell />
</Provider>
</ThemeProvider>
);
}
}
export default App;
The user can toggle the theme by clicking a button. When this button is clicked, the paletteType changes to dark and the app is re-rendered with the new theme. This works just fine.
The trouble starts when I click the button again to toggle the theme back to light. I can see that the palette is recomputed with the light theme, however when this theme is applied to the body (css.global('body', {...}), the body never changes! In Chrome inspector, I can see to newly computed themes applied to the body - first the light theme then the dark. However any further changes to the styles are not applied to the body.
In my app, I am trying to provide the ability to change themes dynamically. I have two themes -
light
anddark
.css.global('body', {...}
):The user can toggle the theme by clicking a button. When this button is clicked, the
paletteType
changes todark
and the app is re-rendered with the new theme. This works just fine.The trouble starts when I click the button again to toggle the theme back to
light
. I can see that the palette is recomputed with thelight
theme, however when this theme is applied to the body (css.global('body', {...}
), the body never changes! In Chrome inspector, I can see to newly computed themes applied to the body - first the light theme then the dark. However any further changes to the styles are not applied to the body.What am I missing?
You can see the full working code here: https://github.com/nareshbhatia/mobx-shop-glamorous