diff --git a/app/helpers/set-theme.js b/app/helpers/set-theme.js
new file mode 100644
index 00000000000..f0d786ba655
--- /dev/null
+++ b/app/helpers/set-theme.js
@@ -0,0 +1,11 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function ([theme]) {
+  if (window.document) {
+    if (theme) {
+      window.document.documentElement.dataset.theme = theme;
+    } else {
+      delete window.document.documentElement.dataset.theme;
+    }
+  }
+});
diff --git a/app/styles/application.module.css b/app/styles/application.module.css
index 0557d2be4ec..1c7b338ae63 100644
--- a/app/styles/application.module.css
+++ b/app/styles/application.module.css
@@ -29,7 +29,7 @@
     --placeholder-bg2: hsl(213, 16%, 75%);
 }
 
-:global(.new-design) {
+:root[data-theme="new-design"] {
     --header-bg-color: var(--violet800);
     --main-bg: white;
     --footer-bg-color: var(--grey900);
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 234b0a0e4d3..5d46acc6a2b 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -1,6 +1,7 @@
 <HeadLayout />
 
 {{page-title "crates.io: Rust Package Registry" separator=' - ' prepend=true}}
+{{set-theme (if this.design.useNewDesign "new-design")}}
 
 <ProgressBar/>
 <NotificationContainer @position="top-right"/>
@@ -19,7 +20,4 @@
   <button type="button" local-class="toggle-design-button" {{on "click" this.design.toggle}}>
     Toggle Design
   </button>
-{{/if}}
-{{#if this.design.useNewDesign}}
-  {{set-body-class "new-design"}}
 {{/if}}
\ No newline at end of file
diff --git a/package.json b/package.json
index 57c35f17fc0..116c86ef8c4 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,6 @@
     "ember-qunit": "5.1.5",
     "ember-resolver": "8.0.3",
     "ember-router-scroll": "4.1.2",
-    "ember-set-body-class": "1.0.2",
     "ember-source": "3.28.8",
     "ember-svg-jar": "2.3.3",
     "ember-template-lint": "3.15.0",
diff --git a/tests/helpers/index.js b/tests/helpers/index.js
index 46b8e94c5e1..aaa59798700 100644
--- a/tests/helpers/index.js
+++ b/tests/helpers/index.js
@@ -10,18 +10,15 @@ export function setupApplicationTest(hooks, options) {
   upstreamSetupApplicationTest(hooks, options);
   setupMirage(hooks);
   setupSentryMock(hooks);
-  setupAppTestBodyClass(hooks);
+  setupAppTestDataAttr(hooks);
 }
 
-function setupAppTestBodyClass(hooks) {
-  const ID = 'app-test';
-
+function setupAppTestDataAttr(hooks) {
   hooks.beforeEach(function () {
-    this.bodyClass = this.owner.lookup('service:body-class');
-    this.bodyClass.register(ID, ['app-test']);
+    document.documentElement.dataset.appTest = '';
   });
 
   hooks.afterEach(function () {
-    this.bodyClass.deregister(ID);
+    delete document.documentElement.dataset.appTest;
   });
 }
diff --git a/vendor/qunit.css b/vendor/qunit.css
index 2c2059dc633..f6afed4c7a0 100644
--- a/vendor/qunit.css
+++ b/vendor/qunit.css
@@ -1,3 +1,3 @@
-body.app-test .ember-application {
+[data-app-test] .ember-application {
   background-color: var(--header-bg-color);
 }
diff --git a/yarn.lock b/yarn.lock
index 746ba5fae63..6c690e35e93 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6970,13 +6970,6 @@ ember-router-scroll@4.1.2:
     ember-cli-babel "^7.26.6"
     ember-compatibility-helpers "^1.2.5"
 
-ember-set-body-class@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/ember-set-body-class/-/ember-set-body-class-1.0.2.tgz#a970933f00e57ece6b6a88b96daf22f2374c3c34"
-  integrity sha512-SEsTwFp9SHTg4LgebhkUuLgYWg1VZD7I1QcrV2sTY583wu216OThoSs5szvS/KgSc1xD1Z22TFvOb848t2hGfw==
-  dependencies:
-    ember-cli-babel "^7.22.1"
-
 ember-source-channel-url@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ember-source-channel-url/-/ember-source-channel-url-3.0.0.tgz#bcd5be72c63fa0b8c390b3121783b462063e2a1b"