Move plotlyColorThemeState from atom into localStorage

optuna_dashboard/ts/components/Settings.tsx

@@ -12,7 +12,7 @@ import {
 } from "@mui/material"
 import ClearIcon from "@mui/icons-material/Clear"
 import { useRecoilState } from "recoil"
-import { plotlyColorThemeState, plotBackendRenderingState } from "../state"
+import { plotBackendRenderingState, usePlotlyColorThemeState } from "../state"
 
 interface SettingsProps {
   handleClose: () => void
@@ -20,9 +20,7 @@ interface SettingsProps {
 
 export const Settings = ({ handleClose }: SettingsProps) => {
   const theme = useTheme()
-  const [plotlyColorTheme, setPlotlyColorTheme] = useRecoilState(
-    plotlyColorThemeState
-  )
+  const [plotlyColorTheme, setPlotlyColorTheme] = usePlotlyColorThemeState()
   const [plotBackendRendering, setPlotBackendRendering] = useRecoilState(
     plotBackendRenderingState
   )

optuna_dashboard/ts/state.ts

@@ -3,6 +3,7 @@ import {
   LightColorTemplates,
   DarkColorTemplates,
 } from "./components/PlotlyColorTemplates"
+import { useLocalStorage } from "usehooks-ts"
 
 export const studySummariesState = atom<StudySummary[]>({
   key: "studySummaries",
@@ -42,14 +43,6 @@ export const artifactIsAvailable = atom<boolean>({
   default: false,
 })
 
-export const plotlyColorThemeState = atom<PlotlyColorTheme>({
-  key: "plotlyColorThemeState",
-  default: {
-    dark: "default",
-    light: "default",
-  },
-})
-
 export const plotBackendRenderingState = atom<boolean>({
   key: "plotBackendRendering",
   default: false,
@@ -70,6 +63,13 @@ export const studyDetailLoadingState = atom<Record<number, boolean>>({
   default: {},
 })
 
+export const usePlotlyColorThemeState = () => {
+  return useLocalStorage<PlotlyColorTheme>("plotlyColorTheme", {
+    dark: "default",
+    light: "default",
+  })
+}
+
 export const useStudyDetailValue = (studyId: number): StudyDetail | null => {
   const studyDetails = useRecoilValue<StudyDetails>(studyDetailsState)
   return studyDetails[studyId] || null
@@ -115,7 +115,7 @@ export const useArtifacts = (studyId: number, trialId: number): Artifact[] => {
 }
 
 export const usePlotlyColorTheme = (mode: string): Partial<Plotly.Template> => {
-  const theme = useRecoilValue(plotlyColorThemeState)
+  const [theme, _] = usePlotlyColorThemeState()
   if (mode === "dark") {
     return DarkColorTemplates[theme.dark]
   } else {