diff --git a/src/components/Theme/@types/component.ts b/src/components/Theme/@types/component.ts
index 7788d6b4..325faed0 100644
--- a/src/components/Theme/@types/component.ts
+++ b/src/components/Theme/@types/component.ts
@@ -50,5 +50,5 @@ export interface Theme {
 export interface CustomTheme {
   colour?: Partial<Colour>;
   font?: Partial<CustomFont>;
-  customProperties?: unknown;
+  [customProperty: string]: unknown;
 }
diff --git a/src/components/Theme/Theme.svelte b/src/components/Theme/Theme.svelte
index 8185c7e4..002dfcb7 100644
--- a/src/components/Theme/Theme.svelte
+++ b/src/components/Theme/Theme.svelte
@@ -14,7 +14,7 @@
   import mergeThemes from './utils/merge.js';
 
   // Types
-  import type { CustomTheme } from './@types/component';
+  import type { CustomTheme, Theme } from './@types/component';
   import type { Snippet } from 'svelte';
   type Base = 'light' | 'dark';
 
@@ -22,7 +22,7 @@
     /** Custom theme object. Can be a partial theme with just
      * what you want to change.
      */
-    theme?: CustomTheme;
+    theme?: CustomTheme | Theme;
     /**
      * Base theme is one of `light` or `dark` and will be merged
      * with your custom theme to fill in any values you don't