Merge pull request #131 from inkonchain/feat/add-more-contrast-links-dark-mode

feat: add more contrast links dark mode

Author: inkjesse

src/components/SidebarTitleComponent.tsx

@@ -28,7 +28,7 @@ export const SidebarTitleComponent: React.FC<SidebarTitleComponentProps> = ({
         {
           "text-ink-grey-400 dark:text-magic-white dark:hover:text-ink-grey-700 hover:text-ink-grey-700 hover:bg-ink-grey-100":
             !isActive,
-          "bg-magic-semi-deep-purple/15 text-magic-purple": isActive,
+          "bg-magic-semi-deep-purple/15 text-magic-purple dark:text-magic-soft-pink": isActive,
         }
       )}
     >

src/globals.css

@@ -20,12 +20,12 @@
     @apply !text-magic-deep-purple dark:!text-magic-white;
   }
 
-  a {
-    @apply !text-magic-purple dark:!text-magic-semi-deep-purple;
+  a:not(.nextra-sidebar-container a):not(nav a):not(.toc-link) {
+    @apply !text-magic-purple dark:!text-magic-soft-pink !underline hover:!text-magic-purple/80 dark:hover:!text-magic-soft-pink/80;
   }
 
   nav > a {
-    @apply !text-ink-grey-400 dark:!text-magic-white dark:hover:!text-ink-grey-400 hover:!text-ink-grey-700;
+    @apply !text-ink-grey-400 dark:!text-magic-white dark:hover:!text-ink-grey-400 hover:!text-ink-grey-700 !no-underline;
   }
 
   nav > a > svg {
@@ -43,6 +43,13 @@
   .toc-link {
     @apply cursor-pointer !text-ink-grey-400 dark:!text-magic-white group-hover:!text-ink-grey-700 dark:group-hover:!text-ink-grey-700;
   }
+
+  /* We need to override the underline for nav links and sidebar items */
+  nav > a,
+  a:has(div.ink-sidebar-item),
+  .toc-link {
+    @apply no-underline;
+  }
 }
 
 /* Some custom hacks to override some issues with Nextra */

tailwind.config.js

@@ -15,6 +15,7 @@ module.exports = {
           black: "#101114",
           white: "#F0EFFF",
           'soft-pink': "#F7D2FE",
+          'link-purple': '#B794FF',
         },
         'ink-grey': {
           100: '#F3F4F6',

theme.config.tsx

@@ -25,7 +25,7 @@ const config: DocsThemeConfig = {
       return (
         <a
           {...props}
-          className="text-magic-purple transition-all hover:underline"
+          className="text-magic-purple underline decoration-1 transition-all hover:text-magic-purple/80 dark:text-magic-soft-pink dark:hover:text-magic-soft-pink/80"
         />
       );
     },