Themes

[spen]

Let's set up theming with styled components so we can easily try out and develop new looks and maybe let the user choose their theme.

[SandyWyper]

Cool. How will this work in each component? if (context.theme === "light") component.style = light - something like that in every component? In sandywyper.dev i use CSS variables, and when you toggle the dark mode switch, JavaScript is used to change out those variables. Also save the theme preference to local storage, and render block on first load to check for a preference, this stops a flash of one colour scheme before local storage is checked. That could be purely a SSG issue though. Perhaps if you use styled components that wouldn't be required.

[spen]

Check out the link to the docs page above, we'd have access via props in any styled component, like so:

const Button = styled.button`
  color: ${props => props.theme.fg};
  border: 2px solid ${props => props.theme.fg};
  background: ${props => props.theme.bg};
  ...

In a previous project, I've made a utility function that cuts out a bit of the boilerplate, making it a bit more neat and expressive:

const AppContainer = styled( Flex )`
	background: ${ getThemeStyle( 'background' ) };
	min-height: 100vh;
	font-family: ${ getThemeStyle( 'typography.main.family' ) };
	overflow: scroll;
`;

[SandyWyper]

Funky. Sorry, I didn't read the link first time around. Looks good. A good way of staying in the JavaScript world. Probably ins and outs of both methods. Really keen to get involved with styled-components to try it out.