diff --git a/backend/src/models/config.rs b/backend/src/models/config.rs
index e81bcaa5..0e10fa43 100644
--- a/backend/src/models/config.rs
+++ b/backend/src/models/config.rs
@@ -25,6 +25,11 @@ pub enum ThemeMode {
     Light,
     Dark,
     System,
+    Purple,
+    Green,
+    Blue,
+    Orange,
+    Red,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize, TS)]
diff --git a/frontend/src/components/theme-provider.tsx b/frontend/src/components/theme-provider.tsx
index e4bf6945..e8b70820 100644
--- a/frontend/src/components/theme-provider.tsx
+++ b/frontend/src/components/theme-provider.tsx
@@ -33,7 +33,7 @@ export function ThemeProvider({
   useEffect(() => {
     const root = window.document.documentElement;
 
-    root.classList.remove('light', 'dark');
+    root.classList.remove('light', 'dark', 'purple', 'green', 'blue', 'orange', 'red');
 
     if (theme === 'system') {
       const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
diff --git a/shared/types.ts b/shared/types.ts
index c927df46..509686c4 100644
--- a/shared/types.ts
+++ b/shared/types.ts
@@ -6,7 +6,7 @@ export type ApiResponse<T> = { success: boolean, data: T | null, message: string
 
 export type Config = { theme: ThemeMode, executor: ExecutorConfig, disclaimer_acknowledged: boolean, onboarding_acknowledged: boolean, sound_alerts: boolean, sound_file: SoundFile, push_notifications: boolean, editor: EditorConfig, };
 
-export type ThemeMode = "light" | "dark" | "system";
+export type ThemeMode = "light" | "dark" | "system" | "purple" | "green" | "blue" | "orange" | "red";
 
 export type EditorConfig = { editor_type: EditorType, custom_command: string | null, };