Force dark mode on update notifications

This commit is contained in:
Reece Browne 2025-08-05 20:06:13 +01:00
parent 0c072c56b5
commit 7c34373e76
2 changed files with 74 additions and 22 deletions

View File

@ -45,6 +45,25 @@ function setMode(mode) {
tables.forEach((table) => {
table.classList.add("table-dark");
});
// Handle dynamically created accordion elements
var accordionItems = document.querySelectorAll(".accordion-item");
accordionItems.forEach((item) => {
item.style.color = "var(--md-sys-color-on-surface)";
item.style.backgroundColor = "var(--md-sys-color-surface-5)";
item.style.border = "1px solid var(--md-sys-color-outline-variant)";
});
var accordionButtons = document.querySelectorAll(".accordion-button");
accordionButtons.forEach((button) => {
button.style.color = "var(--md-sys-color-on-surface)";
button.style.backgroundColor = "var(--md-sys-color-surface-5)";
button.style.borderColor = "var(--md-sys-color-outline-variant)";
});
var accordionBodies = document.querySelectorAll(".accordion-body");
accordionBodies.forEach((body) => {
body.style.color = "var(--md-sys-color-on-surface)";
body.style.backgroundColor = "var(--md-sys-color-surface-5)";
});
} else if (mode === "off") {
if (elements && elements.darkModeIcon) {
elements.darkModeIcon.textContent = "light_mode";

View File

@ -309,6 +309,18 @@ async function showUpdateModal() {
// Update modal with full information
const modalBody = document.getElementById('updateModalBody');
if (fullUpdateInfo && fullUpdateInfo.new_versions) {
// Check if dark mode is active
const isDarkMode = localStorage.getItem("dark-mode") === "on";
const darkClasses = isDarkMode ? {
accordionItem: 'bg-dark border-secondary text-light',
accordionButton: 'bg-dark text-light border-secondary',
accordionBody: 'bg-dark text-light'
} : {
accordionItem: '',
accordionButton: '',
accordionBody: ''
};
const detailedVersionsHtml = `
<div class="detailed-versions mt-4">
<h6>Available Updates:</h6>
@ -325,7 +337,7 @@ async function showUpdateModal() {
</button>
</h2>
<div id="collapse${index}" class="accordion-collapse collapse ${index === 0 ? 'show' : ''}"
aria-labelledby="heading${index}" data-bs-parent="#versionsAccordion">
aria-labelledby="heading${index}" data-bs-parent="#versionsAccordion">
<div class="accordion-body">
<h6>${version.announcement.title}</h6>
<p>${version.announcement.message}</p>
@ -349,6 +361,27 @@ async function showUpdateModal() {
spinner.parentElement.remove();
}
modalBody.insertAdjacentHTML('beforeend', detailedVersionsHtml);
// Apply dark mode styling if active
if (isDarkMode) {
var accordionItems = document.querySelectorAll("#versionsAccordion .accordion-item");
accordionItems.forEach((item) => {
item.style.color = "var(--md-sys-color-on-surface)";
item.style.backgroundColor = "var(--md-sys-color-surface-5)";
item.style.border = "1px solid var(--md-sys-color-outline-variant)";
});
var accordionButtons = document.querySelectorAll("#versionsAccordion .accordion-button");
accordionButtons.forEach((button) => {
button.style.color = "";
button.style.backgroundColor = "";
button.style.borderColor = "";
});
var accordionBodies = document.querySelectorAll("#versionsAccordion .accordion-body");
accordionBodies.forEach((body) => {
body.style.color = "var(--md-sys-color-on-surface)";
body.style.backgroundColor = "var(--md-sys-color-surface-5)";
});
}
} else {
// Remove loading spinner if failed to load
const spinner = document.getElementById('loadingSpinner');