diff --git a/.changeset/warm-zoos-vanish.md b/.changeset/warm-zoos-vanish.md
new file mode 100644
index 00000000000..fb9460d1441
--- /dev/null
+++ b/.changeset/warm-zoos-vanish.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/page-footer-css": minor
+---
+
+Refactor page-footer color definitions to use CSS variables with fallbacks
diff --git a/components/page-footer/src/_mixin.scss b/components/page-footer/src/_mixin.scss
index cc7907529bf..c8cdc175992 100644
--- a/components/page-footer/src/_mixin.scss
+++ b/components/page-footer/src/_mixin.scss
@@ -12,13 +12,13 @@
 }
 
 @mixin utrecht-page-footer {
-  --utrecht-document-color: currentColor;
-  --utrecht-heading-color: currentColor;
-  --utrecht-link-color: currentColor;
-  --utrecht-link-focus-color: currentColor;
-  --utrecht-link-hover-color: currentColor;
-  --utrecht-link-active-color: currentColor;
-  --utrecht-link-visited-color: currentColor;
+  --utrecht-document-color: var(--utrecht-footer-document-color, currentColor);
+  --utrecht-heading-color: var(--utrecht-footer-heading-color, currentColor);
+  --utrecht-link-color: var(--utrecht-footer-link-color, currentColor);
+  --utrecht-link-focus-color: var(--utrecht-footer-link-focus-color, currentColor);
+  --utrecht-link-hover-color: var(--utrecht-footer-link-hover-color, currentColor);
+  --utrecht-link-active-color: var(--utrecht-footer-link-active-color, currentColor);
+  --utrecht-link-visited-color: var(--utrecht-footer-link-visited-color, currentColor);
 
   background-color: var(--utrecht-page-footer-background-color);
   background-image: var(--utrecht-page-footer-background-image);