Merge pull request #1008 from c-bata/issue-1000

Support DarkMode in the start page of Jupyter Lab extension

.github/workflows/jupyterlab-tests.yml

@@ -0,0 +1,66 @@
+name: tests
+on:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - '.github/workflows/jupyterlab-tests.yml'
+      - '**.py'
+      - '**.ts'
+      - '**.tsx'
+      - 'optuna_dashboard/package.json'
+      - 'optuna_dashboard/package-lock.json'
+      - 'tslib/react/package.json'
+      - 'tslib/react/package-lock.json'
+      - 'tslib/storage/package.json'
+      - 'tslib/storage/package-lock.json'
+      - 'jupyterlab/pyproject.toml'
+      - 'jupyterlab/package.json'
+      - 'jupyterlab/yarn.lock'
+jobs:
+  test-build:
+    name: Test build for JupyterLab extension
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Set up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.11'
+          architecture: x64
+
+      - name: Install dependencies
+        run: |
+          python -m pip install --progress-bar off --upgrade pip setuptools build
+          pip install --progress-bar off jupyterlab
+          pip install --progress-bar off .
+      
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - run: make tslib
+
+      - name: Build JavaScript dependencies
+        working-directory: optuna_dashboard
+        run: |
+          npm install
+          npm run build:pkg
+      
+      # Without a following step, it will be failed to build the jupyter lab extension by the below error
+      # Type Error Cannot read properties of undefined (reading .../jupyterlab/.pnp.cjs)
+      - name: Mysterious hack to fix the build error
+        working-directory: jupyterlab
+        run: yarn install
+
+      - name: Build package
+        working-directory: jupyterlab
+        env:
+          YARN_ENABLE_IMMUTABLE_INSTALLS: false
+        run: python -m build --sdist
+

.github/workflows/python-tests.yml

@@ -106,49 +106,4 @@ jobs:
       - name: Run python unit tests
         run: |
           pytest python_tests
-  test-build:
-    name: Test build for JupyterLab extension
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Check out code
-        uses: actions/checkout@v4
-
-      - name: Set up Python
-        uses: actions/setup-python@v4
-        with:
-          python-version: '3.11'
-          architecture: x64
-
-      - name: Install dependencies
-        run: |
-          python -m pip install --progress-bar off --upgrade pip setuptools build
-          pip install --progress-bar off jupyterlab
-          pip install --progress-bar off .
-      
-      - name: Set up Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          cache: 'npm'
-
-      - run: make tslib
-
-      - name: Build JavaScript dependencies
-        working-directory: optuna_dashboard
-        run: |
-          npm install
-          npm run build:pkg
-      
-      # Without a following step, it will be failed to build the jupyter lab extension by the below error
-      # Type Error Cannot read properties of undefined (reading .../jupyterlab/.pnp.cjs)
-      - name: Mysterious hack to fix the build error
-        working-directory: jupyterlab
-        run: yarn install
-
-      - name: Build package
-        working-directory: jupyterlab
-        env:
-          YARN_ENABLE_IMMUTABLE_INSTALLS: false
-        run: python -m build --sdist
 

.github/workflows/typescript-tests.yml

@@ -11,6 +11,8 @@ on:
       - 'optuna_dashboard/package-lock.json'
       - 'vscode/package.json'
       - 'vscode/package-lock.json'
+      - 'standalone_app/package.json'
+      - 'standalone_app/package-lock.json'
       - 'tslib/react/package.json'
       - 'tslib/react/package-lock.json'
       - 'tslib/storage/package.json'

jupyterlab/src/components/JupyterLabEntrypoint.tsx

@@ -5,16 +5,29 @@ import {
   Button,
   CssBaseline,
   FormControl,
+  ThemeProvider,
   Typography,
+  createTheme,
+  useMediaQuery,
+  useTheme,
 } from "@mui/material"
 import CircularProgress from "@mui/material/CircularProgress"
+import blue from "@mui/material/colors/blue"
+import pink from "@mui/material/colors/pink"
 import {
   APIClientProvider,
   App,
   ConstantsContext,
 } from "@optuna/optuna-dashboard"
 import { SnackbarProvider, enqueueSnackbar } from "notistack"
-import React, { Dispatch, FC, SetStateAction, useEffect, useState } from "react"
+import React, {
+  Dispatch,
+  FC,
+  SetStateAction,
+  useEffect,
+  useState,
+  useMemo,
+} from "react"
 import { JupyterlabAPIClient } from "../apiClient"
 import { requestAPI } from "../handler"
 import { DebouncedInputTextField } from "./Debounce"
@@ -25,13 +38,26 @@ export const JupyterLabEntrypoint: FC = () => {
   const [ready, setReady] = useState(false)
   const [pathName, setPathName] = useState("")
 
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)")
+  const colorMode = prefersDarkMode ? "dark" : "light"
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: colorMode,
+          primary: blue,
+          secondary: pink,
+        },
+      }),
+    [colorMode]
+  )
   useEffect(() => {
     setPathName(window.location.pathname)
   }, [])
 
   if (!ready) {
     return (
-      <>
+      <ThemeProvider theme={theme}>
         <CssBaseline />
         <SnackbarProvider maxSnack={3}>
           <Box
@@ -41,6 +67,7 @@ export const JupyterLabEntrypoint: FC = () => {
               flexDirection: "column",
               justifyContent: "center",
               alignItems: "center",
+              backgroundColor: theme.palette.background.default,
             }}
           >
             <JupyterLabStartWidget
@@ -50,7 +77,7 @@ export const JupyterLabEntrypoint: FC = () => {
             />
           </Box>
         </SnackbarProvider>
-      </>
+      </ThemeProvider>
     )
   }
   return (
@@ -160,6 +187,8 @@ const StartDashboardForm: FC<{
   showOptunaDashboard: () => void
   setLoading: Dispatch<SetStateAction<boolean>>
 }> = ({ showOptunaDashboard, setLoading }) => {
+  const theme = useTheme()
+  const isDarkMode = theme.palette.mode === "dark"
   const [storageURL, setStorageURL] = useState("")
   const [artifactPath, setArtifactPath] = useState("")
   const [isValidURL, setIsValidURL] = useState(false)
@@ -197,7 +226,9 @@ const StartDashboardForm: FC<{
         flexDirection: "column",
         width: "600px",
         borderRadius: "8px",
-        boxShadow: "rgba(0, 0, 0, 0.08) 0 8px 24px",
+        boxShadow: isDarkMode
+          ? "rgba(255, 255, 255, 0.08) 0 8px 24px"
+          : "rgba(0, 0, 0, 0.08) 0 8px 24px",
         padding: "64px",
       }}
     >