Changing themes dynamically gets stuck after two changes

[nareshbhatia]

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.

What am I missing?

You can see the full working code here: https://github.com/nareshbhatia/mobx-shop-glamorous

[nareshbhatia]

Found a solution - thanks to @tikotzky. See paypal/glamorous#401