ダークモードに切り替える
ソフトウェアやウェブページでは「ダークモード」が一般的になっています。目に優しく、好む人も多いモードです。ダークモードでは、要素の背景が黒、すべてのテキストの色が白になります。
今回の課題は、前の演習で作成したダッシュボードを「ダークサイド」に切り替えることです。グラフやHTML要素の背景色と文字色を変更します。
前回のダッシュボードの大部分（必要なグラフの作成を含む）は用意されていますが、ダークモードに切り替えるための重要な作業が残っています。この演習では、RGBコードではなく色名を使って指定してかまいません。
この演習はコースの一部です
Dash と Plotly で作るダッシュボード
演習の手順
- 棒グラフのフォント色を、下記のダークモード（
blackの背景、whiteのテキスト）に合うように、行10の下で設定します。 - 行
16の下で、logo_link変数を使って新しいロゴを追加します。
実践的なインタラクティブ演習
このサンプルコードを完成させて、この演習に挑戦してみましょう。
from dash import Dash, 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()
app.layout = [
# Add the new logo
html.Img(
src=____,
style={'width':'165px', 'height':'50px'}),
html.H1('Top Sales Categories'),
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')])
]
if __name__ == '__main__':
app.run(debug=True)