diff --git a/postcss.config.js b/postcss.config.js
index a99a8d1..1e617c9 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -10,6 +10,7 @@ module.exports = {
     require('postcss-import'),
     require('tailwindcss'),
     require('postcss-preset-env')({
+      importFrom: ['./src/styles/variables.js'],
       features: {
         'color-mod-function': true,
       },
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index f0a4ecd..e6423d7 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -4,7 +4,7 @@
 
 <style>
   nav {
-    border-color: color-mod(theme('colors.red.500') a(0.1));
+    border-color: color-mod(var(--theme) a(0.1));
   }
 
   li {
diff --git a/src/styles/variables.js b/src/styles/variables.js
new file mode 100644
index 0000000..c0cad39
--- /dev/null
+++ b/src/styles/variables.js
@@ -0,0 +1,5 @@
+module.exports = {
+  customProperties: {
+    '--theme': '#ff3e00',
+  },
+};