Editing article

Title

Summary

Content

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*fs8nbqkBTn8YITMj4IrzvQ.png" /></figure>I’ve been working on <a href="https://kevinrandles.com/">my portfolio website</a> this weekend, and finally implemented a feature I’ve been thinking about for a few weeks — multiple color themes! Inspired by a blog post I read recently (and encouraged by the fact that, as much as I like the color palette above, I’ve spent quite a few hours looking at it), adding themes seemed like a good way to get some practice using Javascript to manipulate CSS properties and add a little bit of flash to what is, for now, one of the best showcases of my skills.First things first, I updated my app’s CSS, replacing all of my color properties with CSS variables which I defined (for now) in a “body” selector.<figure><img alt="" src="https://cdn-images-1.medium.com/max/424/1*-3xADG7q6D37hEeTjfOEJQ.png" /></figure>With my colors all now nicely defined in one place, instead of 20 or 30 different places spread throughout my CSS, it was time to decide just how to implement this new feature. My initial thought was that I’d use React refs, grabbing the top level element of my App with a ref and setting style properties on it, but since I’m looking to set properties/variables that will apply document-wide, the solution turned out to be even simpler than that — <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/body">document.body</a>.Document.body returns the &lt;body&gt; node of the current document, allowing us to manipulate it with Javascript, giving us access to the style.setProperty() method, which takes two arguments — the name of the property to set, and the value to which we want to set it. To test this out, I added a componentDidMount() method to my page’s top-level component.<figure><img alt="" src="https://cdn-images-1.medium.com/max/579/1*f77cv-iFBpL63yKaMaTKkg.png" /></figure>…and, voila…<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WaH8J1M0nrQcDdZqR6Seqw.png" /></figure>Upon loading the page, the CSS variable setting the background color is changed to black, and I was pleasantly surprised to see it doesn’t look bad…needs work, but I like the combo of black with that shade of green.With a method for manipulating my CSS variables determined, I set about making my app able to change them with the click of a button. First, adding a few key/value pairs to my state (the theme colors will eventually be defined in another file, since they don’t really belong in the state, but this works for the moment) — the currently selected theme’s name, and the variables for my first two themes.<figure><img alt="" src="https://cdn-images-1.medium.com/max/443/1*fjVsn1tt7jblEluJIL1r7A.png" /></figure>Next, I wrote a function that iterates over the object that corresponds to the currently selected theme, and sets the CSS variables to their intended values.<figure><img alt="" src="https://cdn-images-1.medium.com/max/526/1*64-cIjj3JNNnXJhPxHntiw.png" /></figure>And another, that toggles the state back and forth between my two themes, depending on which is currently selected, and calls setTheme() to apply the newly changed theme.<figure><img alt="" src="https://cdn-images-1.medium.com/max/405/1*XX9q4oCm5444wDy2TTgFPQ.png" /></figure>This isn’t really the ideal way to go about it (calling setTheme should be done in ComponentDidUpdate()), but by this point I’ve been coding all day long and that can wait until tomorrow —time to find out if this works. A bit of messing about with my page’s footer to add a button with an onClick handler pointed to toggleTheme() and…success!I’ve got a minor bug to squash — for some reason, the button doesn’t change the theme the first time it’s clicked — and some refactoring to do, but I’m happy with the results so far and dinner calls. Not ready for deployment yet, but the code is committed and pushed to Github, check it out <a href="https://github.com/krandles/kevinrandles-dot-com">here</a>!<h3>Update!</h3>After a good night’s sleep and a few minutes of refactoring, I’m much happier with my work on this feature (bonus! the bug I mentioned above was fixed in the process). My lifecycle methods now looks like this:<figure><img alt="" src="https://cdn-images-1.medium.com/max/527/1*Y8twR59Iwi3pLNWm-1S4lQ.png" /></figure>The setTheme() function is called on initial render, and I use componentDidUpdate() to to check if currentTheme changed at every state change. If so, setTheme() is called to push the currently selected theme’s colors to the DOM. With setTheme() being called when necessary from the component’s lifecycle methods, I was able to refactor toggleTheme(), removing the callback from its calls to setState().<figure><img alt="" src="https://cdn-images-1.medium.com/max/405/1*HaYUSQr8d_bGv1xw4_DVOA.png" /></figure>Cleaner, clearer, and in line with the React way of doing things, the basic version of this feature is complete…now to come up with some more color palettes. My plan for this feature is for it to eventually select a random theme on page load, and implement a theme selector component instead of just a single clickable icon to switch themes….back to work.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=57957e39f0bf" width="1" height="1" alt="">

Author

Link

Published date

Image url

Feed url

Guid

Hidden blurb

--- !ruby/object:Feedjira::Parser::RSSEntry
published: 2018-07-16 01:31:38.000000000 Z
carlessian_info:
 news_filer_version: 2
 newspaper: Kevin Randles on Medium
 macro_region: Technology
entry_id: !ruby/object:Feedjira::Parser::GloballyUniqueIdentifier
 is_perma_link: 'false'
 guid: https://medium.com/p/57957e39f0bf
