If I were to list my strengths, web design wouldn’t top the list. None the less, I like learning about it and know that I’ll continue to improve over time by chipping away.
One thing I’ve been struggling with since adding a dark mode to my site (I look forward to making this a much more pleasant experience soon), was how the mode was intended to interact with the global theme. And then what happens if you want variants for components?
I put together a CodeSandBox to play around with the concepts.
Because it’s such a simple single page, I can see how all of the pieces come together and interact. It’s also made clear why my coworker, Justin Connor, put together a library called styled-variants!
Dealing with variants can quickly become a hassle - particularly if you’re duplicating the logic between modes.
The full code is below.
import React from "react";
import "./styles.css";
import styled, { ThemeProvider } from "styled-components";
const theme = {
light: {
bg: "powderblue",
fs: "72px",
maxWidth: 1000
},
dark: {
bg: "red",
color: "white",
fs: "72px",
maxWidth: 1000
}
};
const buttonVariant = {
light: {
primary: {
boxShadowColor: "teal"
},
secondary: {
boxShadowColor: "grey"
}
},
dark: {
primary: {
boxShadowColor: "orange"
},
secondary: {
boxShadowColor: "orange"
}
}
};
const Title = styled.h1`
background-color: ${({ theme, mode }) => theme[mode].bg};
font-size: ${props => props.theme[props.mode].fs};
color: ${({ theme, mode }) => (mode === "dark" ? theme[mode].color : "")};
`;
const Button = styled.button`
box-shadow: 0.25rem 0.25rem
${({ theme, mode, variant }) => theme[mode][variant].boxShadowColor};
`;
const Wrapper = styled.div`
background-color: ${({ theme, mode }) => theme[mode].bg};
padding: 1rem;
`;
function App() {
const [mode, setMode] = React.useState("light");
function handleClick() {
const nextMode = mode === "light" ? "dark" : "light";
return setMode(nextMode);
}
return (
<ThemeProvider theme={theme}>
<Wrapper className="App" mode={mode}>
<Title mode={mode}>Hello CodeSandbox</Title>
<h2>The current mode is: {mode}</h2>
<Button
mode={mode}
variant={"primary"}
theme={buttonVariant}
onClick={handleClick}
>
Toggle Mode
</Button>
</Wrapper>
</ThemeProvider>
);
}
export default App;
Top comments (0)