diff --git a/prefs/theme.yaml b/prefs/theme.yaml
index d4b51666d..2a654d17b 100644
--- a/prefs/theme.yaml
+++ b/prefs/theme.yaml
@@ -26,7 +26,7 @@
 - name: zen.theme.disable-lightweight
   value: true
 
-- name: zen.theme.use-sysyem-colors
+- name: zen.theme.use-system-colors
   value: false
 
 - name: zen.theme.hide-tab-throbber
diff --git a/src/zen/common/ZenUIMigration.sys.mjs b/src/zen/common/ZenUIMigration.sys.mjs
index 18c3f6ca5..52fba005d 100644
--- a/src/zen/common/ZenUIMigration.sys.mjs
+++ b/src/zen/common/ZenUIMigration.sys.mjs
@@ -6,7 +6,7 @@ const { AppConstants } = ChromeUtils.importESModule('resource://gre/modules/AppC
 
 class nsZenUIMigration {
   PREF_NAME = 'zen.ui.migration.version';
-  MIGRATION_VERSION = 3;
+  MIGRATION_VERSION = 4;
 
   init(isNewProfile) {
     if (!isNewProfile) {
@@ -77,6 +77,14 @@ class nsZenUIMigration {
       Services.prefs.setStringPref('zen.theme.accent-color', '#ffb787');
     }
   }
+
+  _migrateV4() {
+    // Fix spelling mistake in preference name
+    Services.prefs.setBoolPref(
+      'zen.theme.use-system-colors',
+      Services.prefs.getBoolPref('zen.theme.use-sysyem-colors', false)
+    );
+  }
 }
 
 export var gZenUIMigration = new nsZenUIMigration();
diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs
index fdb6661da..f08aee8ee 100644
--- a/src/zen/workspaces/ZenGradientGenerator.mjs
+++ b/src/zen/workspaces/ZenGradientGenerator.mjs
@@ -1192,7 +1192,7 @@
     }
 
     shouldBeDarkMode(accentColor) {
-      if (Services.prefs.getBoolPref('zen.theme.use-sysyem-colors')) {
+      if (Services.prefs.getBoolPref('zen.theme.use-system-colors')) {
         return this.isDarkMode;
       }