iptv-org-mirror/iptv-org.github.io
1
0
Fork 0
mirror of https://github.com/iptv-org/iptv-org.github.io.git synced 2025-05-13 10:30:05 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixes dark mode toggle

Browse source 
https://github.com/iptv-org/iptv-org.github.io/pull/1550
This commit is contained in:
freearhey 2023-11-15 11:29:02 +03:00
parent e7dfebdd1a
commit 4477d214a9
2 changed files with 15 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/ToggleModeButton.svelte
View file

@ -4,8 +4,11 @@
let dark = false let dark = false
function toggleDarkMode() { function toggleDarkMode() {
let mode = localStorage.theme || 'light' const prefersColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
if (mode === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) { ? 'dark'
: 'light'
const mode = localStorage.theme || prefersColorScheme
if (mode === 'dark') {
dark = false dark = false
document.documentElement.classList.remove('dark') document.documentElement.classList.remove('dark')
localStorage.theme = 'light' localStorage.theme = 'light'
@ -17,8 +20,11 @@
} }
onMount(() => { onMount(() => {
let mode = localStorage.theme || 'light' const prefersColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
if (mode === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) { ? 'dark'
: 'light'
const mode = localStorage.theme || prefersColorScheme
if (mode === 'dark') {
dark = true dark = true
} else { } else {
dark = false dark = false

9
src/pages/+layout.svelte
View file

@ -5,13 +5,14 @@
<svelte:head> <svelte:head>
<script> <script>
if (document) { if (document) {
let mode = localStorage.theme || 'light' const prefersColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
if (mode === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) { ? 'dark'
: 'light'
const mode = localStorage.theme || prefersColorScheme
if (mode === 'dark') {
document.documentElement.classList.add('dark') document.documentElement.classList.add('dark')
localStorage.theme = 'dark'
} else { } else {
document.documentElement.classList.remove('dark') document.documentElement.classList.remove('dark')
localStorage.theme = 'light'
} }
} }
</script> </script>