diff --git a/package-lock.json b/package-lock.json
index b622dc2e..5e48139a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2680,9 +2680,9 @@
       }
     },
     "@primer/primitives": {
-      "version": "0.0.0-883cd00",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-883cd00.tgz",
-      "integrity": "sha512-Iksh7wku62qRLKPDQg0y/dQIDhTd8FOYSgtXWXkr/Rg0RU14kWAHe31/WMOKWgfoCzFaEZf7lNbFFc2eyS1Dgw=="
+      "version": "0.0.0-da21f4f",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-da21f4f.tgz",
+      "integrity": "sha512-jCgtN/hWBNJNWCoLepvB10yXaS/g+DGZSLq4AaM2MHbJ4DAUJHzAjVE53LmtFAGwJEMpBRctq7KlJ/NclGBXKQ=="
     },
     "@reach/router": {
       "version": "1.3.3",
diff --git a/package.json b/package.json
index 1063457d..c8d4d188 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@primer/octicons": "^9.1.1",
-    "@primer/primitives": "0.0.0-883cd00"
+    "@primer/primitives": "0.0.0-da21f4f"
   },
   "devDependencies": {
     "@octokit/rest": "^16.34.0",
diff --git a/src/support/mixins/color-modes.scss b/src/support/mixins/color-modes.scss
index e3c61a0e..c0055c41 100644
--- a/src/support/mixins/color-modes.scss
+++ b/src/support/mixins/color-modes.scss
@@ -24,3 +24,13 @@
     }
   }
 }
+
+@mixin color-mode-var($name, $light, $dark) {
+  @include color-mode(light) {
+    --color-#{$name}: #{$light};
+  }
+
+  @include color-mode(dark) {
+    --color-#{$name}: #{$dark};
+  }
+}