fix: 🐛 Dark Mode use Foundry native implementation

fvtt-fria-ligan · Jul 22, 2024 · c26b1ff · c26b1ff
1 parent 8b4fe2b
commit c26b1ff
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 19 deletions.
diff --git a/.changeset/funny-glasses-double.md b/.changeset/funny-glasses-double.md
@@ -0,0 +1,5 @@
+---
+"forbidden-lands": patch
+---
+
+Dark mode is now toggled through the Foundry core settings (which use the browser settings as default). Fixes to some rendering issues in dark mode
diff --git a/src/forbidden-lands.ts b/src/forbidden-lands.ts
@@ -72,9 +72,6 @@ Hooks.once("init", () => {
 	registerFonts();
 	modifyConfig();
 
-	// Add dark mode class to html tag
-	if (game.settings.get("forbidden-lands", "darkmode"))
-		$("html").addClass("dark");
 	// Remove borders if the setting is enabled
 	if (game.settings.get("forbidden-lands", "removeBorders"))
 		$("html").addClass("no-borders");

diff --git a/src/system/core/settings.js b/src/system/core/settings.js
@@ -320,17 +320,6 @@ export default function registerSettings() {
 	/*  Visible                                     */
 	/* -------------------------------------------- */
 
-	// System Settings
-	game.settings.register("forbidden-lands", "darkmode", {
-		name: "SETTINGS.DARKMODE",
-		hint: "SETTINGS.DARKMODE_HINT",
-		scope: "client",
-		config: true,
-		default: false,
-		requiresReload: true,
-		type: Boolean,
-	});
-
 	game.settings.register("forbidden-lands", "removeBorders", {
 		name: "SETTINGS.REMOVEBORDERS",
 		hint: "SETTINGS.REMOVEBORDERS_HINT",

diff --git a/src/system/core/styles/_index.scss b/src/system/core/styles/_index.scss
@@ -1,6 +1,6 @@
 @forward "variables";
 
-html.dark {
+body.theme-dark {
 
 	#sidebar,
 	#players,
@@ -13,7 +13,10 @@ html.dark {
 	#hotbar #hotbar-directory-controls,
 	#navigation #nav-toggle,
 	#navigation #scene-list .scene.view,
-	.app.window-app {
+	.app.window-app,
+	.app.dialog,
+	.application.dialog,
+	.application.window-app {
 		border-image-source: url(./assets/journal-art/box-border-large-dark.webp);
 	}
 
@@ -46,7 +49,7 @@ html.dark {
 	.journal-page-header h1,
 	.journal-page-header h2,
 	.journal-page-header h3 {
-		color: var(--color-theme-background);
+		color: var(--color-theme-text);
 	}
 
 	.journal-sheet .journal-header .title {
@@ -59,7 +62,7 @@ html.dark {
 }
 
 html.no-borders,
-html.dark.no-borders {
+html.no-borders body.theme-dark {
 
 	#sidebar,
 	#players,

diff --git a/src/system/core/styles/variables.scss b/src/system/core/styles/variables.scss
@@ -91,12 +91,13 @@ body {
 	--line-height-30: 1.875rem;
 }
 
-html.dark {
+body.theme-dark {
 	--color-theme-background: var(--color-theme-alt-1000);
 	--color-theme-alt-600: var(--color-theme-gray-600);
 	--color-theme-alt-800: var(--color-theme-gray-800);
 	--color-theme-gray-200: #dddddd96;
 	--color-highlight: #f0f0e0;
 	--color-text-dark-5: #555;
 	--color-text-dark-6: #555;
+	--color-light-3: var(--color-highlight);
 }