1. Learn
    2. /
  2. Courses
    3. /
  3. Building Dashboards with Dash and Plotly

Exercise

Switching to Darkmode

A common trend in software products and web pages is having a 'Dark Mode', which is easier on the eyes and preferred by some people. Dark Mode is where the background of elements are black, and the text color for everything is white.

Your task is take the dashboard you created in the last exercise and switch it over to the 'dark side'. This will involve changing the background and text color on your graph and HTML elements.

Most of the last dashboard has been provided, including the creation of necessary graphs. However, there is key work to be done to switch over the dashboard to Dark Mode. You can use words for the colors in this exercise rather than RGB codes.

Instructions

100 XP
  • Update the font color for the Plotly bar chart to align with the Dark Mode description above ('black' background with 'white' text), using a color word below line 12.
  • Using the link provided for you on line 7, add a new logo to the app below line 19.
  • Update the background color to be 'black' for the entire app using a color word below line 31.
  • Update the text for the entire app, so all text HTML elements are the correct color ('white') for Dark Mode using a color word below line 33.