diff --git a/assets/css/main.css b/assets/css/main.css
index 14ff03ce4..62da660df 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -70,6 +70,20 @@
   --color-error-900: var(--color-red-900);
 }
 
+@layer base {
+  :root {
+    --surface-base: #ffffff;
+    --surface-raised: #f0f2f8;
+    --surface-overlay: #e8ebf3;
+  }
+
+  .dark {
+    --surface-base: #12121e;
+    --surface-raised: #1a1a2e;
+    --surface-overlay: #222238;
+  }
+}
+
 @layer utilities {
   .flip-horizontal {
     --tw-scale-x: -1;
diff --git a/components/LandingPageDownload.client.vue b/components/LandingPageDownload.client.vue
index 5c7a5feff..c76d6c059 100644
--- a/components/LandingPageDownload.client.vue
+++ b/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:[background-color:var(--surface-raised)]"
   >
     <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,17 +51,19 @@
             </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-200 dark:hover:text-primary-100"
               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-200 dark:hover:text-primary-100"
               href="https://github.com/JabRef/jabref/releases/latest"
               >mac OS X and Linux</t-nuxtlink
             >
@@ -63,18 +71,20 @@
           </span>
           <span v-if="isMac()">
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-600 hover:text-primary-700 dark:text-primary-200 dark:hover:text-primary-100"
               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-200 dark:hover:text-primary-100"
               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.
@@ -82,7 +92,7 @@
             <br />
             Also available for
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-600 hover:text-primary-700 dark:text-primary-200 dark:hover:text-primary-100"
               href="https://github.com/JabRef/jabref/releases/latest"
               >Windows and Linux</t-nuxtlink
             >
@@ -90,14 +100,14 @@
           </span>
           <span v-if="isLinux()">
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-600 hover:text-primary-700 dark:text-primary-200 dark:hover:text-primary-100"
               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-200 dark:hover:text-primary-100"
               href="https://github.com/JabRef/jabref/releases/latest"
             >
               mac OS X and Windows
@@ -105,14 +115,14 @@
             <br />
           </span>
           <a
-            class="text-primary-500"
+            class="text-primary-600 hover:text-primary-700 dark:text-primary-200 dark:hover:text-primary-100"
             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-200 dark:hover:text-primary-100"
             href="https://builds.jabref.org/main/"
             >Development Builds</a
           >
diff --git a/components/ModalDialog.vue b/components/ModalDialog.vue
index 3a0e22b08..b85854d36 100644
--- a/components/ModalDialog.vue
+++ b/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 h-6 w-6 text-2xl block outline-hidden focus:outline-hidden"
               >
                 ×
               </span>