Support dark mode

client/src/Annotation/index.jsx

@@ -4,6 +4,7 @@ import SetupPage from "../SetupPage"
 import { useSettings } from "../SettingsProvider"
 import { setIn } from "seamless-immutable"
 import config from "../config.js"
+import { CssBaseline } from "@mui/material"
 import { useSnackbar } from "../SnackbarContext"
 import { getImagesAnnotation } from "../utils/send-data-to-server"
 import CircularProgress from "@mui/material/CircularProgress"
@@ -12,6 +13,8 @@ import AlertDialog from "../AlertDialog"
 import { clear_db, getSettings } from "../utils/get-data-from-server"
 import colors from "../colors.js"
 import { useTranslation } from "react-i18next"
+import { themes } from "../Theme"
+import { useTheme } from '../ThemeContext'
 
 const extractRelevantProps = (region) => ({
   cls: region.cls,
@@ -63,6 +66,7 @@ export default () => {
   const settingsConfig = useSettings()
   const [isLoading, setIsLoading] = useState(true)
   const { showSnackbar } = useSnackbar()
+  const { toggleTheme, theme } = useTheme();
   const [settings, setSettings] = useState({
     taskDescription: "",
     taskChoice: "image_classification",
@@ -306,6 +310,7 @@ export default () => {
 
   return (
     <>
+      <CssBaseline />
       {!showLabel ? (
         <SetupPage
           setConfiguration={setConfiguration}
@@ -368,6 +373,7 @@ export default () => {
                   setIsSettingsOpen(!isSettingsOpen)
                   setShowLabel(false)
                 }}
+                rootTheme={themes[theme]}
                 selectedImageIndex={selectedImageIndex}
               />
             </>

client/src/Annotation/styles.js

@@ -2,7 +2,7 @@ export default {
   editBar: {
     padding: 10,
     borderBottom: "1px solid #ccc",
-    backgroundColor: "#f8f8f8",
+    // backgroundColor: "#f8f8f8",
     display: "flex",
     alignItems: "center",
     "& .button": { margin: 5 },

client/src/ClassDistributionSidebarBox/ClassDistributionSidebarBox.test.js

@@ -10,6 +10,13 @@ jest.mock("../utils/get-data-from-server", () => ({
   getLabels: jest.fn(),
 }))
 
+// Mock the useTheme hook
+jest.mock('../ThemeContext', () => ({
+  useTheme: () => ({
+    theme: 'light', // Provide mock theme
+    toggleTheme: jest.fn(), // Mock function
+  }),
+}));
 // Mocking the useTranslation hook
 jest.mock("react-i18next", () => ({
     useTranslation: () => ({

client/src/ClassDistributionSidebarBox/index.jsx

@@ -4,18 +4,21 @@ import React, { useEffect, useState } from "react"
 import { createTheme, ThemeProvider } from "@mui/material/styles"
 import SidebarBoxContainer from "../SidebarBoxContainer"
 import BarChartIcon from "@mui/icons-material/BarChart"
-import { grey } from "@mui/material/colors"
+import { grey, deepOrange } from "@mui/material/colors"
 import { useTranslation } from "react-i18next"
 import { BarChart } from "@mui/x-charts/BarChart"
 import RefreshIcon from "@mui/icons-material/Refresh"
 import IconButton from "@mui/material/IconButton"
 import Paper from "@mui/material/Paper"
 import { getLabels } from "../utils/get-data-from-server"
 import colors from "../colors"
-
-const theme = createTheme()
+import { useTheme } from "../ThemeContext"
+import { themes } from "../Theme"
 export const ClassDistributionSidebarBox = ({ regionClsList, shouldExpand=false }) => {
   const { t } = useTranslation()
+  const { theme } = useTheme()
+  const newTheme = createTheme({ palette: { mode: theme } });
+
   const [labelsInfo, setLabelsInfo] = useState([])
   const assignRandomColors = (responseList, classList) => {
     let coloredResponse = []
@@ -55,13 +58,6 @@ export const ClassDistributionSidebarBox = ({ regionClsList, shouldExpand=false
     fetchData()
   }
 
-  const barChartsParams = {
-    slotProps: {
-      legend: {
-        hidden: true,
-      },
-    },
-  }
 
   const CustomItemTooltipContent = (props) => {
     const { itemData, series } = props
@@ -75,10 +71,23 @@ export const ClassDistributionSidebarBox = ({ regionClsList, shouldExpand=false
       </Paper>
     )
   }
+  const darkMode = theme === themes.dark;
+  const barChartsParams = {
+    slotProps: {
+      legend: {
+        hidden: true,
+        label: {
+          style: {
+            color: darkMode ? "#ffffff" : "#000000",
+          },
+        },
+      },
+    },
+  };
 
   return (
-    <ThemeProvider theme={theme}>       
-      <SidebarBoxContainer
+    <ThemeProvider theme={newTheme}>
+       <SidebarBoxContainer
         title={t("menu.class_distribution")}
         icon={<BarChartIcon style={{ color: grey[700] }} />}
         noScroll={true}
@@ -93,24 +102,24 @@ export const ClassDistributionSidebarBox = ({ regionClsList, shouldExpand=false
           }}
         >
           <BarChart
-            xAxis={[
-              {
-                scaleType: "band",
-                data: [t("menu.classifications")],
-                labelFontSize: 10,
-                hideTooltip: true,
-              },
-            ]}
-            yAxis={[
-              { label: t("menu.class_distribution_count"), labelFontSize: 10 },
-            ]}
+              xAxis={[
+                {
+                  scaleType: "band",
+                  data: [t("menu.classifications")],
+                  labelFontSize: 10,
+                  hideTooltip: true,
+                },
+              ]}
+              yAxis={[
+                { label: t("menu.class_distribution_count"), labelFontSize: 10 },
+              ]}     
             series={labelsInfo}
             width={300}
             height={300}
             {...barChartsParams}
             tooltip={{ trigger: "item", itemContent: CustomItemTooltipContent }}
           />
-          <IconButton aria-label="refresh" onClick={handleRefreshClick}>
+          <IconButton aria-label="refresh" onClick={handleRefreshClick} color="inherit">
             <RefreshIcon />
           </IconButton>
         </div>

client/src/ClassSelectionMenu/ClassSelectionMenu.test.js

@@ -19,6 +19,14 @@ jest.mock("react-i18next", () => ({
   }),
 }))
 
+// Mock the useTheme hook
+jest.mock('../ThemeContext', () => ({
+  useTheme: () => ({
+    theme: 'light', // Provide mock theme
+    toggleTheme: jest.fn(), // Mock function
+  }),
+}));
+
 describe("ClassSelectionMenu", () => {
   it("renders correctly", () => {
     const { getByText } = render(

client/src/ClassSelectionMenu/index.jsx

@@ -19,7 +19,7 @@ const LabelContainer = styled("div")(({ theme }) => ({
   alignItems: "center",
   cursor: "pointer",
   opacity: 0.7,
-  backgroundColor: "#fff",
+  // backgroundColor: "#fff",
   "&:hover": {
     opacity: 1,
   },

client/src/DebugSidebarBox/DebugSidebarBox.test.js

@@ -3,6 +3,15 @@ import { render } from "@testing-library/react"
 import "@testing-library/jest-dom"
 import DebugSidebarBox from "./index"
 
+// Mock the useTheme hook
+jest.mock('../ThemeContext', () => ({
+  useTheme: () => ({
+    theme: 'light', // Provide mock theme
+    toggleTheme: jest.fn(), // Mock function
+  }),
+}));
+
+
 describe("DebugSidebarBox", () => {
   const mockState = {
     images: [

client/src/FilesListMenu/FilesListMenu.test.js

@@ -20,6 +20,15 @@ jest.mock("react-i18next", () => ({
   }),
 }))
 
+// Mock the useTheme hook
+jest.mock('../ThemeContext', () => ({
+  useTheme: () => ({
+    theme: 'light', // Provide mock theme
+    toggleTheme: jest.fn(), // Mock function
+  }),
+}));
+
+
 describe("FilesListMenu", () => {
   const state = {
     annotationType: "image",

client/src/FilesListMenu/index.jsx

@@ -22,7 +22,7 @@ const LabelContainer = styled("div")(({ theme }) => ({
   alignItems: "center",
   cursor: "pointer",
   opacity: 0.7,
-  backgroundColor: "#fff",
+  // backgroundColor: "#fff",
   "&:hover": {
     opacity: 1,
   },
@@ -100,7 +100,7 @@ export const FilesListMenu = ({
                   padding: 0,
                   "& .MuiSvgIcon-root": {
                     fontSize: 14, // Set size
-                    color: image.processed ? "green" : "", // Set color conditionally
+                    color: image.processed ? "green" : "#1976d2", // Set color conditionally
                   },
                   cursor:
                     selectedImage !== null && selectedImage !== index

client/src/HistorySidebarBox/HistorySidebarBox.test.js

@@ -14,6 +14,14 @@ jest.mock("react-i18next", () => ({
   }),
 }))
 
+// Mock the useTheme hook
+jest.mock('../ThemeContext', () => ({
+  useTheme: () => ({
+    theme: 'light', // Provide mock theme
+    toggleTheme: jest.fn(), // Mock function
+  }),
+}));
+
 describe("HistorySidebarBox", () => {
   const history = [
     { name: "History 1", time: new Date("2022-06-15T12:00:00Z") },

client/src/HistorySidebarBox/index.jsx

@@ -20,7 +20,7 @@ const theme = createTheme()
 const EmptyTextDiv = styled("div")(() => ({
   fontSize: 14,
   fontWeight: "bold",
-  color: grey[500],
+  // color: grey[500],
   textAlign: "center",
   padding: 20,
 }))
@@ -30,6 +30,7 @@ const listItemTextStyle = {
   fontSize: 11,
   paddingTop: 0,
   paddingBottom: 0,
+  color: "inherit",
 }
 
 export const HistorySidebarBox = ({ history, onRestoreHistory }) => {

client/src/ImageUpload/index.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from "react"
 import { useDropzone } from "react-dropzone"
 import { createTheme } from "@mui/material/styles"
-import { Box, Typography, IconButton } from "@mui/material"
+import { CssBaseline, Box, Typography, IconButton } from "@mui/material"
 import DeleteIcon from "@mui/icons-material/Delete"
 import axios from "axios"
 import { useSnackbar } from "../SnackbarContext"
@@ -157,6 +157,7 @@ const ImageUpload = ({ onImageUpload, settingsImages }) => {
 
   return (
     <>
+      <CssBaseline />
       <Box
         {...getRootProps()}
         sx={{

client/src/KeyframesSelectorSidebarBox/KeyframesSelectorSidebarBox.test.js

@@ -11,6 +11,14 @@ jest.mock("react-i18next", () => ({
   }),
 }))
 
+// Mock the useTheme hook
+jest.mock('../ThemeContext', () => ({
+  useTheme: () => ({
+    theme: 'light', // Provide mock theme
+    toggleTheme: jest.fn(), // Mock function
+  }),
+}));
+
 describe("KeyframesSelectorSidebarBox", () => {
   const mockOnChangeVideoTime = jest.fn()
   const mockOnDeleteKeyframe = jest.fn()

client/src/MainLayout/styles.js

@@ -2,12 +2,12 @@ import { grey } from "@mui/material/colors"
 
 export default {
   container: {
-    display: "flex",
-    flexGrow: 1,
-    flexDirection: "column",
+    // display: "flex",
+    // flexGrow: 1,
+    // flexDirection: "column",
     height: "100%",
     maxHeight: "100vh",
-    backgroundColor: "#fff",
+
     overflow: "hidden",
   },
   headerTitle: {

client/src/RegionSelectorSidebarBox/RegionSelectorSidebarBox.test.js

@@ -8,6 +8,14 @@ jest.mock("react-i18next", () => ({
   useTranslation: () => ({ t: (key) => key }),
 }))
 
+// Mock the useTheme hook
+jest.mock('../ThemeContext', () => ({
+  useTheme: () => ({
+    theme: 'light', // Provide mock theme
+    toggleTheme: jest.fn(), // Mock function
+  }),
+}));
+
 describe("RegionSelectorSidebarBox", () => {
   const mockRegions = [
     {

client/src/RegionSelectorSidebarBox/index.jsx

@@ -27,7 +27,7 @@ const ChipSpan = styled("span")(() => styles.chip)
 const RowDiv = styled("div")(() => styles.row)
 const ContainerDiv = styled("div")(() => styles.container)
 const HeaderSep = styled("div")(({ theme }) => ({
-  borderTop: `1px solid ${grey[200]}`,
+  // borderTop: `1px solid ${grey[200]}`,
   marginTop: 2,
   marginBottom: 2,
 }))

client/src/RegionSelectorSidebarBox/styles.js

@@ -25,7 +25,7 @@ export default {
     padding: 4,
     cursor: "pointer",
     "&.header:hover": {
-      backgroundColor: "#fff",
+      // backgroundColor: "#fff",
     },
     "&.highlighted": {
       backgroundColor: blue[100],

client/src/RegionTags/index.jsx

@@ -97,15 +97,15 @@ export const RegionTags = ({
                 left: 0,
                 ...(displayOnTop ? { bottom: 0 } : { top: 0 }),
                 zIndex: 10,
-                backgroundColor: "#fff",
+                // backgroundColor: "#fff",
                 borderRadius: 4,
                 padding: 2,
                 paddingBottom: 0,
                 opacity: 0.5,
                 pointerEvents: "none",
               }}
             >
-              <LockIcon style={{ width: 16, height: 16, color: "#333" }} />
+              <LockIcon style={{ width: 16, height: 16}} />
             </Paper>
           </div>
         )

client/src/SetupPage/SetupPage.test.js

@@ -4,6 +4,14 @@ import "@testing-library/jest-dom"
 import { SetupPage } from "./index"
 import { useSettings } from "../SettingsProvider"
 
+// Mock the useTheme hook
+jest.mock('../ThemeContext', () => ({
+  useTheme: () => ({
+    theme: 'light', // Provide mock theme
+    toggleTheme: jest.fn(), // Mock function
+  }),
+}));
+
 // Mock useTranslation hook
 jest.mock("react-i18next", () => ({
   useTranslation: () => ({