Merge pull request #718 from craftcms/lupe/pt-1079-global-link-color-is-not-contrasted-enough-from-background

AugustMiller · web-flow · commit 04097d2694c9 · 2025-08-22T14:08:15.000-07:00
Updates colors globally to improve visibility of links and dark mode switcher; also adds underlines to inline links
diff --git a/docs/.vuepress/components/Poi.vue b/docs/.vuepress/components/Poi.vue
@@ -76,6 +76,6 @@ export default {
     }
     
     .active {
-        background-color: theme("colors.blue");
+        background-color: theme("colors.blue.default");
     }
 </style>
diff --git a/docs/.vuepress/components/See.vue b/docs/.vuepress/components/See.vue
@@ -79,7 +79,8 @@ export default {
     }
 
     .see-title {
-        @apply text-lg font-medium text-blue;
+        color: var(--link-color-default);
+        @apply text-lg font-medium;
     }
 
     .see:hover .see-title {
diff --git a/docs/.vuepress/sets/craft-cms.js b/docs/.vuepress/sets/craft-cms.js
@@ -203,7 +203,7 @@ module.exports = {
             "update",
             "deploy",
             "upgrade",
-            "configure",
+            ["configure", 'Configuration'],
           ]
         },
         {
diff --git a/docs/.vuepress/theme/components/ColorModeSwitch.vue b/docs/.vuepress/theme/components/ColorModeSwitch.vue
@@ -15,6 +15,8 @@
 
 <style lang="postcss">
 .dark-mode-toggle {
+  --lightswitch-color: var(--ui-component-color);
+  border-color: var(--lightswitch-color);
   @apply inline-block border border-2 rounded-full h-5 relative mt-4 outline-none appearance-none overflow-hidden;
   width: 44px;
   height: 22px;
@@ -30,7 +32,7 @@
     width: 14px;
     height: 14px;
     transition: all 0.25s cubic-bezier(0.86, 0, 0.07, 1);
-    background: #a0aec0;
+    background: var(--lightswitch-color);
 
     &:after {
       content: "";
@@ -42,7 +44,6 @@
 
 .dark-mode-toggle {
   &.dark {
-    border-color: rgba(45, 55, 72, 1);
     background: transparent;
 
     .knob {
diff --git a/docs/.vuepress/theme/components/DocSetPanel.vue b/docs/.vuepress/theme/components/DocSetPanel.vue
@@ -85,7 +85,7 @@
 
   .home {
     @apply text-sm relative;
-    color: #718096;
+    color: var(--text-color-muted);
 
     .back {
       @apply inline-block absolute mr-1 opacity-100;
@@ -119,7 +119,8 @@
       }
 
       .home-title {
-        @apply relative pl-0 text-blue;
+        color: var(--link-color-default);
+        @apply relative pl-0;
         left: -2px;
       }
     }
diff --git a/docs/.vuepress/theme/components/PostHeading.vue b/docs/.vuepress/theme/components/PostHeading.vue
@@ -51,6 +51,18 @@
       @apply p-0 text-xs mx-0 mb-2 tracking-wide uppercase;
     }
   }
+
+  .theme-dark & {
+    .post-heading {
+      .sidebar-links {
+        li {
+          a {
+            @apply text-blue-lighter px-0;
+          }
+        }
+      }
+    }
+  }
 }
 
 .version-warning {
diff --git a/docs/.vuepress/theme/components/RightBar.vue b/docs/.vuepress/theme/components/RightBar.vue
@@ -63,6 +63,7 @@ export default {
   }
 
   .sidebar-links {
+    --sidebar-link-color: var(--text-color-muted);
     @apply ml-0 pl-0 pb-4 overflow-y-auto;
     max-height: calc(100vh - 6.5rem);
 
@@ -73,12 +74,6 @@ export default {
 
     .sidebar-link {
       @apply mx-0 px-0 border-0 pr-4;
-      color: var(--sidebar-link-color);
-      opacity: 0.7;
-
-      &:hover {
-        @apply text-blue opacity-100;
-      }
 
       &.active {
         @apply opacity-100;
diff --git a/docs/.vuepress/theme/global-components/BrowserShot.vue b/docs/.vuepress/theme/global-components/BrowserShot.vue
@@ -143,7 +143,7 @@
 }
 
 .point--active {
-  background-color: theme("colors.blue");
+  background-color: theme("colors.blue.default");
   transform: scale(1.25);
 }
 </style>
diff --git a/docs/.vuepress/theme/styles/base.pcss b/docs/.vuepress/theme/styles/base.pcss
@@ -1,13 +1,17 @@
 :root {
   --text-color: theme("colors.slate");
+  --text-color-muted: #6D7480;
+  --ui-component-color: #8491A4;
   --bg-color: theme("colors.white");
   --sidebar-bg-color: theme("colors.softer");
   --search-bg-color: theme("colors.soft");
   --dl-color: theme("colors.soft-gray");
   --medium-zoom-overlay-color: theme("colors.soft");
   --heading-color: theme("colors.slate");
+  --link-color-default: theme("colors.blue.default");
+  --link-underline-color: #5E8BF7;
   --sidebar-link-color: theme("colors.slate");
-  --sidebar-active-link-color: theme("colors.blue");
+  --sidebar-active-link-color: theme("colors.blue.default");
   --hamburger-color: theme("colors.black");
   --tooltip-bg-color: theme("colors.white");
   --border-color: #e2e8f0;
@@ -50,7 +54,8 @@ body {
 }
 
 a {
-  @apply text-blue no-underline;
+  @apply no-underline;
+  color: var(--link-color-default);
 }
 
 img {
diff --git a/docs/.vuepress/theme/styles/color-mode.pcss b/docs/.vuepress/theme/styles/color-mode.pcss
@@ -1,38 +1,46 @@
 /* initial load, no class on html element */
 @media (prefers-color-scheme: light) {
   html:not([class]) {
-    --bg-color: theme("colors.white");
+    --bg-color: theme("colors.white")
   }
 }
 
 @media (prefers-color-scheme: dark) {
   html:not([class]) {
     --text-color: theme("colors.white");
+    --text-color-muted: #818EA2;
+    --ui-component-color: theme("colors.gray.600");
     --bg-color: theme("colors.gray.900");
     --sidebar-bg-color: rgba(0, 0, 0, 0.1);
     --search-bg-color: theme("colors.slate");
     --dl-color: theme("colors.soft-gray");
     --heading-color: theme("colors.gray.100");
-    --sidebar-link-color: theme("colors.gray.500");
     --border-color: theme("colors.slate");
     --doc-set-color: theme("colors.gray.200");
     --code-highlight-color: rgba(45, 55, 72, 0.25);
     --code-bg-color: theme("colors.cinder");
     --custom-block-bg-color: theme("colors.slate");
     --custom-block-border-color: transparent;
+
+    /* Links */
+    --link-color-default: theme("colors.blue.lighter");
+    --link-underline-color: var(--link-color-default);
+    --sidebar-link-color: theme("colors.gray.400");
+    --sidebar-active-link-color: var(--link-color-default);
   }
 }
 
 /* JS-applied, which may differ from browser setting */
 .theme-dark {
   --text-color: theme("colors.white");
+  --text-color-muted: #818EA2;
+  --ui-component-color: theme("colors.gray.600");
   --bg-color: theme("colors.gray.900");
   --sidebar-bg-color: rgba(0, 0, 0, 0.1);
   --search-bg-color: theme("colors.slate");
   --dl-color: rgba(0, 0, 0, 0.2);
   --medium-zoom-overlay-color: rgba(23, 29, 40, 1);
   --heading-color: theme("colors.gray.100");
-  --sidebar-link-color: theme("colors.gray.400");
   --hamburger-color: theme("colors.white");
   --tooltip-bg-color: theme("colors.gray.800");
   --border-color: theme("colors.slate");
@@ -42,6 +50,12 @@
   --custom-block-bg-color: theme("colors.slate");
   --custom-block-border-color: transparent;
 
+  /* Links */
+  --link-color-default: theme("colors.blue.lighter");
+  --link-underline-color: var(--link-color-default);
+  --sidebar-link-color: theme("colors.gray.400");
+  --sidebar-active-link-color: var(--link-color-default);
+
   .link-panel {
     background-color: var(--border-color);
     border-color: rgba(255, 255, 255, 0.05);
diff --git a/docs/.vuepress/theme/styles/typography.pcss b/docs/.vuepress/theme/styles/typography.pcss
@@ -98,8 +98,12 @@
     @apply text-base mb-2;
   }
 
-  a:hover {
+  p a,
+  li a {
     @apply underline;
+    text-decoration-color: var(--link-underline-color);
+    text-underline-offset: .15em;
+    text-decoration-thickness: .075em;
   }
 
   ::selection {
diff --git a/docs/5.x/README.md b/docs/5.x/README.md
@@ -1,5 +1,4 @@
 ---
-title: Craft CMS 5.x
 description: Official documentation for Craft CMS 5.x
 ---
 
diff --git a/docs/5.x/configure.md b/docs/5.x/configure.md
@@ -1,5 +1,4 @@
 ---
-title: Configuration
 description: Set up Craft to work with your team and infrastructure.
 sidebarDepth: 2
 related:
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -17,7 +17,10 @@ module.exports = {
         soft: "#f1f5fd",
         "soft-gray": "#f1f5f8",
         softer: "#fafbfe",
-        blue: "#4a7cf6",
+        blue: {
+          "lighter": "#86A7F9",
+          "default": "#2E68F5",
+        },
         red: "#da5a47",
         cinder: "#131119",
         green: "#27AB83",

Original file line number	Diff line number	Diff line change
`@@ -76,6 +76,6 @@ export default {`
`76`	`76`	`}`
`77`	`77`
`78`	`78`	`.active {`
`79`		`- background-color: theme("colors.blue");`
	`79`	`+ background-color: theme("colors.blue.default");`
`80`	`80`	`}`
`81`	`81`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -79,7 +79,8 @@ export default {`
`79`	`79`	`}`
`80`	`80`
`81`	`81`	`.see-title {`
`82`		`- @apply text-lg font-medium text-blue;`
	`82`	`+ color: var(--link-color-default);`
	`83`	`+ @apply text-lg font-medium;`
`83`	`84`	`}`
`84`	`85`
`85`	`86`	`.see:hover .see-title {`
Original file line number	Diff line number	Diff line change
`@@ -203,7 +203,7 @@ module.exports = {`
`203`	`203`	`"update",`
`204`	`204`	`"deploy",`
`205`	`205`	`"upgrade",`
`206`		`- "configure",`
	`206`	`+ ["configure", 'Configuration'],`
`207`	`207`	`]`
`208`	`208`	`},`
`209`	`209`	`{`
Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@`
`85`	`85`
`86`	`86`	`.home {`
`87`	`87`	`@apply text-sm relative;`
`88`		`- color: #718096;`
	`88`	`+ color: var(--text-color-muted);`
`89`	`89`
`90`	`90`	`.back {`
`91`	`91`	`@apply inline-block absolute mr-1 opacity-100;`
`@@ -119,7 +119,8 @@`
`119`	`119`	`}`
`120`	`120`
`121`	`121`	`.home-title {`
`122`		`- @apply relative pl-0 text-blue;`
	`122`	`+ color: var(--link-color-default);`
	`123`	`+ @apply relative pl-0;`
`123`	`124`	`left: -2px;`
`124`	`125`	`}`
`125`	`126`	`}`
Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,18 @@`
`51`	`51`	`@apply p-0 text-xs mx-0 mb-2 tracking-wide uppercase;`
`52`	`52`	`}`
`53`	`53`	`}`
	`54`	`+`
	`55`	`+ .theme-dark & {`
	`56`	`+ .post-heading {`
	`57`	`+ .sidebar-links {`
	`58`	`+ li {`
	`59`	`+ a {`
	`60`	`+ @apply text-blue-lighter px-0;`
	`61`	`+ }`
	`62`	`+ }`
	`63`	`+ }`
	`64`	`+ }`
	`65`	`+ }`
`54`	`66`	`}`
`55`	`67`
`56`	`68`	`.version-warning {`
Original file line number	Diff line number	Diff line change
`@@ -143,7 +143,7 @@`
`143`	`143`	`}`
`144`	`144`
`145`	`145`	`.point--active {`
`146`		`- background-color: theme("colors.blue");`
	`146`	`+ background-color: theme("colors.blue.default");`
`147`	`147`	`transform: scale(1.25);`
`148`	`148`	`}`
`149`	`149`	`</style>`