It's another week and we're going to, once again, be looking at MaterialSwitch
, hopefully it's not getting boring yet. I'm going to add some themeing, using styled-components, that allows the app to pull from an object of presets but also make one off changes when they're needed.
Here's what we're going to be making. I've switched over to codesandbox, from jsFiddle, in order to have multiple files and have it closer to a real dev experience.
Theme file
In the theme file, called interface/theme.js
we have a couple of functions and the theme object.
The theme object is very simple for this project but it can get more and more complicated as you expand your theme. This is our theme object.
export const theme = {
toggle: {
active: "#00897B",
inactive: "#bdbdbd",
shadow: "0 0 8px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.4)"
},
general: {
typography: {
fontFamily: '"Open Sans", "Arial"'
},
timingFunction: {
easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)"
}
}
};
There are two functions both are used for modifying the theme and making that process as easy as possible. Only one is exported for use though. Let's take a look.
// loop through all levels of an object and update theme accordingly
function _deepSetObject(newTheme, originalTheme) {
let combinedTheme = Object.assign({}, originalTheme);
for (let key of Object.keys(newTheme)) {
if (typeof newTheme[key] === "object" && !Array.isArray(newTheme[key])) {
combinedTheme[key] = _deepSetObject(newTheme[key], combinedTheme[key]);
} else {
combinedTheme[key] = newTheme[key];
}
}
return combinedTheme;
}
// Function to get full theme with modifications
const themeModify = newTheme => {
if (!newTheme || typeof newTheme !== "object" || Array.isArray(newTheme))
return theme;
return _deepSetObject(newTheme, theme);
};
export default themeModify;
_deepSetObject
This function simply goes through our object and updates the theme accordingly. This way we can send only the parts of the theme object we want to change.
themeModify
This function takes a new theme object and uses _deepSetObject
to generate a theme object to return. If it does not get fed an object to start with it will return the original theme with no modifications.
Changes to MaterialSwitch
We're going to have to make some changes to MaterialSwitch
now that we're using styled-components, for instance all our CSS is now in the JS file.
Imports
Our imports now include styled
and ThemeProvider
from styled-components
, I'll show you how they're used soon, and also our themeModify
, which we exported from our theme.
import React from "react";
import styled, { ThemeProvider } from "styled-components";
import themeModify from "./theme";
styled
styled
lets us create a standard HTMLElement
and attach some CSS to it. Generally it's a good idea to create a wrapper div or, as in our case, a different wrapper element. As we already had a label as our outer most element I used styled
to remake that.
const Label = styled.label`
/* styles go here */
`
As you may have noticed we saved the output of styled
to Label
and that is now out replacement label element. Like so,
<Label>
<!-- HTML goes here -->
<Label>
The styles that we write inside styled
are like Sass which is quite nice as it allows us to write our CSS in a more modern manor.
Now let's look at how we use items from our theme object in styled
const Label = styled.label`
display: inline-flex;
font-family: ${props => props.theme.general.typography.fontFamily};
align-items: center;
margin: 5px 0;
& span {
position: relative;
cursor: pointer;
/* rest of styles */
}
`
Thank to template literals we simply have to select the layer of our object. For toggle active colour we'd have a slightly different path but it's the same method.
${props => props.theme.toggle.active};
JSX
Let's look at the HTML
like part of the component. Not much has changed from the last iteration we've added a ThemeProvider
element as a wrapper around the whole thing and we've changed our label
component to our new styled
versions called Label
.
<ThemeProvider theme={themeModify(props.theme)}>
<Label>
<input
readOnly={readOnly}
disabled={disabled}
defaultChecked={defaultChecked}
onChange={changeHandler}
type="checkbox"
/>
<span />
{children}
</Label>
</ThemeProvider>
You'll notice our themeModify
function is now being used, we use it to feed out theme, modified or otherwise, into the ThemeProvider
.
Result
That was a lot of code but I think it's worth it in the long run. Let's look at how we can used this code now.
export default function App() {
const magentaTheme = {
toggle: {
active: "#FF00FF",
inactive: "#bb9cbb"
}
};
return (
<div className="App">
<MaterialSwitch>Default theme</MaterialSwitch>
<MaterialSwitch theme={magentaTheme}>Custom theme</MaterialSwitch>
</div>
);
}
This is the code for the screen you saw in the demo, at the top of the post. Two elements, one using the default theme and one with a slightly variance. We can attach a theme object with the same structure as our main theme, all the parts missing are filled in, to the theme property.
This is very powerful as a theme object can contain every aspect of your program. Using this method it is even possible to load themes from a database, update a theme based on a local text input and a whole host of other things. It's very exciting.
Signing off
Thank you for reading I hope you got something out of it, I certainly did. Feel free to leave question, corrections or anything else in the comments down below.
Thanks again ๐ฆ๐ฆ๐โค๏ธ๐งก๐๐๐ค๐ง
Top comments (0)