import React, { Component } from 'react'; import { render } from 'react-dom'; import glamorous, { ThemeProvider } from 'glamorous'; // our main theme object const theme = { main: { color: 'red' }, }; // our secondary theme object const secondaryTheme = { main: { color: 'blue' }, }; // a themed component const Title = glamorous.h1(({ theme }) => ({ color: theme.main.color, })); // use <ThemeProvider> to pass theme down the tree const Basic = ({ theme }) => <ThemeProvider theme={theme}> <Title>Hello Basic! ; // it is possible to nest themes // inner themes will be merged with outers const Merging = ({ theme, secondaryTheme }) =>

Hello Outer Merging! {/* this will be blue */} Hello Inner Merging!

; // to override a theme, just pass a theme prop to a glamorous component // the component will ignore any surrounding theme, applying the one passed directly via props const PropOverride = ({ theme }) => {/* this will be green */} Hello Override! ; class App extends Component { state = { theme: { main: { color: 'red' } }, secondaryTheme: { main: { color: 'blue' } }, }; swapThemes = () => { this.setState(state => ({ theme: state.secondaryTheme, secondaryTheme: state.theme, })); }; render() { const { theme, secondaryTheme } = this.state; return (

Themeing in glamorous!

Click any text to swap the theme...

); } } render(, document.body);

glamorous themeing

This is a demo of how to use themes with glamorous