Skip to content

Commit b896688

Browse files
vhtmuivhtmui
committed
change theme storage to cookies
1 parent 33732b6 commit b896688

File tree

5 files changed

+49
-52
lines changed

5 files changed

+49
-52
lines changed

‎src/hooks.server.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export async function handle({ event, resolve }) {
2+
return await resolve(event, {
3+
transformPageChunk: ({ html }) => html.replace(
4+
'<body',
5+
'<body style="color: hotpink"'
6+
)
7+
});
8+
}

‎src/lib/ZThemeBtn/ZThemeBtn.svelte‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,18 @@
33
44
import { onMount } from 'svelte';
55
6+
let { theme } = $props();
7+
68
let BtnList = $state([false, false, false]);
79
let currentBtn = $state();
810
911
function setTheme(theme) {
1012
console.log('clickbtn');
1113
if (theme === 'Dark' || theme === 'Light') {
1214
document.documentElement.setAttribute('data-theme', theme);
13-
localStorage.setItem('theme', theme);
15+
document.cookie = `theme=${theme};path=/`;
1416
} else if (theme === 'Auto') {
15-
localStorage.setItem('theme', 'Auto');
17+
document.cookie = `theme=Auto;path=/`;
1618
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
1719
document.documentElement.setAttribute('data-theme', 'Dark');
1820
} else {
@@ -26,20 +28,17 @@
2628
currentBtn = index;
2729
}
2830
29-
onMount(() => {
30-
//init theme button
31-
const theme = localStorage.getItem('theme');
32-
if (theme === 'Light') {
33-
setCurrentBtn(0);
34-
} else if(theme === 'Dark') {
35-
setCurrentBtn(1);
36-
} else{
37-
setCurrentBtn(2);
38-
}
39-
});
31+
// init theme button
32+
if (theme === 'Light') {
33+
setCurrentBtn(0);
34+
} else if (theme === 'Dark') {
35+
setCurrentBtn(1);
36+
} else {
37+
setCurrentBtn(2);
38+
}
4039
</script>
4140

42-
<div class="themeBlock" data-theme>
41+
<div class="themeBlock">
4342
<div class="theme btnContainer">
4443
<button
4544
type="button"

‎src/routes/+error.svelte‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/routes/+layout.server.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/** @type {import('./$types').LayoutServerLoad} */
2+
export async function load(event) {
3+
const t = event.cookies.get('theme');
4+
return {theme:t};
5+
}

‎src/routes/+layout.svelte‎

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -77,53 +77,47 @@
7777
};
7878
}
7979
80-
let lastScrollY;
81-
let timeoutId = null;
82-
function hideHeader() {
83-
if (timeoutId) {
84-
clearTimeout(timeoutId);
85-
}
86-
timeoutId = setTimeout(() => {
87-
const offset = window.scrollY - lastScrollY;
88-
if (offset > 0) {
89-
hideHead = true;
90-
} else if (offset < 0) {
91-
hideHead = false;
92-
}
93-
lastScrollY = window.scrollY;
94-
}, 100);
95-
}
96-
9780
onMount(() => {
9881
/**
9982
* hide topbar while scroll down, and display it while scroll up.
10083
*/
84+
let lastScrollY;
85+
let timeoutId = null;
86+
function hideHeader() {
87+
if (timeoutId) {
88+
clearTimeout(timeoutId);
89+
}
90+
timeoutId = setTimeout(() => {
91+
const offset = window.scrollY - lastScrollY;
92+
if (offset > 0) {
93+
hideHead = true;
94+
} else if (offset < 0) {
95+
hideHead = false;
96+
}
97+
lastScrollY = window.scrollY;
98+
}, 100);
99+
}
101100
lastScrollY = window.scrollY;
102101
addEventListener('scroll', hideHeader, { passive: true });
103102
104103
/**
105104
* doing things while resizing
106105
*/
107106
let timeoutId2 = null;
108-
tocDisplay = window.getComputedStyle(tocBlock).display;
107+
tocDisplay = window.getComputedStyle(tocBlock).display === 'none' ? false : true;
109108
addEventListener('resize', () => {
110109
timeoutId2 && clearTimeout(timeoutId2);
111110
timeoutId2 = setTimeout(() => {
112-
// destroy toclist component while its container display none
113-
tocDisplay = window.getComputedStyle(tocBlock).display;
111+
// destroy toclist component while its parent container display none
112+
tocDisplay = window.getComputedStyle(tocBlock).display === 'none' ? false : true;
114113
}, 100);
115114
});
116115
});
117116
afterNavigate(() => {
118-
// destroy toclist component while its container display none
119-
if (tocDisplay !== 'none') {
120-
headings = document.querySelectorAll(titles);
121-
} else {
122-
headings = null;
123-
}
117+
// get head elements passed to <ZTocList>.
118+
headings = document.querySelectorAll(titles);
124119
});
125120
</script>
126-
127121
<!-- #endregion -->
128122

129123
<!-- #region Set head
@@ -178,7 +172,7 @@
178172
<ul></ul>
179173
</nav>
180174
<div class="toggleThme">
181-
<ZThemeBtn />
175+
<ZThemeBtn theme={data.theme}/>
182176
</div>
183177
</header>
184178
</div>
@@ -220,15 +214,13 @@
220214
{@render children?.()}
221215
</div>
222216
<div class="toc" bind:this={tocBlock}>
223-
{#if headings && headings?.length}
217+
{#if tocDisplay && headings && headings?.length}
224218
<ZTocList {headings} indent="0.5" />
225219
{/if}
226220
</div>
227221
</main>
228222
<!-- #endregion -->
229223

230-
<!-- #endregion -->
231-
232224
<!-- #region Style
233225
-->
234226
<style>

0 commit comments

Comments
 (0)