diff --git a/proto/anki/scheduler.proto b/proto/anki/scheduler.proto
index 55176e0ca..e9ee3b89f 100644
--- a/proto/anki/scheduler.proto
+++ b/proto/anki/scheduler.proto
@@ -301,17 +301,18 @@ message NextCardDataResponse {
     QueuedCards queue = 1;
     repeated AnswerButton answer_buttons = 2;
 
-    // TODO: We can probably make this a little faster by using oneof and
-    // preventing the partial_front and back being sent to svelte where it isn't
-    // used Alternatively we can use a completely different message for both
-    // Rust -> Python and the Python -> Svelte though this would be more
-    // complicated to implement.
     string front = 3;
     string back = 4;
     string css = 5;
+    string body_class = 6;
 
-    repeated card_rendering.RenderedTemplateNode partial_front = 6;
-    repeated card_rendering.RenderedTemplateNode partial_back = 7;
+    // TODO: We can probably make this a little faster by using oneof and
+    // preventing the partial_front and back being sent to svelte where it isn't
+    // used. Alternatively we can use a completely different message for both
+    // Rust -> Python and the Python -> Svelte though this would be more
+    // complicated to implement.
+    repeated card_rendering.RenderedTemplateNode partial_front = 7;
+    repeated card_rendering.RenderedTemplateNode partial_back = 8;
   }
 
   optional NextCardData next_card = 1;
diff --git a/qt/aqt/mediasrv.py b/qt/aqt/mediasrv.py
index 2a5bbbd52..fd73bee46 100644
--- a/qt/aqt/mediasrv.py
+++ b/qt/aqt/mediasrv.py
@@ -45,6 +45,7 @@ from aqt.operations import on_op_finished
 from aqt.operations.deck import update_deck_configs as update_deck_configs_op
 from aqt.progress import ProgressUpdate
 from aqt.qt import *
+from aqt.theme import ThemeManager
 from aqt.utils import aqt_data_path, show_warning, tr
 
 # https://forums.ankiweb.net/t/anki-crash-when-using-a-specific-deck/22266
@@ -645,6 +646,9 @@ def save_custom_colours() -> bytes:
     return b""
 
 
+theme_manager = ThemeManager()
+
+
 def next_card_data() -> bytes:
     raw = aqt.mw.col._backend.next_card_data_raw(request.data)
     data = NextCardDataResponse.FromString(raw)
@@ -666,6 +670,9 @@ def next_card_data() -> bytes:
 
     data.next_card.front = qside
     data.next_card.back = aside
+    # Night mode is handled by the frontend so that it works with the browsers theme if used outside of anki.
+    # Perhaps the OS class should be handled this way too?
+    data.next_card.body_class = theme_manager.body_classes_for_card_ord(card.ord, False)
 
     return data.SerializeToString()
 
diff --git a/rslib/src/scheduler/service/mod.rs b/rslib/src/scheduler/service/mod.rs
index 5d465caa8..d9cd5a009 100644
--- a/rslib/src/scheduler/service/mod.rs
+++ b/rslib/src/scheduler/service/mod.rs
@@ -417,6 +417,7 @@ impl crate::services::SchedulerService for Collection {
                     // Filled by python
                     front: "".to_string(),
                     back: "".to_string(),
+                    body_class: "".to_string(),
 
                     partial_front: rendered_nodes_to_proto(render.qnodes),
                     partial_back: rendered_nodes_to_proto(render.anodes),
diff --git a/ts/routes/reviewer-inner/index.ts b/ts/routes/reviewer-inner/index.ts
index 1544c28f6..8fedc8fbf 100644
--- a/ts/routes/reviewer-inner/index.ts
+++ b/ts/routes/reviewer-inner/index.ts
@@ -14,6 +14,9 @@ addEventListener("message", (e) => {
             if (e.data.css) {
                 style.innerHTML = e.data.css;
             }
+            if (e.data.bodyclass) {
+                document.body.className = e.data.bodyclass;
+            }
             break;
         }
         default: {
@@ -37,4 +40,3 @@ const theme = params.get("nightMode");
 if (theme !== null) {
     enableNightMode();
 }
-document.documentElement.classList.add("card");
diff --git a/ts/routes/reviewer/reviewer.ts b/ts/routes/reviewer/reviewer.ts
index 2ae4631bd..ef362bc7a 100644
--- a/ts/routes/reviewer/reviewer.ts
+++ b/ts/routes/reviewer/reviewer.ts
@@ -76,8 +76,8 @@ export class ReviewerState {
         document.addEventListener("keydown", this.onKeyDown.bind(this));
     }
 
-    updateHtml(htmlString: string, css?: string) {
-        this.iframe?.contentWindow?.postMessage({ type: "html", value: htmlString, css }, "*");
+    updateHtml(htmlString: string, css?: string, bodyclass?: string) {
+        this.iframe?.contentWindow?.postMessage({ type: "html", value: htmlString, css, bodyclass }, "*");
     }
 
     async showQuestion(answer: CardAnswer | null) {
@@ -91,7 +91,7 @@ export class ReviewerState {
         this.answerShown.set(false);
 
         const question = resp.nextCard?.front || "";
-        this.updateHtml(question, resp?.nextCard?.css);
+        this.updateHtml(question, resp?.nextCard?.css, resp?.nextCard?.bodyClass);
 
         this.beginAnsweringMs = Date.now();
     }