diff --git a/common/modules/themes.js b/common/modules/themes.js
index 05fe84e2..0fdbcbdb 100644
--- a/common/modules/themes.js
+++ b/common/modules/themes.js
@@ -9,5 +9,5 @@ export const variables = writable(localStorage.getItem('theme') || '')
 
 variables.subscribe(value => {
   localStorage.setItem('theme', value)
-  style.textContent = `:root{${value.replaceAll('}', '')}}`
+  style.textContent = `:root{${value.replace(/{|}/g, '')}}`
 })
diff --git a/common/views/Settings/InterfaceSettings.svelte b/common/views/Settings/InterfaceSettings.svelte
index e0ac54de..387d58c6 100644
--- a/common/views/Settings/InterfaceSettings.svelte
+++ b/common/views/Settings/InterfaceSettings.svelte
@@ -34,7 +34,7 @@
     <label for='disable-sidebar'>{settings.expandingSidebar ? 'On' : 'Off'}</label>
   </div>
 </SettingCard>
-<SettingCard title='CSS Variables' description='Used for custom themes. Can change colors, sizes, spacing and more. Best way to discover variables is to use the built-in devtools via Ctrl+Shift+I or F12.'>
+<SettingCard title='CSS Variables' description='Used for custom themes. Can change colors, sizes, spacing and more. Supports only variables. Best way to discover variables is to use the built-in devtools via Ctrl+Shift+I or F12.'>
   <textarea class='form-control w-500 mw-full bg-dark' placeholder='--accent-color: #e5204c;' bind:value={$variables} />
 </SettingCard>
 <SettingCard title='Card Type' description='What type of cards to display in menus.'>