diff --git a/client/PlayerView/ReactPlayerView.tsx b/client/PlayerView/ReactPlayerView.tsx
index 6bdb64bf..6cc7d6b2 100644
--- a/client/PlayerView/ReactPlayerView.tsx
+++ b/client/PlayerView/ReactPlayerView.tsx
@@ -72,6 +72,8 @@ export class ReactPlayerView {
 
   private renderPlayerView(newState: PlayerViewState) {
     this.playerViewState = newState;
+    document.body.classList.toggle("dark-mode", newState.settings.DarkMode);
+
     renderReact(
       <PlayerView
         encounterState={this.playerViewState.encounterState}
diff --git a/client/Settings/components/OptionsSettings.tsx b/client/Settings/components/OptionsSettings.tsx
index 67be4ae7..0b3183a3 100644
--- a/client/Settings/components/OptionsSettings.tsx
+++ b/client/Settings/components/OptionsSettings.tsx
@@ -114,6 +114,7 @@ export function OptionsSettings(props: {
       </Dropdown>
 
       <h3>Player View</h3>
+      <Toggle fieldName="PlayerView.DarkMode">Dark Mode</Toggle>
       <Dropdown
         fieldName="PlayerView.MonsterHPVerbosity"
         options={HpVerbosityOption}
diff --git a/common/PlayerViewSettings.ts b/common/PlayerViewSettings.ts
index e51ef5b9..a7ee36a9 100644
--- a/common/PlayerViewSettings.ts
+++ b/common/PlayerViewSettings.ts
@@ -13,6 +13,7 @@ export interface PlayerViewSettings {
   MonsterHPVerbosity: HpVerbosityOption;
   PlayerHPVerbosity: HpVerbosityOption;
   HideMonstersOutsideEncounter: boolean;
+  DarkMode: boolean;
   DisplayRoundCounter: boolean;
   DisplayTurnTimer: boolean;
   DisplayPortraits: boolean;
diff --git a/common/Settings.ts b/common/Settings.ts
index 45998645..8f12130f 100644
--- a/common/Settings.ts
+++ b/common/Settings.ts
@@ -76,6 +76,7 @@ export function getDefaultSettings(): Settings {
       MonsterHPVerbosity: HpVerbosityOption.ColoredLabel,
       PlayerHPVerbosity: HpVerbosityOption.ActualHP,
       HideMonstersOutsideEncounter: false,
+      DarkMode: false,
       DisplayRoundCounter: false,
       DisplayTurnTimer: false,
       DisplayPortraits: false,