Change text color with `chalk` and `gradient-string` inside `react-blessed`
The text in our terminal node app is a bit boring at the moment. This lessons introduces the chalk and gradient-string modules to bring a bit of color to the application. You could manually use ANSI escape codes to style text, but using a helper library like chalk or gradient-string makes the task much simpler.
Elijah Manor: [0:00] Here, we have the beginnings of our React terminal dashboard. If we run our application with npm start, you'll see a box displaying the date, time, and the current weather. However, at this point, things are pretty boring, other than the fancy ASCII art. Let's do something about that.
[0:18] We'll use a library called chalk to bring a bit of color to our application. You can actually add colors using ANSI escape codes, but the chalk library provides a much better API.
[0:30] Let's install chalk with npm install chalk. Then, we'll come back over to our today component, and import chalk from chalk. We'll scroll down to our box component where we're displaying the date, and we'll wrap the date with chalk.blue.
[0:51] Now, if we run our app again, our date will show up blue. Next, let's add a bit of color to our weather.
[1:00] In our weather format function, we'll wrap the temperature in chalk.yellow. Then, we'll come and wrap the conditions in chalk.green, wrapping the lower temperature and chalk.blue, and the high temperature in chalk.red.
[1:21] Now, if we run our app again, our weather information looks much nicer. For our time, however, let's do something a bit more fun.
[1:32] We'll use a library called gradient-string. That will enable us to have some interesting color effects. We'll install the library with npm install gradient-string, and then come back to our today component and import gradient from gradient-string.
[1:55] Now, we'll come down to our time, and we'll wrap it with gradient.rainbow. When we run our app again, we'll get something interesting but not quite what we're looking for. Well, it turns out, there's another method that we should use if we're dealing with multiple lines of content. We'll chain off the multiline method. Now, when we run the app, the result is much nicer.
[2:26] Back in our code, we could adjust the type of gradient to use. For example, we could use the atlas gradient. Then, we'll try that out in the app to get a much more subtle gradient. Adding a bit of color and gradients to terminal app is a small thing, but it brings a nice variety to the application.