added settings background section

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>
+  );
+};

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",
+            transitionDuration: settings.style.transition_duration + "ms",
-            width: maximisedState ? "100vw" : settings.display.window_width + "px",
+            width: maximisedState ? "100vw" : settings.style.window_width + "px",
           }}
         >
           <Box

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>
   );
 };

src/components/HeaderBar/HeaderBar.tsx

@@ -1,12 +1,8 @@
-import { BugReportOutlined } from "@mui/icons-material";
+import { Box, Stack } from "@mui/material";
-import { Box, IconButton, Stack } from "@mui/material";
-import { useRouter } from "next/router";
 import { Settings } from "./Settings/Settings";
 import { WindowButtons } from "./WindowButtons";
 
 export const HeaderBar = () => {
-  const router = useRouter();
-
   return (
     <Box
       className="titlebar"

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"
+    />
+  );
+};

src/components/HeaderBar/Settings/CategoryTitle.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={{

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"
+                label="Style"
-                value="display"
+                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 }}

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>
+  );
+};

src/components/HeaderBar/Settings/SettingsTabs/SettingsTabStyle.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"
           />
         }

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={
           <>

src/contexts/ThemeContext.tsx

@@ -8,16 +8,19 @@ interface UserThemeProviderProps {
   children: ReactNode;
 }
 
-// palette and accent settings
+export const UserThemeProvider: FC<UserThemeProviderProps> = ({ children }) => {
-export const userPalette = {
+  const { settings } = useSettings();
+
+  // palette and accent settings
+  const userPalette = {
     primary: {
       // light: '#a1c3f9',
-    main: "#8ab4f8",
+      main: settings.style.accent_color || "#8ab4f8",
       // dark: '#4285f4',
     },
     secondary: {
       // light: '#a1c3f9',
-    main: "#8ab4f8",
+      main: settings.style.accent_color || "#8ab4f8",
       // dark: '#4285f4',
     },
     error: {
@@ -57,18 +60,15 @@ export const userPalette = {
       A700: "#616161",
     },
     background: {
-    paper: "#303134",
+      paper: settings.style.dark_mode ? "#303134" : "#fff",
-    default: "#202124",
+      default: settings.style.dark_mode ? "#202124" : "#fff",
     },
-};
+  };
-
-export const UserThemeProvider: FC<UserThemeProviderProps> = ({ children }) => {
-  const { settings } = useSettings();
 
   // 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,
+        shortest: settings.style.transition_duration,
-        shorter: settings.display.transition_duration,
+        shorter: settings.style.transition_duration,
-        short: settings.display.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: {

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,

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,