added settings background section

2024-11-26 05:45:26 +08:00 · 2024-08-07 12:15:01 +08:00 · 2024-08-07 12:15:01 +08:00 · 542b2ce483
parent 19e1b05faa
commit 542b2ce483
13 changed files with 575 additions and 103 deletions
--- a/src/components/FooterBar.tsx
+++ b/src/components/FooterBar.tsx
@ -0,0 +1,59 @@
+import { Settings } from "@mui/icons-material";
+import { Box, Stack } from "@mui/material";
+import { useRouter } from "next/router";
+import { WindowButtons } from "./HeaderBar/WindowButtons";
+
+export const FooterBar = () => {
+  const router = useRouter();
+
+  return (
+    <Box
+      className="titlebar"
+      data-tauri-drag-region="true"
+      sx={{
+        alignItems: "center",
+        // TODO: remove when done
+        borderTop: "1px solid red",
+        display: "flex",
+        flexDirection: "row",
+        height: "48px",
+        justifyContent: "space-between",
+        p: 1,
+      }}
+    >
+      <Box
+        className="titlebar"
+        data-tauri-drag-region="true"
+        sx={{
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "row",
+        }}
+      >
+        hello this is the left side
+      </Box>
+      <Box
+        className="titlebar"
+        data-tauri-drag-region="true"
+        sx={{
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "row",
+        }}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: "center",
+            display: "flex",
+            flexDirection: "row",
+          }}
+        >
+          <Settings />
+          <WindowButtons />
+        </Stack>
+      </Box>
+    </Box>
+  );
+};
--- a/src/components/Generic/FloatingDialog.tsx
+++ b/src/components/Generic/FloatingDialog.tsx
@ -41,10 +41,10 @@ export const FloatingDialog: FC<FloatingDialog> = ({
        <Box
          sx={{
            bgcolor: "background.paper",
-            borderRadius: maximisedState ? "0px" : settings.display.radius + "px",
+            borderRadius: maximisedState ? "0px" : settings.style.radius + "px",
            display: "flex",
            flexDirection: "column",
-            height: maximisedState ? "100%" : settings.display.window_height + "%",
+            height: maximisedState ? "100%" : settings.style.window_height + "%",
            left: "50%",
            maxHeight: maximisedState ? "100vh" : "96vh",
            maxWidth: maximisedState ? "100vw" : "96vw",
@ -53,8 +53,8 @@ export const FloatingDialog: FC<FloatingDialog> = ({
            top: "50%",
            transform: "translate(-50%, -50%)",
            transition: "all ease-in-out",
-            transitionDuration: settings.display.transition_duration + "ms",
-            width: maximisedState ? "100vw" : settings.display.window_width + "px",
+            transitionDuration: settings.style.transition_duration + "ms",
+            width: maximisedState ? "100vw" : settings.style.window_width + "px",
          }}
        >
          <Box
--- a/src/components/Generic/Layout.tsx
+++ b/src/components/Generic/Layout.tsx
@ -1,10 +1,59 @@
 import { Box } from "@mui/material";
+import { FooterBar } from "../FooterBar";
 import { HeaderBar } from "../HeaderBar/HeaderBar";

 export const Layout = () => {
  return (
-    <Box>
+    <Box
+      sx={{
+        backgroundColor: "#8ab4f8",
+        display: "flex",
+        flexDirection: "column",
+        height: "100vh",
+      }}
+    >
      <HeaderBar />
+      <Box
+        sx={{
+          display: "flex",
+          flexGrow: 1,
+          overflow: "auto",
+        }}
+      >
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+        kdfjdlfjdkfjdlfldkfj <br />
+      </Box>
+      <FooterBar />
    </Box>
  );
 };
--- a/src/components/HeaderBar/HeaderBar.tsx
+++ b/src/components/HeaderBar/HeaderBar.tsx
@ -1,12 +1,8 @@
-import { BugReportOutlined } from "@mui/icons-material";
-import { Box, IconButton, Stack } from "@mui/material";
-import { useRouter } from "next/router";
+import { Box, Stack } from "@mui/material";
 import { Settings } from "./Settings/Settings";
 import { WindowButtons } from "./WindowButtons";

 export const HeaderBar = () => {
-  const router = useRouter();
-
  return (
    <Box
      className="titlebar"
--- a/src/components/HeaderBar/Settings/BetaChip.tsx
+++ b/src/components/HeaderBar/Settings/BetaChip.tsx
@ -0,0 +1,15 @@
+import { Chip } from "@mui/material";
+
+export const BetaChip = () => {
+  return (
+    <Chip
+      color="primary"
+      label="Beta"
+      size="small"
+      sx={{
+        mr: 1,
+      }}
+      variant="outlined"
+    />
+  );
+};
--- a/src/components/HeaderBar/Settings/SettingsCategoryTitle.tsx
+++ b/src/components/HeaderBar/Settings/SettingsCategoryTitle.tsx
@ -1,11 +1,11 @@
 import { Box, Typography } from "@mui/material";
 import { FC } from "react";

-interface SettingsCategoryTitleProps {
+interface CategoryTitleProps {
  title: string;
 }

-export const SettingsCategoryTitle: FC<SettingsCategoryTitleProps> = ({ title }) => {
+export const CategoryTitle: FC<CategoryTitleProps> = ({ title }) => {
  return (
    <Box
      sx={{
--- a/src/components/HeaderBar/Settings/Settings.tsx
+++ b/src/components/HeaderBar/Settings/Settings.tsx
@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
 import { useSettings } from "../../../contexts/SettingsContext";
 import { stagedSettingsAtom } from "../../../lib/store/jotai/settings";
 import { FloatingDialog } from "../../Generic/FloatingDialog";
-import { SettingsTabDisplay } from "./SettingsTabs/SettingsTabDisplay";
+import { SettingsTabStyle } from "./SettingsTabs/SettingsTabStyle";
 import { SettingsTabWindow } from "./SettingsTabs/SettingsTabWindow";

 export const Settings = () => {
@ -82,7 +82,7 @@ export const Settings = () => {
        <Box
          sx={{
            border: "1px solid " + theme.palette.grey[700],
-            borderRadius: settings.display.radius + "px",
+            borderRadius: settings.style.radius + "px",
            display: "flex",
            flexDirection: "column",
            flexGrow: 1,
@ -103,8 +103,8 @@ export const Settings = () => {
              variant="scrollable"
            >
              <Tab
-                label="Display"
-                value="display"
+                label="Style"
+                value="style"
              />
              <Tab
                label="Window"
@ -120,9 +120,9 @@ export const Settings = () => {
            >
              <TabPanel
                sx={{ p: 2 }}
-                value="display"
+                value="style"
              >
-                <SettingsTabDisplay />
+                <SettingsTabStyle />
              </TabPanel>
              <TabPanel
                sx={{ p: 2 }}
--- a/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabBackground.tsx
+++ b/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabBackground.tsx
@ -0,0 +1,340 @@
+import { Box, Chip, InputAdornment, MenuItem, Slider, Switch, TextField, Typography } from "@mui/material";
+import { useAtom } from "jotai";
+import { FC } from "react";
+import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
+import { BetaChip } from "../BetaChip";
+import { CategoryTitle } from "../CategoryTitle";
+import { SettingsItem } from "../SettingsItem";
+
+interface SettingsTabBackgroundProps {
+  sx?: any;
+}
+
+export const SettingsTabBackground: FC<SettingsTabBackgroundProps> = ({ sx }) => {
+  // atoms
+  const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);
+
+  const handleSettingsBackgroundValueChange = (
+    settingKey: string,
+    settingValue: boolean | number | string | number[],
+  ) => {
+    const newSettings = {
+      ...stagedSettings,
+      background: {
+        ...stagedSettings.background,
+        [settingKey]: settingValue,
+      },
+    };
+    setStagedSettings(newSettings);
+  };
+
+  return (
+    <Box sx={{ sx }}>
+      <CategoryTitle title="Basic styles" />
+      <SettingsItem
+        settingsDescription={
+          <Box
+            sx={{
+              display: "flex",
+            }}
+          >
+            <BetaChip />
+            <Typography>Dark mode</Typography>
+          </Box>
+        }
+        settingsInput={
+          <Switch
+            checked={stagedSettings.style.dark_mode}
+            name="dark_mode"
+            onChange={(e) => {
+              handleSettingsBackgroundValueChange(e.target.name, e.target.checked);
+            }}
+          />
+        }
+      />
+      <SettingsItem
+        settingsDescription={
+          <>
+            <Typography>Accent color</Typography>
+            <Typography
+              color="lightgrey"
+              variant="caption"
+            >
+              Default: #8ab4f8
+            </Typography>
+          </>
+        }
+        settingsInput={
+          <TextField
+            name="accent_color"
+            onChange={(e) => {
+              handleSettingsBackgroundValueChange(e.target.name, e.target.value);
+            }}
+            sx={{
+              width: "100%",
+            }}
+            size="small"
+            type="color"
+            value={stagedSettings.style.accent_color}
+            variant="standard"
+          />
+        }
+      />
+      <SettingsItem
+        settingsDescription={
+          <>
+            <Typography>Font family</Typography>
+            <Typography
+              color="lightgrey"
+              variant="caption"
+            >
+              Default: Monospace
+            </Typography>
+          </>
+        }
+        settingsInputLong={
+          <TextField
+            fullWidth
+            name="font_family"
+            onChange={(e) => {
+              handleSettingsBackgroundValueChange(e.target.name, e.target.value);
+            }}
+            select
+            size="small"
+            sx={{
+              maxWidth: "100%",
+            }}
+            value={stagedSettings.style.font_family || "monospace"}
+            variant="outlined"
+          >
+            <MenuItem value="monospace">Monospace</MenuItem>
+            <MenuItem value="sans_serif">Sans Serif</MenuItem>
+            <MenuItem value="comic_sans">Comic Sans</MenuItem>
+            <MenuItem value="system_font">System font</MenuItem>
+          </TextField>
+        }
+      />
+      <SettingsItem
+        settingsDescription={
+          <>
+            <Typography>Font scaling</Typography>
+            <Typography
+              color="lightgrey"
+              variant="caption"
+            >
+              Default: 100%
+            </Typography>
+          </>
+        }
+        settingsInputBottom={
+          <Slider
+            marks={[
+              {
+                value: 80,
+                label: "80%",
+              },
+              {
+                value: 90,
+                label: "90%",
+              },
+              {
+                value: 100,
+                label: "100%",
+              },
+              {
+                value: 110,
+                label: "110%",
+              },
+              {
+                value: 120,
+                label: "120%",
+              },
+            ]}
+            min={80}
+            max={120}
+            name="font_scaling"
+            onChangeCommitted={(e, value) => {
+              handleSettingsBackgroundValueChange("font_scaling", value);
+            }}
+            step={10}
+            value={stagedSettings.style.font_scaling}
+            valueLabelDisplay="auto"
+          />
+        }
+      />
+      <CategoryTitle title="Advanced settings" />
+      <SettingsItem
+        settingsDescription={
+          <>
+            <Typography component="div">
+              <Chip
+                color="warning"
+                label="Dev"
+                size="small"
+                sx={{
+                  mr: 1,
+                }}
+                variant="outlined"
+              />
+              Transition duration
+            </Typography>
+            <Typography
+              color="lightgrey"
+              variant="caption"
+            >
+              Default: 200ms
+            </Typography>
+          </>
+        }
+        settingsInput={
+          <TextField
+            InputProps={{
+              endAdornment: <InputAdornment position="end">ms</InputAdornment>,
+              inputProps: { min: 0, max: 100, step: 1 },
+            }}
+            name="transition_duration"
+            onChange={(e) => {
+              handleSettingsBackgroundValueChange(e.target.name, parseFloat(e.target.value));
+            }}
+            sx={{
+              width: "100%",
+            }}
+            size="small"
+            type="number"
+            value={stagedSettings.style.transition_duration}
+            variant="standard"
+          />
+        }
+      />
+      <SettingsItem
+        settingsDescription={
+          <>
+            <Typography component="div">
+              <Chip
+                color="warning"
+                label="Dev"
+                size="small"
+                sx={{
+                  mr: 1,
+                }}
+                variant="outlined"
+              />
+              Radius
+            </Typography>
+            <Typography
+              color="lightgrey"
+              variant="caption"
+            >
+              Default: 8px
+            </Typography>
+          </>
+        }
+        settingsInput={
+          <TextField
+            InputProps={{
+              endAdornment: <InputAdornment position="end">px</InputAdornment>,
+              inputProps: { min: 0, max: 100, step: 1 },
+            }}
+            name="radius"
+            onChange={(e) => {
+              handleSettingsBackgroundValueChange(e.target.name, parseFloat(e.target.value));
+            }}
+            sx={{
+              width: "100%",
+            }}
+            size="small"
+            type="number"
+            value={stagedSettings.style.radius}
+            variant="standard"
+          />
+        }
+      />
+      <SettingsItem
+        settingsDescription={
+          <>
+            <Typography component="div">
+              <Chip
+                color="warning"
+                label="Dev"
+                size="small"
+                sx={{
+                  mr: 1,
+                }}
+                variant="outlined"
+              />
+              Window height
+            </Typography>
+            <Typography
+              color="lightgrey"
+              variant="caption"
+            >
+              Default: 60%
+            </Typography>
+          </>
+        }
+        settingsInput={
+          <TextField
+            InputProps={{
+              endAdornment: <InputAdornment position="end">%</InputAdornment>,
+              inputProps: { min: 0, max: 100, step: 1 },
+            }}
+            name="window_height"
+            onChange={(e) => {
+              handleSettingsBackgroundValueChange(e.target.name, parseFloat(e.target.value));
+            }}
+            sx={{
+              width: "100%",
+            }}
+            size="small"
+            type="number"
+            value={stagedSettings.style.window_height}
+            variant="standard"
+          />
+        }
+      />
+      <SettingsItem
+        settingsDescription={
+          <>
+            <Typography component="div">
+              <Chip
+                color="warning"
+                label="Dev"
+                size="small"
+                sx={{
+                  mr: 1,
+                }}
+                variant="outlined"
+              />
+              Window width
+            </Typography>
+            <Typography
+              color="lightgrey"
+              variant="caption"
+            >
+              Default: 400px
+            </Typography>
+          </>
+        }
+        settingsInput={
+          <TextField
+            InputProps={{
+              endAdornment: <InputAdornment position="end">px</InputAdornment>,
+              inputProps: { min: 0, max: 10000, step: 1 },
+            }}
+            name="window_width"
+            onChange={(e) => {
+              handleSettingsBackgroundValueChange(e.target.name, parseFloat(e.target.value));
+            }}
+            sx={{
+              width: "100%",
+            }}
+            size="small"
+            type="number"
+            value={stagedSettings.style.window_width}
+            variant="standard"
+          />
+        }
+      />
+    </Box>
+  );
+};
--- a/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabDisplay.tsx
+++ b/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabDisplay.tsx
@ -2,14 +2,15 @@ import { Box, Chip, InputAdornment, MenuItem, Slider, Switch, TextField, Typogra
 import { useAtom } from "jotai";
 import { FC } from "react";
 import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
-import { SettingsCategoryTitle } from "../SettingsCategoryTitle";
+import { BetaChip } from "../BetaChip";
+import { CategoryTitle } from "../CategoryTitle";
 import { SettingsItem } from "../SettingsItem";

-interface SettingsTabDisplayProps {
+interface SettingsTabStyleProps {
  sx?: any;
 }

-export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
+export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
  // atoms
  const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);

@ -17,7 +18,7 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
    const newSettings = {
      ...stagedSettings,
      display: {
-        ...stagedSettings.display,
+        ...stagedSettings.style,
        [settingKey]: settingValue,
      },
    };
@ -26,16 +27,21 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {

  return (
    <Box sx={{ sx }}>
-      <SettingsCategoryTitle title="Styles" />
+      <CategoryTitle title="Basic styles" />
      <SettingsItem
        settingsDescription={
-          <>
+          <Box
+            sx={{
+              display: "flex",
+            }}
+          >
+            <BetaChip />
            <Typography>Dark mode</Typography>
-          </>
+          </Box>
        }
        settingsInput={
          <Switch
-            checked={stagedSettings.display.dark_mode}
+            checked={stagedSettings.style.dark_mode}
            name="dark_mode"
            onChange={(e) => {
              handleSettingsDisplayValueChange(e.target.name, e.target.checked);
@ -66,7 +72,7 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
            }}
            size="small"
            type="color"
-            value={stagedSettings.display.accent_color}
+            value={stagedSettings.style.accent_color}
            variant="standard"
          />
        }
@ -95,7 +101,7 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
            sx={{
              maxWidth: "100%",
            }}
-            value={stagedSettings.display.font_family || "monospace"}
+            value={stagedSettings.style.font_family || "monospace"}
            variant="outlined"
          >
            <MenuItem value="monospace">Monospace</MenuItem>
@ -148,12 +154,12 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
              handleSettingsDisplayValueChange("font_scaling", value);
            }}
            step={10}
-            value={stagedSettings.display.font_scaling}
+            value={stagedSettings.style.font_scaling}
            valueLabelDisplay="auto"
          />
        }
      />
-      <SettingsCategoryTitle title="Advanced settings" />
+      <CategoryTitle title="Advanced settings" />
      <SettingsItem
        settingsDescription={
          <>
@ -192,7 +198,7 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
            }}
            size="small"
            type="number"
-            value={stagedSettings.display.transition_duration}
+            value={stagedSettings.style.transition_duration}
            variant="standard"
          />
        }
@ -235,7 +241,7 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
            }}
            size="small"
            type="number"
-            value={stagedSettings.display.radius}
+            value={stagedSettings.style.radius}
            variant="standard"
          />
        }
@ -278,7 +284,7 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
            }}
            size="small"
            type="number"
-            value={stagedSettings.display.window_height}
+            value={stagedSettings.style.window_height}
            variant="standard"
          />
        }
@ -321,7 +327,7 @@ export const SettingsTabDisplay: FC<SettingsTabDisplayProps> = ({ sx }) => {
            }}
            size="small"
            type="number"
-            value={stagedSettings.display.window_width}
+            value={stagedSettings.style.window_width}
            variant="standard"
          />
        }
--- a/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabWindow.tsx
+++ b/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabWindow.tsx
@ -2,7 +2,7 @@ import { Box, Chip, InputAdornment, MenuItem, Slider, Switch, TextField, Typogra
 import { useAtom } from "jotai";
 import { FC } from "react";
 import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
-import { SettingsCategoryTitle } from "../SettingsCategoryTitle";
+import { CategoryTitle } from "../CategoryTitle";
 import { SettingsItem } from "../SettingsItem";

 interface SettingsTabWindowProps {
@ -26,7 +26,7 @@ export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {

  return (
    <Box sx={{ sx }}>
-      <SettingsCategoryTitle title="Fullscreen" />
+      <CategoryTitle title="Fullscreen" />
      <SettingsItem
        settingsDescription={
          <>
@ -43,7 +43,7 @@ export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
          />
        }
      />
-      <SettingsCategoryTitle title="Titlebar Buttons" />
+      <CategoryTitle title="Titlebar Buttons" />
      <SettingsItem
        settingsDescription={
          <>
--- a/src/contexts/ThemeContext.tsx
+++ b/src/contexts/ThemeContext.tsx
@ -8,67 +8,67 @@ interface UserThemeProviderProps {
  children: ReactNode;
 }

-// palette and accent settings
-export const userPalette = {
-  primary: {
-    // light: '#a1c3f9',
-    main: "#8ab4f8",
-    // dark: '#4285f4',
-  },
-  secondary: {
-    // light: '#a1c3f9',
-    main: "#8ab4f8",
-    // dark: '#4285f4',
-  },
-  error: {
-    light: "#e57373",
-    main: "#f44336",
-    dark: "#d32f2f",
-  },
-  warning: {
-    light: "#ffb74d",
-    main: "#ffa726",
-    dark: "#f57c00",
-  },
-  info: {
-    light: "#a1c3f9",
-    main: "#8ab4f8",
-    dark: "#4285f4",
-  },
-  success: {
-    light: "#81c784",
-    main: "#66bb6a",
-    dark: "#388e3c",
-  },
-  grey: {
-    50: "#fafafa",
-    100: "#f5f5f5",
-    200: "#eeeeee",
-    300: "#e0e0e0",
-    400: "#bdbdbd",
-    500: "#9e9e9e",
-    600: "#757575",
-    700: "#616161",
-    800: "#424242",
-    900: "#212121",
-    A100: "#f5f5f5",
-    A200: "#eeeeee",
-    A400: "#bdbdbd",
-    A700: "#616161",
-  },
-  background: {
-    paper: "#303134",
-    default: "#202124",
-  },
-};
-
 export const UserThemeProvider: FC<UserThemeProviderProps> = ({ children }) => {
  const { settings } = useSettings();

+  // palette and accent settings
+  const userPalette = {
+    primary: {
+      // light: '#a1c3f9',
+      main: settings.style.accent_color || "#8ab4f8",
+      // dark: '#4285f4',
+    },
+    secondary: {
+      // light: '#a1c3f9',
+      main: settings.style.accent_color || "#8ab4f8",
+      // dark: '#4285f4',
+    },
+    error: {
+      light: "#e57373",
+      main: "#f44336",
+      dark: "#d32f2f",
+    },
+    warning: {
+      light: "#ffb74d",
+      main: "#ffa726",
+      dark: "#f57c00",
+    },
+    info: {
+      light: "#a1c3f9",
+      main: "#8ab4f8",
+      dark: "#4285f4",
+    },
+    success: {
+      light: "#81c784",
+      main: "#66bb6a",
+      dark: "#388e3c",
+    },
+    grey: {
+      50: "#fafafa",
+      100: "#f5f5f5",
+      200: "#eeeeee",
+      300: "#e0e0e0",
+      400: "#bdbdbd",
+      500: "#9e9e9e",
+      600: "#757575",
+      700: "#616161",
+      800: "#424242",
+      900: "#212121",
+      A100: "#f5f5f5",
+      A200: "#eeeeee",
+      A400: "#bdbdbd",
+      A700: "#616161",
+    },
+    background: {
+      paper: settings.style.dark_mode ? "#303134" : "#fff",
+      default: settings.style.dark_mode ? "#202124" : "#fff",
+    },
+  };
+
  // font family settings
  // TODO: figure out how to bundle fonts in tauri
  let fontFamily = "GoogleSans";
-  switch (settings.display.font_family) {
+  switch (settings.style.font_family) {
    case "sans_serif":
      fontFamily = "GoogleSans, sans-serif";
      break;
@ -84,7 +84,7 @@ export const UserThemeProvider: FC<UserThemeProviderProps> = ({ children }) => {
  }

  // font scaling settings
-  const fontSize = (settings.display.font_scaling / 100) * 14;
+  const fontSize = (settings.style.font_scaling / 100) * 14;

  const userTheme = createTheme({
    typography: {
@ -92,22 +92,22 @@ export const UserThemeProvider: FC<UserThemeProviderProps> = ({ children }) => {
      fontSize: fontSize,
    },
    palette: {
-      mode: "dark",
+      mode: settings.style.dark_mode ? "dark" : "light",
      ...userPalette,
    },
    transitions: {
      duration: {
-        shortest: settings.display.transition_duration,
-        shorter: settings.display.transition_duration,
-        short: settings.display.transition_duration,
+        shortest: settings.style.transition_duration,
+        shorter: settings.style.transition_duration,
+        short: settings.style.transition_duration,
        // most basic recommended timing
-        standard: settings.display.transition_duration,
+        standard: settings.style.transition_duration,
        // this is to be used in complex animations
-        complex: settings.display.transition_duration,
+        complex: settings.style.transition_duration,
        // recommended when something is entering screen
-        enteringScreen: settings.display.transition_duration,
+        enteringScreen: settings.style.transition_duration,
        // recommended when something is leaving screen
-        leavingScreen: settings.display.transition_duration,
+        leavingScreen: settings.style.transition_duration,
      },
    },
    components: {
--- a/src/lib/settings.ts
+++ b/src/lib/settings.ts
@ -3,7 +3,14 @@ import Paths from "./path";
 import { readTomlFile, writeTomlFile } from "./utils/toml";

 export const defaultSettings = {
-  display: {
+  background: {
+    background_color: "#8ab4f8" as string,
+    background_image: "" as string,
+    background_image_size: "cover" as string,
+    background_image_position: "center" as string,
+    background_image_repeat: "no-repeat" as string,
+  },
+  style: {
    accent_color: "#8ab4f8" as string,
    dark_mode: true as boolean,
    font_family: "monospace" as string,
--- a/src/pages/testing.tsx
+++ b/src/pages/testing.tsx
@ -32,7 +32,7 @@ export default function Testing() {
      <Button
        onClick={() => {
          updateSettings({
-            display: {
+            style: {
              dark_mode: false as boolean,
              accent_color: "#8ab4f8" as string,
              transition_duration: 200 as number,