fix: improve dark theme contrast in download and legal/privacy modal (#2920)

components/LandingPageDownload.client.vue

@@ -1,12 +1,18 @@
 <template>
   <section
     id="download"
-    class="bg-primary-50 bg-opacity-50"
+    class="bg-primary-50/70 dark:bg-primary-900/80"
   >
     <div class="container mx-auto px-4 pt-6 pb-4 md:py-16">
       <div class="flex flex-wrap flex-col content-center">
-        <h1 class="text-center mb-3 text-5xl">Try it now</h1>
-        <h3 class="text-center mb-12 text-3xl">
+        <h1
+          class="text-center mb-3 text-5xl text-primary-900 dark:text-primary-50"
+        >
+          Try it now
+        </h1>
+        <h3
+          class="text-center mb-12 text-3xl text-primary-800 dark:text-primary-100"
+        >
           JabRef is free and works across all your devices.
         </h3>
         <div class="text-center">
@@ -45,74 +51,78 @@
             </div>
           </span>
         </div>
-        <div class="text-center pt-8 text-sm">
+        <div
+          class="text-center pt-8 text-sm text-primary-800 dark:text-primary-100"
+        >
           <span v-if="isWindows()">
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-600 hover:text-primary-700 dark:text-primary-300 dark:hover:text-primary-200"
               href="/download/win_zip"
               >Windows Portable</t-nuxtlink
             >
             <br />
             Also available for
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-600 hover:text-primary-700 dark:text-primary-300 dark:hover:text-primary-200"
               href="https://github.com/JabRef/jabref/releases/latest"
               >mac OS X and Linux</t-nuxtlink
             >
             <br />
           </span>
           <span v-if="isMac()">
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-600 hover:text-primary-700 dark:text-primary-300 dark:hover:text-primary-200"
               href="/download/mac_arm64_dmg"
               >Apple Silicon Portable (.dmg)</t-nuxtlink
             >
             or
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-600 hover:text-primary-700 dark:text-primary-300 dark:hover:text-primary-200"
               href="/download/mac_x86_64_dmg"
               >macOS Intel Portable (.dmg)</t-nuxtlink
             >
             <br />
-            <div class="text-xs text-wrap max-w-sm mx-auto pt-2">
+            <div
+              class="text-xs text-wrap max-w-sm mx-auto pt-2 text-primary-700 dark:text-primary-100"
+            >
               Unsure about your Mac type? Click the Apple icon, select "About
               This Mac". If it shows "Chip", you have Apple Silicon. Otherwise,
               it's Intel.
             </div>
             <br />
             Also available for
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-600 hover:text-primary-700 dark:text-primary-300 dark:hover:text-primary-200"
               href="https://github.com/JabRef/jabref/releases/latest"
               >Windows and Linux</t-nuxtlink
             >
             <br />
           </span>
           <span v-if="isLinux()">
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-600 hover:text-primary-700 dark:text-primary-300 dark:hover:text-primary-200"
               href="/download/linux_tar_gz"
               >Linux Portable</t-nuxtlink
             >
             <br />
             Also available for
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-600 hover:text-primary-700 dark:text-primary-300 dark:hover:text-primary-200"
               href="https://github.com/JabRef/jabref/releases/latest"
             >
               mac OS X and Windows
             </t-nuxtlink>
             <br />
           </span>
           <a
-            class="text-primary-500"
+            class="text-primary-600 hover:text-primary-700 dark:text-primary-300 dark:hover:text-primary-200"
             href="https://github.com/JabRef/jabref/blob/main/CHANGELOG.md"
           >
             Change Log
           </a>
           and
           <a
-            class="text-primary-500"
+            class="text-primary-600 hover:text-primary-700 dark:text-primary-300 dark:hover:text-primary-200"
             href="https://builds.jabref.org/main/"
             >Development Builds</a
           >

components/ModalDialog.vue

@@ -7,7 +7,7 @@
       <div class="relative w-auto my-6 mx-auto max-w-3xl">
         <!--content-->
         <div
-          class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-hidden focus:outline-hidden"
+          class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white text-slate-900 outline-hidden focus:outline-hidden"
         >
           <!--header-->
           <div
@@ -17,11 +17,11 @@
               {{ header }}
             </h3>
             <button
-              class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-hidden focus:outline-hidden"
+              class="p-1 ml-auto bg-transparent border-0 text-black opacity-80 hover:opacity-100 float-right text-3xl leading-none font-semibold outline-hidden focus:outline-hidden"
               @click="showModal = false"
             >
               <span
-                class="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-hidden focus:outline-hidden"
+                class="bg-transparent text-black opacity-80 h-6 w-6 text-2xl block outline-hidden focus:outline-hidden"
               >
                 ×
               </span>