aljaz/njump
1
0
Fork 0
mirror of https://github.com/aljazceru/njump.git synced 2026-01-10 01:54:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add dark mode support to embedded notes

Browse Source
This commit is contained in:
Daniele Tonon
2023-11-27 13:52:29 +01:00
parent 0f6d6fa226
commit 0ed4ffa5e1
2 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
templates/embed.js
View File

@@ -39,5 +39,11 @@
iframe.contentWindow.postMessage({showGradient: true}, '*');
}
}
const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
if (darkModeQuery.matches) {
// Dark mode is preferred
iframe.contentWindow.postMessage({setDarkMode: true}, '*');
}
});
})();

5
templates/embedded_note.html
View File

@@ -102,12 +102,15 @@
var gradient = document.getElementById('bottom-gradient')
gradient.classList.remove('hidden')
}
if (event.data.setDarkMode) {
document.querySelector('html').classList.add('theme--dark')
}
})
</script>
<div
id="bottom-gradient"
class="pointer-events-none sticky bottom-0 left-0 hidden h-20 w-full bg-gradient-to-b from-transparent to-white"
class="pointer-events-none sticky bottom-0 left-0 hidden h-20 w-full bg-gradient-to-b from-transparent to-white dark:to-neutral-900"
></div>
<img