From f922321b57b6b665a160aef88ce79a22b88ad376 Mon Sep 17 00:00:00 2001 From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com> Date: Mon, 12 Feb 2024 02:29:34 +0000 Subject: [PATCH 1/5] feat: Add DarkModeManager for managing dark mode p --- src/utils/DarkModeManager.ts | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/utils/DarkModeManager.ts diff --git a/src/utils/DarkModeManager.ts b/src/utils/DarkModeManager.ts new file mode 100644 index 000000000..e2ae4938a --- /dev/null +++ b/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 }; From 6f96b80a6598f3ba47a36170d5b41ddf90f7fab8 Mon Sep 17 00:00:00 2001 From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com> Date: Mon, 12 Feb 2024 02:32:17 +0000 Subject: [PATCH 2/5] feat: Add dark mode styles for UI elements --- src/styles/darkmode.scss | 44 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 src/styles/darkmode.scss diff --git a/src/styles/darkmode.scss b/src/styles/darkmode.scss new file mode 100644 index 000000000..3ba41436f --- /dev/null +++ b/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); +} From 7192fe8afc9ffd7d88d68dd217a692ee7c6d93b3 Mon Sep 17 00:00:00 2001 From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com> Date: Mon, 12 Feb 2024 02:35:27 +0000 Subject: [PATCH 3/5] feat: Add dark mode toggle functionality to App co --- src/components/App.tsx | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/components/App.tsx diff --git a/src/components/App.tsx b/src/components/App.tsx new file mode 100644 index 000000000..688f443a4 --- /dev/null +++ b/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 ( +
+ + {/* Rest of the component */} +
+ ); + } +} + +export default App; From c1e0730aa62c322289d892ee95823dc0f73ba84d Mon Sep 17 00:00:00 2001 From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com> Date: Mon, 12 Feb 2024 02:38:47 +0000 Subject: [PATCH 4/5] feat: Updated src/index.tsx --- src/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.tsx b/src/index.tsx index 3a77da080..cfddfb098 100644 --- a/src/index.tsx +++ b/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"; From e56591179e175d8eb767b0b0005e22fb69a652a0 Mon Sep 17 00:00:00 2001 From: "sweep-ai[bot]" <128439645+sweep-ai[bot]@users.noreply.github.com> Date: Mon, 12 Feb 2024 02:40:15 +0000 Subject: [PATCH 5/5] feat: Updated README.md --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index 48895e6ed..aa50e9e8b 100644 --- a/README.md +++ b/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).