Option to restore the default theme

Author: devklick

src/programs/Settings/Settings.tsx

@@ -13,6 +13,7 @@ import {
   StyledSections,
   StyledSettings,
 } from "./styles";
+import Button from "../../components/Button";
 
 interface SettingsSectionProps {
   title: string;
@@ -37,6 +38,8 @@ function SettingsSection(section: SettingsSectionProps) {
         return "color";
       case "url":
         return "url";
+      case "button":
+        return "button";
       default:
         return "text";
     }
@@ -62,15 +65,26 @@ function SettingsSection(section: SettingsSectionProps) {
     }, 1000);
   }
 
-  return (
-    <StyledSection>
-      <StyledSectionTitle>{section.title}</StyledSectionTitle>
-      <StyledSectionDescription>{section.description}</StyledSectionDescription>
+  function getInputField() {
+    const type = getInputType(section.type);
+    if (type === "button")
+      return (
+        <Button name="Restore" onClick={() => section.onValueChanged("")} />
+      );
+    return (
       <StyledSectionValue
         type={getInputType(section.type)}
         value={String(value)}
         onChange={handleChange}
-      ></StyledSectionValue>
+      />
+    );
+  }
+
+  return (
+    <StyledSection>
+      <StyledSectionTitle>{section.title}</StyledSectionTitle>
+      <StyledSectionDescription>{section.description}</StyledSectionDescription>
+      {getInputField()}
     </StyledSection>
   );
 }

src/programs/Settings/settingsPageConfig.ts

@@ -76,6 +76,13 @@ export function getPages(
             systemsSettings.setIconColor(value);
           },
         },
+        {
+          title: "Restore Default Theme",
+          description: "Revert to the default theme",
+          type: "button",
+          onValueChanged: () => systemsSettings.restoreDefaultTheme(),
+          currentValue: undefined,
+        },
       ],
     },
   };

src/stores/systemSettingsStore.ts

@@ -1,6 +1,24 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
+type FunctionPropertyNames<T> = {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  [K in keyof T]: T[K] extends Function ? K : never;
+}[keyof T];
+
+type Theme = Omit<
+  SystemSettingState,
+  FunctionPropertyNames<SystemSettingState>
+>;
+
+const defaultTheme: Theme = {
+  mainColor: "#2e3440",
+  accentColor: "#454e60",
+  fontColor: "#ffffff",
+  iconColor: "#9298b9",
+  background: "https://regolith-linux.org/images/releases/nord-dark.png",
+};
+
 export interface SystemSettingState {
   mainColor: string;
   accentColor: string;
@@ -12,16 +30,13 @@ export interface SystemSettingState {
   setFontColor: (color: string) => void;
   setIconColor: (color: string) => void;
   setBackground: (url: string) => void;
+  restoreDefaultTheme: () => void;
 }
 
 export const useSystemSettings = create<SystemSettingState>()(
   persist(
     (set) => ({
-      mainColor: "#2e3440",
-      accentColor: "#454e60",
-      fontColor: "#ffffff",
-      iconColor: "#9298b9",
-      background: "https://regolith-linux.org/images/releases/nord-dark.png",
+      ...defaultTheme,
       setAccentColor(accentColor) {
         set({ accentColor });
       },
@@ -37,6 +52,9 @@ export const useSystemSettings = create<SystemSettingState>()(
       setBackground(background) {
         set({ background });
       },
+      restoreDefaultTheme() {
+        set({ ...defaultTheme });
+      },
     }),
     {
       name: "system-settings",