diff --git a/.cspell-project-words.txt b/.cspell-project-words.txt
index 20ae7c91f9d769b764b823e47721b2f389179da9..aeaa07c4a5b9924c3ce9b1fe010c649e6fca4112 100644
--- a/.cspell-project-words.txt
+++ b/.cspell-project-words.txt
@@ -14,4 +14,3 @@ CURLOPT
 RETURNTRANSFER
 varchar
 techdebt
-darkmode
diff --git a/css/gin.css b/css/gin.css
index cb08e3e50b76078615cdaae5fdca471d82e7e66a..75c821c7756440dfbb5c284fa67575115fc728e2 100644
--- a/css/gin.css
+++ b/css/gin.css
@@ -512,3 +512,26 @@
   /* Move the dropbutton slightly away from the "installed" badge. */
   margin-block-start: 4px;
 }
+.gin--dark-mode .project_status-indicator__label {
+  color: var(--gin-status-success-text);
+}
+
+[data-gin-accent="blue"] .pb-layout__main .views-bulk-actions {
+  background: rgba(var(--gin-color-sticky-rgb), 0.9);
+}
+
+.gin--dark-mode [data-gin-accent="blue"] .pb-layout__main .views-bulk-actions {
+  background: rgba(27, 27, 29, 0.8);
+}
+
+[data-gin-accent="blue"] .views-bulk-actions__item {
+  color: var(--gin-color-text-light);
+}
+
+.gin--dark-mode button.project_status-indicator.project_status-indicator {
+  margin-bottom: 5px;
+  margin-left: 5px;
+  background: none;
+  font-size: 16px;
+  font-weight: 700;
+}
diff --git a/css/pb.css b/css/pb.css
index ff014832df20f3689a6814473af5ecdf742f0e67..f8ac39f1c52df6a028c10ce1ffa4517c082e502d 100644
--- a/css/pb.css
+++ b/css/pb.css
@@ -1108,20 +1108,3 @@
   padding: 5px;
   font-size: 0.79rem;
 }
-/* @todo Remove this class, and its uses in the Svelte app, when we have a cleaner
- * way to ensure that it looks good in Gin. */
-.pb-layout__main .views-bulk-actions-gin {
-  background: rgba(var(--gin-color-sticky-rgb), 0.9);
-}
-
-.views-bulk-actions__item-gin {
-  color: var(--gin-color-text-light);
-}
-
-button.project_status-indicator.project_status-indicator-gin {
-  margin-bottom: 5px;
-  margin-left: 5px;
-  background: none;
-  font-size: 16px;
-  font-weight: 700;
-}
diff --git a/sveltejs/public/build/bundle.js b/sveltejs/public/build/bundle.js
index 076fffd0663ee9781d0a35db2556bdb153284a18..06a845d9e7cb46cd312ebf43b500a48ec698798b 100644
Binary files a/sveltejs/public/build/bundle.js and b/sveltejs/public/build/bundle.js differ
diff --git a/sveltejs/public/build/bundle.js.map b/sveltejs/public/build/bundle.js.map
index a0de0f37d72a61d19b6071f4d02e33cb01921c39..093692945097b7a3aef08ca240467c94f6cf73ea 100644
Binary files a/sveltejs/public/build/bundle.js.map and b/sveltejs/public/build/bundle.js.map differ
diff --git a/sveltejs/src/ProcessInstallListButton.svelte b/sveltejs/src/ProcessInstallListButton.svelte
index c0c7564815ca70ff3b871a0144e90fd40764c81a..8c6668dd69827b0acaeb9067cc9aa0389f741da9 100644
--- a/sveltejs/src/ProcessInstallListButton.svelte
+++ b/sveltejs/src/ProcessInstallListButton.svelte
@@ -10,8 +10,6 @@
   let loading = false;
 
   const { Drupal } = window;
-  let buttonClasses;
-  let bulkActionClasses = '';
 
   $: currentInstallList = $installList || [];
   $: installListLength = currentInstallList.length;
@@ -29,26 +27,15 @@
     projectsToActivate = [];
     clearInstallList();
   }
-  $: {
-    // @see css/pb.css
-    if ('gin' in drupalSettings) {
-      buttonClasses = 'button--small button button--primary';
-      if (drupalSettings.gin.darkmode !== '1') {
-        bulkActionClasses = 'views-bulk-actions-gin';
-      }
-    } else {
-      buttonClasses = 'install_button';
-    }
-  }
 </script>
 
 <div
-  class=" views-bulk-actions pb-install_bulk_actions {bulkActionClasses}"
+  class="views-bulk-actions pb-install_bulk_actions"
   data-drupal-sticky-vbo={installListLength !== 0}
 >
   <div
     class="views-bulk-actions__item
-  views-bulk-actions__item--status views-bulk-actions__item-gin"
+  views-bulk-actions__item--status"
   >
     {#if installListLength === 0}
       {Drupal.t('No projects selected')}
@@ -61,7 +48,7 @@
     {/if}
   </div>
   <button
-    class="project__action_button install_button_common {buttonClasses}"
+    class="project__action_button install_button_common install_button button--small button button--primary"
     on:click={handleClick}
   >
     {#if loading}
diff --git a/sveltejs/src/Project/ProjectIcon.svelte b/sveltejs/src/Project/ProjectIcon.svelte
index fa19914a0452ffba41c8638408d7fd0ae903af53..b8474374ad1cbb921adae4cf8796aec19ae3c60f 100644
--- a/sveltejs/src/Project/ProjectIcon.svelte
+++ b/sveltejs/src/Project/ProjectIcon.svelte
@@ -40,11 +40,8 @@
   };
   const { alt, title } = typeToImg[type];
   let { path } = typeToImg[type];
-  if (
-    'gin' in drupalSettings &&
-    drupalSettings.gin.darkmode === '1' &&
-    type === 'installed'
-  ) {
+  // Change the path when gin dark theme is enabled.
+  if (document.querySelector('.gin--dark-mode') && type === 'installed') {
     path = 'green-checkmark-icon';
   }
 </script>
diff --git a/sveltejs/src/Project/ProjectStatusIndicator.svelte b/sveltejs/src/Project/ProjectStatusIndicator.svelte
index 4ae3a375f2b3289ad662c9e7736efd25559cbba5..2e812ce9e5c2c9fc6693a7e06977c86bff739a0a 100644
--- a/sveltejs/src/Project/ProjectStatusIndicator.svelte
+++ b/sveltejs/src/Project/ProjectStatusIndicator.svelte
@@ -1,27 +1,16 @@
 <script>
   export let project;
   export let statusText;
-  let buttonClasses = '';
-  let buttonLabelClasses = '';
 
   const { Drupal } = window;
-  $: {
-    // @see css/pb.css
-    if ('gin' in drupalSettings && drupalSettings.gin.darkmode === '1') {
-      buttonClasses = 'project_status-indicator-gin';
-      buttonLabelClasses = 'project_status-indicator__label-gin';
-    } else {
-      buttonLabelClasses = 'project_status-indicator__label';
-    }
-  }
 </script>
 
-<button class="project_status-indicator {buttonClasses}" aria-disabled="true">
+<button class="project_status-indicator" aria-disabled="true">
   <slot />
   <span class="visually-hidden">
     {Drupal.t('@module is', {
       '@module': `${project.title}`,
     })}
   </span>
-  <span class={buttonLabelClasses}>{statusText}</span>
+  <span class="project_status-indicator__label">{statusText}</span>
 </button>