Updates colors globally to improve visibility of links and dark mode switcher; also adds underlines to inline links

docs/.vuepress/components/Poi.vue

@@ -76,6 +76,6 @@ export default {
     }
 
     .active {
-        background-color: theme("colors.blue");
+        background-color: theme("colors.blue.default");
     }
 </style>

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 {

docs/.vuepress/sets/craft-cms.js

@@ -203,7 +203,7 @@ module.exports = {
             "update",
             "deploy",
             "upgrade",
-            "configure",
+            ["configure", 'Configuration'],
           ]
         },
         {

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 {

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;
       }
     }

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 {

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;

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>

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 {

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);

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 {

docs/5.x/README.md

@@ -1,5 +1,4 @@
 ---
-title: Craft CMS 5.x
 description: Official documentation for Craft CMS 5.x
 ---
 

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:

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",