Paddy/RaPla-Middleware-LinkGen
1
0
Fork 0
Code Issues 6 Pull Requests Projects Releases Wiki Activity

#5 Added Darkmode JS for dialog #10

Merged
Paddy merged 3 commits from spiritsofmayhem-darkmode-patch into master 2021-10-13 12:01:52 +00:00
Conversation 0 Commits 3 Files Changed 3 +15 -4
3 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -128,23 +128,23 @@
<!-- // GENERATE LINK BUTTON --> <!-- // GENERATE LINK BUTTON -->
</form> </form>
</div> </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 --> <!-- Modal -->
<div class="modal fade" id="linkModal" tabindex="-1" aria-labelledby="linkModalSuccess" aria-hidden="true"> <div class="modal fade" id="linkModal" tabindex="-1" aria-labelledby="linkModalSuccess" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header modal-toggle">
<h5 class="modal-title" id="linkModalTitle"></h5> <h5 class="modal-title" id="linkModalTitle"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body modal-toggle">
<div class="raplalinkcontainer--link"> <div class="raplalinkcontainer--link">
<p id="raplalinkcontainer--link"></p> <p id="raplalinkcontainer--link"></p>
</div> </div>
<p id="full-link"></p> <p id="full-link"></p>
</div> </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> <button type="button" class="btn btn-secondary" id="raplalinkcontainer--closeButton" data-bs-dismiss="modal"></button>
</div> </div>
</div> </div>

7
scripts.js
View File

@ -95,6 +95,13 @@ const toggleDarkMode = () => {
navElement.classList.toggle("nav--dark-mode"); navElement.classList.toggle("nav--dark-mode");
submitButton.classList.toggle("submitButton--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")) { if (colorModeToggleIcon.classList.contains("fa-moon")) {
colorModeToggleIcon.classList.remove("fa-moon"); colorModeToggleIcon.classList.remove("fa-moon");
colorModeToggleIcon.classList.add("fa-sun"); colorModeToggleIcon.classList.add("fa-sun");

4
styles.css
View File

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