Improve dark mode for web widgets

This commit is contained in:
Daniele Tonon
2023-11-28 21:37:25 +01:00
parent 493061f081
commit a33e46f958

View File

@@ -16,12 +16,27 @@
// Basic styles
iframe.style.width = width;
iframe.style.height = height;
iframe.style.border = '2px solid #807a7a';
iframe.style.borderRadius = '10px';
// iframe.style.border = '2px solid #b6b6b6';
// iframe.style.borderRadius = '10px';
// Add a class to easily permit overwriting the styles
iframe.classList.add("nostr-embedded")
const myCSSClass = `
.nostr-embedded {
border: 2px solid #C9C9C9;
border-radius: 10px;
}
@media (prefers-color-scheme: dark) {
.nostr-embedded {
border-color: #393939; /* Adjust the color for dark mode */
}
}
`;
const styleElement = document.createElement('style');
styleElement.textContent = myCSSClass;
scriptElement.parentNode.insertBefore(styleElement, scriptElement.nextSibling);
scriptElement.parentNode.insertBefore(iframe, scriptElement.nextSibling);
// Listen for messages from the iframe