fix: improve color contrast

jst-seminar-rostlab-tum · Dec 15, 2024 · e1483e7 · e1483e7
1 parent 4e56b4f
commit e1483e7
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 3 deletions.
diff --git a/src/components/About/ExternalLink.tsx b/src/components/About/ExternalLink.tsx
@@ -4,7 +4,13 @@ import React, { ReactNode } from 'react';
 
 function ExternalLink({ href, children, className }: { href: string; children: ReactNode; className?: string }) {
   return (
-    <Link isExternal size="lg" underline="hover" href={href} className={clsx('inline', className)}>
+    <Link
+      isExternal
+      size="lg"
+      underline="hover"
+      href={href}
+      className={clsx('inline text-link dark:text-link', className)}
+    >
       {children}
     </Link>
   );

diff --git a/src/components/About/StyledLink.tsx b/src/components/About/StyledLink.tsx
@@ -14,7 +14,13 @@ function StyledLink({
   isInternal?: boolean;
 }) {
   return (
-    <Link isExternal={!isInternal} size="lg" underline="hover" href={href} className={clsx('inline', className)}>
+    <Link
+      isExternal={!isInternal}
+      size="lg"
+      underline="hover"
+      href={href}
+      className={clsx('inline text-link dark:text-link', className)}
+    >
       {children}
     </Link>
   );

diff --git a/src/components/Sidebar/ThemeSwitch.tsx b/src/components/Sidebar/ThemeSwitch.tsx
@@ -32,6 +32,7 @@ export function ThemeSwitch({ isIconOnly = false }: ThemeSwitchProps) {
     <div className="flex items-center justify-between gap-4 w-full ml-1">
       {!isIconOnly && <small>Theme</small>}
       <Switch
+        aria-label="theme-switch"
         classNames={{
           wrapper: ['bg-yellow-200', 'group-data-[selected=true]:bg-primary'],
           thumb: ['bg-yellow-400', 'group-data-[selected=true]:bg-black'],

diff --git a/src/components/Topbar/Topbar.tsx b/src/components/Topbar/Topbar.tsx
@@ -10,6 +10,7 @@ import {
   NavbarMenuItem,
   NavbarMenuToggle,
 } from '@nextui-org/react';
+import clsx from 'clsx';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 
@@ -32,7 +33,12 @@ export function Topbar() {
       <NavbarContent className="hidden md:flex gap-4" justify="center">
         {pageLinks.map((item) => (
           <NavbarItem key={item.label} isActive={pathname === item.href}>
-            <Link href={item.href} className="text-lg" color={pathname === item.href ? 'primary' : 'foreground'}>
+            <Link
+              href={item.href}
+              className={clsx('text-lg text-black dark:text-white', {
+                'text-link dark:text-link': pathname === item.href,
+              })}
+            >
               {item.label}
             </Link>
           </NavbarItem>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -228,6 +228,7 @@ const config = {
             chartsLegendBackground: '#F5F5F5',
             chartsXAxisLine: '#a6a6a6',
             chartsGridLine: '#E6E6E6',
+            link: '#005999',
           },
         },
         dark: {
@@ -274,6 +275,7 @@ const config = {
             chartsGridLine: '#424242',
             chartForecast: '#0e6983',
             nutritionNotAnalyzed: '#A69F9F',
+            link: '#0A9BFF',
           },
         },
       },