diff --git a/optuna_dashboard/_app.py b/optuna_dashboard/_app.py index 47320fb8..f92eedaa 100644 --- a/optuna_dashboard/_app.py +++ b/optuna_dashboard/_app.py @@ -61,6 +61,11 @@ INDEX_HTML = """ margin: 0; padding: 0; } + @media (prefers-color-scheme: dark) { + body { + background-color: #121212; + } + } diff --git a/optuna_dashboard/static/components/App.tsx b/optuna_dashboard/static/components/App.tsx index e0c3ae5d..2488d3c6 100644 --- a/optuna_dashboard/static/components/App.tsx +++ b/optuna_dashboard/static/components/App.tsx @@ -1,25 +1,39 @@ -import React, { FC } from "react" +import React, { FC, useMemo } from "react" import { RecoilRoot } from "recoil" import { BrowserRouter as Router, Switch, Route } from "react-router-dom" import { SnackbarProvider } from "notistack" import { StudyDetail } from "./StudyDetail" import { StudyList } from "./StudyList" +import {createTheme, useMediaQuery, ThemeProvider} from "@mui/material" export const App: FC = () => { + const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); + const theme = useMemo( + () => + createTheme({ + palette: { + mode: prefersDarkMode ? 'dark' : 'light', + }, + }), + [prefersDarkMode], + ); + return ( - - - - } - /> - } /> - - - + + + + + } + /> + } /> + + + + ) } diff --git a/optuna_dashboard/static/components/GraphEdf.tsx b/optuna_dashboard/static/components/GraphEdf.tsx index 57cb81fc..9aa2b07d 100644 --- a/optuna_dashboard/static/components/GraphEdf.tsx +++ b/optuna_dashboard/static/components/GraphEdf.tsx @@ -10,6 +10,7 @@ import { SelectChangeEvent, useTheme, } from "@mui/material" +import {plotlyDarkTemplate} from "./PlotlyDarkMode"; const plotDomId = "graph-edf" @@ -95,6 +96,7 @@ const plotEdf = (study: StudyDetail, objectiveId: number) => { r: 50, b: 50, }, + template: plotlyDarkTemplate, } const values = completedTrials.map((t) => target(t)) diff --git a/optuna_dashboard/static/components/GraphHistory.tsx b/optuna_dashboard/static/components/GraphHistory.tsx index 686dd75b..7adb030c 100644 --- a/optuna_dashboard/static/components/GraphHistory.tsx +++ b/optuna_dashboard/static/components/GraphHistory.tsx @@ -15,6 +15,7 @@ import { SelectChangeEvent, useTheme, } from "@mui/material" +import {plotlyDarkTemplate} from "./PlotlyDarkMode"; const plotDomId = "graph-history" @@ -191,6 +192,7 @@ const plotHistory = ( type: xAxis === "number" ? "linear" : "date", }, showlegend: false, + template: plotlyDarkTemplate, } let filteredTrials = study.trials.filter( diff --git a/optuna_dashboard/static/components/GraphHyperparameterImportances.tsx b/optuna_dashboard/static/components/GraphHyperparameterImportances.tsx index 296f71be..c7ea5b94 100644 --- a/optuna_dashboard/static/components/GraphHyperparameterImportances.tsx +++ b/optuna_dashboard/static/components/GraphHyperparameterImportances.tsx @@ -12,6 +12,7 @@ import { } from "@mui/material" import { getParamImportances } from "../apiClient" +import {plotlyDarkTemplate} from "./PlotlyDarkMode"; const plotDomId = "graph-hyperparameter-importances" // To match colors used by plot_param_importances in optuna. @@ -131,6 +132,7 @@ const plotParamImportances = (paramsImportanceData: ParamImportances) => { b: 50, }, showlegend: false, + template: plotlyDarkTemplate, } const plotData: Partial[] = [ diff --git a/optuna_dashboard/static/components/GraphIntermediateValues.tsx b/optuna_dashboard/static/components/GraphIntermediateValues.tsx index 28bc3b0f..7fcca521 100644 --- a/optuna_dashboard/static/components/GraphIntermediateValues.tsx +++ b/optuna_dashboard/static/components/GraphIntermediateValues.tsx @@ -1,6 +1,7 @@ import * as plotly from "plotly.js-dist" import React, { FC, useEffect } from "react" import { Grid, Typography } from "@mui/material" +import {plotlyDarkTemplate} from "./PlotlyDarkMode"; const plotDomId = "graph-intermediate-values" @@ -39,6 +40,7 @@ const plotIntermediateValue = (trials: Trial[]) => { r: 50, b: 0, }, + template: plotlyDarkTemplate, } if (trials.length === 0) { plotly.react(plotDomId, [], layout) diff --git a/optuna_dashboard/static/components/GraphParallelCoordinate.tsx b/optuna_dashboard/static/components/GraphParallelCoordinate.tsx index 5c43b524..5612e9b7 100644 --- a/optuna_dashboard/static/components/GraphParallelCoordinate.tsx +++ b/optuna_dashboard/static/components/GraphParallelCoordinate.tsx @@ -10,6 +10,7 @@ import { SelectChangeEvent, useTheme, } from "@mui/material" +import {plotlyDarkTemplate} from "./PlotlyDarkMode"; const plotDomId = "graph-parallel-coordinate" @@ -34,7 +35,7 @@ export const GraphParallelCoordinate: FC<{ - Parallel coordinate + Parallel Coordinate {study !== null && study.directions.length !== 1 ? ( { r: 50, b: 0, }, + template: plotlyDarkTemplate, } if (study.trials.length === 0) { diff --git a/optuna_dashboard/static/components/GraphParetoFront.tsx b/optuna_dashboard/static/components/GraphParetoFront.tsx index c60f450a..bd8a26c6 100644 --- a/optuna_dashboard/static/components/GraphParetoFront.tsx +++ b/optuna_dashboard/static/components/GraphParetoFront.tsx @@ -10,6 +10,7 @@ import { SelectChangeEvent, useTheme, } from "@mui/material" +import {plotlyDarkTemplate} from "./PlotlyDarkMode"; const plotDomId = "graph-pareto-front" @@ -100,6 +101,7 @@ const plotParetoFront = ( r: 50, b: 0, }, + template: plotlyDarkTemplate, } const trials: Trial[] = study ? study.trials : [] diff --git a/optuna_dashboard/static/components/GraphSlice.tsx b/optuna_dashboard/static/components/GraphSlice.tsx index 98d99050..1fb131c2 100644 --- a/optuna_dashboard/static/components/GraphSlice.tsx +++ b/optuna_dashboard/static/components/GraphSlice.tsx @@ -12,6 +12,7 @@ import { SelectChangeEvent, useTheme, } from "@mui/material" +import {plotlyDarkTemplate} from "./PlotlyDarkMode"; const plotDomId = "graph-slice" @@ -163,6 +164,7 @@ const plotSlice = ( }, plot_bgcolor: "#E5ecf6", showlegend: false, + template: plotlyDarkTemplate, } const filteredTrials = trials.filter( diff --git a/optuna_dashboard/static/components/PlotlyDarkMode.ts b/optuna_dashboard/static/components/PlotlyDarkMode.ts new file mode 100644 index 00000000..c715ede8 --- /dev/null +++ b/optuna_dashboard/static/components/PlotlyDarkMode.ts @@ -0,0 +1,26 @@ +import * as plotly from "plotly.js-dist" + +export const plotlyDarkTemplate: Partial = { + layout: { + "font": {"color": "#f2f5fa"}, + "xaxis": { + "gridcolor": "#283442", + "linecolor": "#506784", + "zerolinecolor": "#283442", + }, + "yaxis": { + "gridcolor": "#283442", + "linecolor": "#506784", + "zerolinecolor": "#283442", + }, + "ternary": { + "aaxis": {"ticks": "", "gridcolor": "#506784", "linecolor": "#506784"}, + "baxis": {"ticks": "", "gridcolor": "#506784", "linecolor": "#506784"}, + "caxis": {"ticks": "", "gridcolor": "#506784", "linecolor": "#506784"}, + "bgcolor": "rgb(17,17,17)" + }, + "colorway": ["#636efa", "#EF553B", "#00cc96", "#ab63fa", "#19d3f3", "#e763fa", "#fecb52", "#ffa15a", "#ff6692", "#b6e880"], + "plot_bgcolor": "#222222", + "paper_bgcolor": "#222222", + }, +}