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

replace theme changing scripts with hyperscript.

Browse Source
This commit is contained in:
fiatjaf
2023-10-22 18:02:24 -03:00
parent 93d0ba1e24
commit 16b661a35d
1 changed files with 8 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
templates/top.html
View File

@@ -1,6 +1,10 @@
<header class="top">
<a href="https://nostr.com" class="nostr_link">What is <span>Nostr</span>?</a>
<div class="theme-toggle">
<div
class="theme-toggle"
_="on click tell <html /> toggle between .theme--dark and .theme--default then get your @class then get it[0].split('--')[1].split(' ')[0] then set localStorage.theme to it
on load tell <html /> get localStorage.theme then if it is 'dark' add .theme--dark then remove .theme--default else if it is not 'default' then log it then get window.matchMedia('(prefers-color-scheme: dark)').matches then if it is true add .theme--dark then remove .theme--default end"
>
<svg
aria-hidden="true"
data-prefix="fas"
@@ -30,55 +34,7 @@
</div>
</header>
<script>
function toggleTheme() {
const htmlElement = document.documentElement
const isDarkMode = htmlElement.classList.contains('theme--dark')
// Toggle theme classes on the html element
htmlElement.classList.toggle('theme--dark', !isDarkMode)
htmlElement.classList.toggle('theme--default', isDarkMode)
// Save preference in a cookie that expires at the end of the session
const expiryDate = new Date()
document.cookie = `themePreference=${isDarkMode ? 'light' : 'dark'};`
}
// Check if the OS prefers dark mode
const prefersDarkMode =
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
// Load preference from the cookie if it exists
const themePreference = document.cookie.replace(
/(?:(?:^|.*;\s*)themePreference\s*\=\s*([^;]*).*$)|^.*$/,
'$1'
)
const isDarkMode =
themePreference === 'dark' || (themePreference === '' && prefersDarkMode)
// Apply theme based on the preference
const htmlElement = document.documentElement
htmlElement.classList.toggle('theme--dark', isDarkMode)
htmlElement.classList.toggle('theme--default', !isDarkMode)
// Add click event listener to the theme toggle button
const themeToggleButton = document.querySelector('.theme-toggle')
themeToggleButton.addEventListener('click', toggleTheme)
// const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
// if (prefersDarkMode) {
// document.documentElement.classList.add('theme--dark');
// }
window.addEventListener('beforeprint', function () {
const htmlElement = document.documentElement
htmlElement.classList.remove('theme--dark')
htmlElement.classList.add('theme--default')
})
window.addEventListener('afterprint', function () {
const htmlElement = document.documentElement
htmlElement.classList.toggle('theme--dark', isDarkMode)
htmlElement.classList.toggle('theme--default', !isDarkMode)
})
<script type="text/hyperscript">
on beforeprint from window tell <html /> remove .theme--dark add .theme--default
on afterprint from window tell <html /> add .theme--dark remove .theme--default
</script>