#5 Added Darkmode JS for dialog (#10)
Jenkins Production Deployment Details

Co-authored-by: SpiritsOfMayhem <d.huh@t-online.de>
Reviewed-on: #10
Co-authored-by: Patrick Müller <patrick@plutodev.de>
Co-committed-by: Patrick Müller <patrick@plutodev.de>
This commit is contained in:
Patrick Müller 2021-10-13 12:01:52 +00:00
parent 1e0eac9b80
commit 4f70e5a943
3 changed files with 15 additions and 4 deletions

View File

@ -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>

View File

@ -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");

View File

@ -8,6 +8,10 @@ body {
color: white;
}
.modal--dark-mode {
background-color: #222222;
color: white;
}
#raplalinkcontainer {
height: 100vh;