diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index fb05b492..0659473b 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -19,6 +19,7 @@ import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
 import { themes } from './themes.mjs';
 import { settingsMap, useSettings, setLatestCode } from '../settings.mjs';
 import Loader from './Loader';
+import { settingPatterns } from '../settings.mjs';
 
 const { latestCode } = settingsMap.get();
 
@@ -45,6 +46,7 @@ const modules = [
 
 const modulesLoading = evalScope(
   controls, // sadly, this cannot be exported from core direclty
+  settingPatterns,
   ...modules,
 );
 
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 0e485f29..4c484bcd 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -1,5 +1,6 @@
 import { persistentMap } from '@nanostores/persistent';
 import { useStore } from '@nanostores/react';
+import { register } from '@strudel.cycles/core';
 
 export const defaultSettings = {
   activeFooter: 'intro',
@@ -33,3 +34,18 @@ export const setActiveFooter = (tab) => settingsMap.setKey('activeFooter', tab);
 
 export const setLatestCode = (code) => settingsMap.setKey('latestCode', code);
 export const setIsZen = (active) => settingsMap.setKey('isZen', !!active);
+
+const patternSetting = (key) =>
+  register(key, (value, pat) => {
+    value = Array.isArray(value) ? value.join(' ') : value;
+    if (value !== settingsMap.get()[key]) {
+      settingsMap.setKey(key, value);
+    }
+    return pat;
+  });
+
+export const theme = patternSetting('theme');
+export const fontFamily = patternSetting('fontFamily');
+export const fontSize = patternSetting('fontSize');
+
+export const settingPatterns = { theme, fontFamily, fontSize };