Dynamically Adding Themes through Iteration
We're going to use the
addBase function multiple times, once for each theme.
Our theme is an object containing multiple keys:
To be able to iterate over them, we're going to keep the
:root definition as is, but close the
addBase function around it.
0:00 Here, we're going to use addBase function multiple times, once for each theme. If we look at our theme, we can see that it's an object that has multiple keys, base, rainforest, etc.
0:11 To be able to iterate over them, we're going to keep this root definition as is, but we want to close this addBase function here, and its role is going to just define the root scope variables, and then for our three theme scopes here, let's reopen another addBase just so the syntax is correct and things don't break.
0:31 Now instead of doing these three declarations manually, we're going to iterate over the themes object. Here outside of the addBase -- let me scroll up a bit -- I will go Object.entries and grab our themes. Then we can use a simple forEach loop here, and Object.entries will give us both the key and the values of the object. Essentially, we want to use an addBase function for each theme.
1:17 We have access to the key, which is going to be base, rainforest, or candy, and then the value is going to be the object with the 50 to 900 shades.
1:47 Now we're generating the correct data, theme scopes, but we need to update the value to be the correct theme. Essentially, themes.base here can be replaced with the value, which is going to be one of these objects. Cross our fingers and save, and boom, everything is working again.
2:05 Once again, we're one step closer to accepting user-defined themes input. There's still hard-coded stuff in there, but we've just taken one step in the right direction.