Player View dark mode

cynicaloptimist · Mar 2, 2024 · 3492fdf · 3492fdf
1 parent d132f8f
commit 3492fdf
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -76,6 +76,7 @@ export function getDefaultSettings(): Settings {
       MonsterHPVerbosity: HpVerbosityOption.ColoredLabel,
       PlayerHPVerbosity: HpVerbosityOption.ActualHP,
       HideMonstersOutsideEncounter: false,
+      DarkMode: false,
       DisplayRoundCounter: false,
       DisplayTurnTimer: false,
       DisplayPortraits: false,