diff --git a/core/themes/claro/css/components/skip-link.css b/core/themes/claro/css/components/skip-link.css
index dc85eff1e..ef1271d24 100644
--- a/core/themes/claro/css/components/skip-link.css
+++ b/core/themes/claro/css/components/skip-link.css
@@ -17,12 +17,18 @@
   left: 50%;
   padding: 1px 0.625rem 2px;
   transform: translateX(-50%);
-  color: #fff;
+  color: var(--color-white);
   border-radius: 0 0 0.625rem 0.625rem;
-  background: #444;
+  background: var(--color-gray-800);
   font-size: 0.94em;
 }
 
+.skip-link:hover,
+.skip-link:active {
+  color: var(--color-white);
+  background-color: var(--color-gray);
+}
+
 .skip-link:focus {
   text-decoration: none;
 }
diff --git a/core/themes/claro/css/components/skip-link.pcss.css b/core/themes/claro/css/components/skip-link.pcss.css
index 086a6605e..37168cb03 100644
--- a/core/themes/claro/css/components/skip-link.pcss.css
+++ b/core/themes/claro/css/components/skip-link.pcss.css
@@ -10,11 +10,16 @@
   left: 50%;
   padding: 1px 10px 2px;
   transform: translateX(-50%);
-  color: #fff;
+  color: var(--color-white);
   border-radius: 0 0 10px 10px;
-  background: #444;
+  background: var(--color-gray-800);
   font-size: 0.94em;
 }
+.skip-link:hover,
+.skip-link:active {
+  color: var(--color-white);
+  background-color: var(--color-gray);
+}
 .skip-link:focus {
   text-decoration: none;
 }