Sweep: Add a Darkmode with Togglebutton (✓ Sandbox Passed)

README.md

@@ -125,6 +125,14 @@ You can add token with the "Token" tool. Click anywhere on the map to place it.
 
 Navigate to the server using a web browser and wait at the home page. (The connection information is displayed in command prompt for convenience.) When the dungeon master is ready, they will push a map to your webpage. You will see either a black screen or a partially covered image. You can zoom in/out and pan the map. On a long click you will place a "point of interest" on the map that will show as a red circle.
 
+## Dark Mode Feature
+
+Dungeon Revealer now supports a dark mode to enhance the user experience in low light conditions. To toggle dark mode, users can click the `Toggle Dark Mode` button within the application. This setting persists across sessions.
+
+For developers looking to extend or modify the dark mode styles, please refer to `src/styles/darkmode.scss`. This file contains all the variables and styles for dark mode. You can adjust colors, shadows, and more to fit the theme of your game.
+
+To understand or modify the logic behind toggling dark mode, check out the `DarkModeManager` utility within `src/utils/DarkModeManager.ts`. This utility manages the dark mode state and provides methods to enable, disable, or toggle dark mode programmatically.
+
 ## Contributing
 
 See the [CONTRIBUTING.md](CONTRIBUTING.md).

src/components/App.tsx

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import { DarkModeManager } from '../utils/DarkModeManager';
+
+class App extends Component {
+  state = {
+    isDarkModeEnabled: false,
+  };
+
+  componentDidMount() {
+    const isDarkMode = DarkModeManager.isDarkModeEnabled();
+    this.setState({ isDarkModeEnabled: isDarkMode });
+  }
+
+  handleDarkModeToggle = () => {
+    DarkModeManager.toggleDarkMode();
+    this.setState(prevState => ({
+      isDarkModeEnabled: !prevState.isDarkModeEnabled,
+    }));
+  };
+
+  render() {
+    const { isDarkModeEnabled } = this.state;
+    return (
+      <div className={`App ${isDarkModeEnabled ? 'dark-mode' : ''}`}>
+        <button onClick={this.handleDarkModeToggle}>
+          Toggle Dark Mode
+        </button>
+        {/* Rest of the component */}
+      </div>
+    );
+  }
+}
+
+export default App;

src/index.tsx

@@ -6,6 +6,7 @@ import createCache from "@emotion/cache";
 import { ChakraProvider } from "@chakra-ui/react";
 import { getUrlPrefix, buildUrl } from "./public-url";
 import { globalStyles } from "./global-styles";
+import "./styles/darkmode.scss";
 import { Modal } from "./modal";
 import * as UserStyleSheetOrchestrator from "./user-style-sheet-orchestrator";
 import { registerSoundPlayback } from "./register-sound-playback";

src/styles/darkmode.scss

@@ -0,0 +1,44 @@
+:root {
+  --primary-color: #ffffff;
+  --background-color: #121212;
+  --secondary-color: #bbbbbb;
+  --accent-color: #007bff;
+  --shadow-color: rgba(0, 0, 0, 0.5);
+}
+
+.dark-mode {
+  --primary-color: #e0e0e0;
+  --background-color: #333333;
+  --secondary-color: #888888;
+  --accent-color: #4a90e2;
+  --shadow-color: rgba(255, 255, 255, 0.1);
+}
+
+body {
+  color: var(--primary-color);
+  background-color: var(--background-color);
+}
+
+.button {
+  background-color: var(--accent-color);
+  box-shadow: 0 2px 4px var(--shadow-color);
+}
+
+.button:hover {
+  background-color: darken(var(--accent-color), 10%);
+}
+
+.header, .footer {
+  background-color: darken(var(--background-color), 5%);
+  color: var(--secondary-color);
+}
+
+.token {
+  border-color: var(--accent-color);
+}
+
+.note {
+  background-color: lighten(var(--background-color), 5%);
+  color: var(--secondary-color);
+  box-shadow: 0 2px 4px var(--shadow-color);
+}

src/utils/DarkModeManager.ts

@@ -0,0 +1,27 @@
+class DarkModeManager {
+  private darkModeKey: string;
+
+  constructor() {
+    this.darkModeKey = 'darkMode';
+  }
+
+  enableDarkMode(): void {
+    localStorage.setItem(this.darkModeKey, 'true');
+  }
+
+  disableDarkMode(): void {
+    localStorage.setItem(this.darkModeKey, 'false');
+  }
+
+  toggleDarkMode(): void {
+    const isCurrentlyEnabled = this.isDarkModeEnabled();
+    localStorage.setItem(this.darkModeKey, isCurrentlyEnabled ? 'false' : 'true');
+  }
+
+  isDarkModeEnabled(): boolean {
+    const storedValue = localStorage.getItem(this.darkModeKey);
+    return storedValue === 'true';
+  }
+}
+
+export { DarkModeManager };