A Coding Blog Bitcoin Story #6: Redesign, Themes, and deciding against <Context>

6 min readNov 1, 2019

What do you think of the redesign? I hope you like it — I know I do for a variety of reasons:

The color scheme and layout are visually appealing.
The borders add depth to enhance the design.
Having the Navigation bar on the left side, instead of the top, opened up vertical space so the Dice Den and Scorecard could stack on top of each other without requiring scrolling. Moving ‘Overall Scores’ to its own card also helped with that.
The “Roll Dice” and “Take Score” buttons are closer together now, which makes for a better user experience, since “Roll Dice” is always clicked immediately after “Take Score.”

With this redesign, the entire user experience has improved, and if there is anything I’ve learned while working in the business world, there’s nothing more important than “delighting the customer.” If you want a repeat customer, you better make sure they enjoy their interaction every step of the way. That was what I aimed to do here with the visual enhancements, added instructions, and improved layout format. Hopefully you feel the same.

Onwards from the redesign

After completing the redesign, I started work on adding themes (ex. dark/light mode) to the application. This has been something I’ve wanted to learn for quite some time. We were going to add them to the prior project, but it was low on the priority list, so we never ended up getting around to it. But the desire to learn it has remained, and the time seemed appropriate to give it a shot.

I started by researching possible ways to go about it. I read through a handful of “how to” blog posts, and thought about using the “styled-components” NPM package, but eventually I found my way back to React’s <Context> API documentation (found here), and decided it would be more beneficial to learn this instead.

So I did. I added my Context object (ThemeContext = React.createContext(THEME)) and a theme object that contained the variables, then imported it into my MainPageContainer. From there, I added a “theme state” to the state constructor, and a toggleTheme function that would trigger a change in theme state. I wrapped the <ThemeContext.Provider> around the <MainPageContainer> component with the value of “this.state.theme,” and then tested it out by adding the <ThemeContext.Consumer> in my Nav bar. With the first theme, I kept my standard colors, and with the second theme, I added an awful looking green to make sure it worked.

After wrapping <ThemeContext.Consumer> around the returned portion of the <Nav> component, and adding the “theme” function as a child to render the proper theme based upon the theme value, I had the code all set up. From there, I just needed to add {theme.background} as a property in the proper div’s className property.

Once that update was made, I toggled the different theme, and saw that nasty green color I actually wanted to see. It was a success! I integrated and understood React’s Context API.

After making the changes to the Nav, I proceeded to add the theme to the modals, but here is where I ran into a problem. Because of the way conditionally rendered text was passed into the next component, it made passing in the theme properties difficult. I would need to spend some time refactoring the component in order to make it work.

But after sleeping on this problem, I decided I wanted to try something else. After all, I learned the Context API already. Adding the <ThemeContext.Consumer> code to other components wasn’t going to add to my learning. What would be more challenging was toggling it without the higher order component, by passing the theme around as props.

So that next morning I tested it out, and sure enough, it worked. After testing it out on a few more components, I removed the Context-based code, and swapped it out with some props-based code.

And that brings us to the screenshot walk-through.

Screenshot Walk-through

To start, I created and exported a themes object into my <MainPageContainer>. This object contains various styles and backgrounds for each particular theme type. In the screenshot below, you’ll see there are two themes. One called listoka, the other called matador. They are then passed into the MainPageContainer as “themes.”

Yes, I spelt grey wrong… Because it should be gray ;)

Importing theme object into <MainPageContainer>

From there, I included a theme, and if you take a look at the highlighted portion, you’ll see that themes.listoka is the default theme type within the state.

In the same screenshot, you’ll also see the toggleTheme() function. This function includes the un-noteworthy event parameter, and the very noteworthy themeType parameter. The themeType parameter is a string labeled ‘matador,’ ‘listoka,’ or ‘light.’ Depending on which, the updatedTheme variables turns into that particular theme, and then the “theme state” is set with it.

The themes themselves are “toggle-able” on the click of a div located in the Navbar, as shown below.

We’ve got the functionality covered, so now we need an example of how the code looks with it. In the screenshot below, you’ll find the <MainPage> component. Two lines after the <MainPage> const, you’ll see the code “let { theme } = props”. I included this so whenever I use ‘theme’ within the component, I can simply use theme.background instead of props.theme.background.

You’ll see that I pass {theme} into the <GameEndingModal>, and I use the ${theme.background} template literal within the div at the bottom of the screenshot, which contains the `w-full flex` className properties. Perhaps that’s not a good enough example of themes in use, so I’ll include an example below that really shows the theme.properties in action.

Here, you’ll see lots of template literals with ${theme.specialBorder}, or ${theme.specialText}, or ${theme.standardText}. So long as you pass them in and the theme object contains the same properties, they will change on command like magic.

Recap

It’s a pretty cool feature, and it wasn’t very difficult to do. It was just a little tedious, but nothing unmanageable. It was actually more difficult trying to find a light mode that was visually appealing. Unfortunately, I wasn’t successful, as you’ll see soon enough.

With this code, I can add any number of themes to a website at the click of a div, and I find that pretty neat. It also makes playing around and testing new color schemes quite simple, so it was definitely worth the time in my eyes.

And now, for the other two theme designs: “matador” and “light”