From 4f70e5a94354e7349f281406a5992726355e2101 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20M=C3=BCller?= <patrick@plutodev.de>
Date: Wed, 13 Oct 2021 12:01:52 +0000
Subject: [PATCH] #5 Added Darkmode JS for dialog (#10)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: SpiritsOfMayhem <d.huh@t-online.de>
Reviewed-on: https://git.plutodev.de/Paddy/RaPla-Middleware-LinkGen/pulls/10
Co-authored-by: Patrick Müller <patrick@plutodev.de>
Co-committed-by: Patrick Müller <patrick@plutodev.de>
---
 index.html | 8 ++++----
 scripts.js | 7 +++++++
 styles.css | 4 ++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 9a27323..72b5f6f 100644
--- a/index.html
+++ b/index.html
@@ -128,23 +128,23 @@
 				<!-- // GENERATE LINK BUTTON -->
 			</form>
 		</div>
-		<div class="raplalinkcontainer--nav__subtext">Made with <img height="10" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/microsoft/309/red-heart_2764-fe0f.png"/> by <a href="https://www.p4ddy.com">Paddy</a> & <a href="https://www.li54.dev">Lisa</a></div>
+		<div class="raplalinkcontainer--nav__subtext">Made with <img height="10" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/microsoft/309/red-heart_2764-fe0f.png"/> by <a href="https://www.p4ddy.com">Paddy</a> & <a href="https://www.li54.dev">Lisa</a> & <a href="https://www.davidhuh.de">Dave</a></div>
 
 		<!-- Modal -->
 		<div class="modal fade" id="linkModal" tabindex="-1" aria-labelledby="linkModalSuccess" aria-hidden="true">
 			<div class="modal-dialog modal-dialog-centered">
 				<div class="modal-content">
-					<div class="modal-header">
+					<div class="modal-header modal-toggle">
 						<h5 class="modal-title" id="linkModalTitle"></h5>
 						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 					</div>
-					<div class="modal-body">
+					<div class="modal-body modal-toggle">
 						<div class="raplalinkcontainer--link">
 							<p id="raplalinkcontainer--link"></p>
 						</div>
 						<p id="full-link"></p>
 					</div>
-					<div class="modal-footer">
+					<div class="modal-footer modal-toggle">
 						<button type="button" class="btn btn-secondary" id="raplalinkcontainer--closeButton" data-bs-dismiss="modal"></button>
 					</div>
 				</div>
diff --git a/scripts.js b/scripts.js
index cb9dfd9..6b275cf 100644
--- a/scripts.js
+++ b/scripts.js
@@ -95,6 +95,13 @@ const toggleDarkMode = () => {
     navElement.classList.toggle("nav--dark-mode");
     submitButton.classList.toggle("submitButton--dark-mode");
 
+    /* Dialog */
+    let modalContents = document.getElementsByClassName('modal-toggle')
+
+    for (content of modalContents) {
+        content.classList.toggle("modal--dark-mode")
+    }
+
     if (colorModeToggleIcon.classList.contains("fa-moon")) {
         colorModeToggleIcon.classList.remove("fa-moon");
         colorModeToggleIcon.classList.add("fa-sun");
diff --git a/styles.css b/styles.css
index eb1b6d8..b87f27b 100644
--- a/styles.css
+++ b/styles.css
@@ -8,6 +8,10 @@ body {
     color: white;
 }
 
+.modal--dark-mode {
+    background-color: #222222;
+    color: white;
+}
 
 #raplalinkcontainer {
     height: 100vh;