Including the Background Color

00:00 One important detail that the theme’s currently missing is the background color. So hop over to app.py again, and add another key-value pair into your context dictionary with the key style_bg_color and the value formatter .style.background_color.

00:21 The background color attribute of the style object will contain the background color information. And now that you have a new key-value pair in your context dictionary, you can actually use style_bg_color to style the background of your code box.

00:35 So going back to base.html, go into the style element. Right below the style definitions variable, create a new class named my_code.

00:48 my_code is the class name that you gave the code element on the website. And if we have a quick look at the style.css file, you actually already styled quite a bit of the my_code box.

01:02 For example, you added a monospace font, you added rounded corners, added a box shadow, and so on. Now the nice thing with CSS is that it’s cascading. That means you can add up on things that already exist and that’s what you’re doing here in the base.html file.

01:18 So here you’re saying take everything that the my_code element already has, and now also add a background color. So that’s background-color: and then you add in the style_bg_color variable that you defined in your dictionary.

01:36 Again, that’s two curly braces, and since it’s CSS, you add a semicolon at the end of the line. Go back into your browser and reload the page, and you can see that the background color is there now.

01:48 And to actually see if your code image generator still works, click the Create Image link. Head over to your screenshots folder, look at your latest screenshot, and you can see that your code image generator works and makes a screenshot of your code.

02:04 So that is the first image that you actually really can share because it has the syntax highlighting from Pygments and you’re making the screenshot with Playwright and Flask is your application in the back.

02:15 So generally you are finished, but there is a bit of cleanup that we should do. Let’s do this in the next lesson before we wrap up this course.