title: Adding Dynamic Themes to a React App Using CSS Variables
categories:
- javascript
- css
- react
content: <figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*fs8nbqkBTn8YITMj4IrzvQ.png"
 /></figure>I’ve been working on <a href="https://kevinrandles.com/">my portfolio
 website</a> this weekend, and finally implemented a feature I’ve been thinking about
 for a few weeks — multiple color themes! Inspired by a blog post I read recently
 (and encouraged by the fact that, as much as I like the color palette above, I’ve
 spent quite a few hours looking at it), adding themes seemed like a good way to
 get some practice using Javascript to manipulate CSS properties and add a little
 bit of flash to what is, for now, one of the best showcases of my skills.First
 things first, I updated my app’s CSS, replacing all of my color properties with
 CSS variables which I defined (for now) in a “body” selector.<figure><img alt=""
 src="https://cdn-images-1.medium.com/max/424/1*-3xADG7q6D37hEeTjfOEJQ.png" /></figure>With
 my colors all now nicely defined in one place, instead of 20 or 30 different places
 spread throughout my CSS, it was time to decide just how to implement this new feature.
 My initial thought was that I’d use React refs, grabbing the top level element of
 my App with a ref and setting style properties on it, but since I’m looking to set
 properties/variables that will apply document-wide, the solution turned out to be
 even simpler than that — <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/body">document.body</a>.Document.body
 returns the &lt;body&gt; node of the current document, allowing us to manipulate
 it with Javascript, giving us access to the style.setProperty() method, which takes
 two arguments — the name of the property to set, and the value to which we want
 to set it. To test this out, I added a componentDidMount() method to my page’s top-level
 component.<figure><img alt="" src="https://cdn-images-1.medium.com/max/579/1*f77cv-iFBpL63yKaMaTKkg.png"
 /></figure>…and, voila…<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WaH8J1M0nrQcDdZqR6Seqw.png"
 /></figure>Upon loading the page, the CSS variable setting the background color
 is changed to black, and I was pleasantly surprised to see it doesn’t look bad…needs
 work, but I like the combo of black with that shade of green.With a method
 for manipulating my CSS variables determined, I set about making my app able to
 change them with the click of a button. First, adding a few key/value pairs to my
 state (the theme colors will eventually be defined in another file, since they don’t
 really belong in the state, but this works for the moment) — the currently selected
 theme’s name, and the variables for my first two themes.<figure><img alt=""
 src="https://cdn-images-1.medium.com/max/443/1*fjVsn1tt7jblEluJIL1r7A.png" /></figure>Next,
 I wrote a function that iterates over the object that corresponds to the currently
 selected theme, and sets the CSS variables to their intended values.<figure><img
 alt="" src="https://cdn-images-1.medium.com/max/526/1*64-cIjj3JNNnXJhPxHntiw.png"
 /></figure>And another, that toggles the state back and forth between my two
 themes, depending on which is currently selected, and calls setTheme() to apply
 the newly changed theme.<figure><img alt="" src="https://cdn-images-1.medium.com/max/405/1*XX9q4oCm5444wDy2TTgFPQ.png"
 /></figure>This isn’t really the ideal way to go about it (calling setTheme should
 be done in ComponentDidUpdate()), but by this point I’ve been coding all day long
 and that can wait until tomorrow —time to find out if this works. A bit of messing
 about with my page’s footer to add a button with an onClick handler pointed to toggleTheme()
 and…success!I’ve got a minor bug to squash — for some reason, the button
 doesn’t change the theme the first time it’s clicked — and some refactoring to do,
 but I’m happy with the results so far and dinner calls. Not ready for deployment
 yet, but the code is committed and pushed to Github, check it out <a href="https://github.com/krandles/kevinrandles-dot-com">here</a>!<h3>Update!</h3>After
 a good night’s sleep and a few minutes of refactoring, I’m much happier with my
 work on this feature (bonus! the bug I mentioned above was fixed in the process).
 My lifecycle methods now looks like this:<figure><img alt="" src="https://cdn-images-1.medium.com/max/527/1*Y8twR59Iwi3pLNWm-1S4lQ.png"
 /></figure>The setTheme() function is called on initial render, and I use componentDidUpdate()
 to to check if currentTheme changed at every state change. If so, setTheme() is
 called to push the currently selected theme’s colors to the DOM. With setTheme()
 being called when necessary from the component’s lifecycle methods, I was able to
 refactor toggleTheme(), removing the callback from its calls to setState().<figure><img
 alt="" src="https://cdn-images-1.medium.com/max/405/1*HaYUSQr8d_bGv1xw4_DVOA.png"
 /></figure>Cleaner, clearer, and in line with the React way of doing things,
 the basic version of this feature is complete…now to come up with some more color
 palettes. My plan for this feature is for it to eventually select a random theme
 on page load, and implement a theme selector component instead of just a single
 clickable icon to switch themes….back to work.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=57957e39f0bf"
 width="1" height="1" alt="">
rss_fields:
- title
- url
- author
- categories
- published
- entry_id
- content
url: https://medium.com/@krandles/adding-dynamic-themes-to-a-react-app-using-css-variables-57957e39f0bf?source=rss-d451d084d34a------2
author: Kevin Randles

Language

Active

Ricc internal notes

Ricc source

Show this article Back to articles