Get startedGet started for free

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.

This exercise is part of the course

Building Dashboards with Dash and Plotly

View Course

Exercise instructions

  • 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.

Hands-on interactive exercise

Have a go at this exercise by completing this sample code.

import dash
from dash import dcc, html
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/1c95273e21a54b5ca48e0b03cc0c1faeafb3d7cd/e-comlogo_white.png'
ecom_category = ecom_sales.groupby(['Major Category','Minor Category']).size().reset_index(name='Total Orders').sort_values(by='Total Orders', ascending=False).reset_index(drop=True)
top_cat = ecom_category.loc[0]['Minor Category']
ecom_bar = px.bar(ecom_category, x='Total Orders', y='Minor Category', color='Major Category')

# Set the font color of the bar chart
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'black', 'font': {'color':'____'}})

app = dash.Dash(__name__)

app.layout = html.Div([
    # Set the new white-text image
    html.Img(____,
    style={'width':'165px', 'height':'50px'}),
    html.H1('Top Sales Categories'),
    html.Div(dcc.Graph(figure=ecom_bar,style={'width':'500px', 'height':'350px', 'margin':'auto'})),
    html.Br(),
    html.Span(children=[
    'The top category was: ',
    html.B(top_cat),
    html.Br(),
    html.I('Copyright E-Com INC')])
    ], style={'text-align':'center', 'font-size':22,
              # Update the background color to the entire app
              '____':'____',
              # Change the text color for the whole app
              '____':'____'
               })

if __name__ == '__main__':
    app.run_server(debug=True)
Edit and Run Code