add settings and dark theme

src/components/Nav.svelte

@@ -57,5 +57,6 @@
 		     the blog data when we hover over the link or tap it on a touchscreen -->
     <li><a rel="prefetch" aria-current={segment === 'blog' ? 'page' : undefined} href="blog">blog</a></li>
     <li><a rel="prefetch" aria-current={segment === 'contact' ? 'page' : undefined} href="contact">contact</a></li>
+    <li><a rel="prefetch" aria-current={segment === 'settings' ? 'page' : undefined} href="settings">réglages</a></li>
   </ul>
 </nav>

src/routes/blog/[slug].svelte

 <script context="module">
-	export async function preload({ params }) {
-		// the `slug` parameter is available because
-		// this file is called [slug].svelte
-		const res = await this.fetch(`blog/${params.slug}.json`);
-		const data = await res.json();
+  export async function preload({ params }) {
+    console.log('preload dans le contexte du module');
+    console.log('[slug] params', params);
+    // the `slug` parameter is available because
+    // this file is called [slug].svelte
+    const res = await this.fetch(`blog/${params.slug}.json`);
+    const data = await res.json();
 
-		if (res.status === 200) {
-			return { post: data };
-		} else {
-			this.error(res.status, data.message);
-		}
-	}
+    if (res.status === 200) {
+      return { post: data };
+    } else {
+      this.error(res.status, data.message);
+    }
+  }
 </script>
 
 <script>
-	export let post;
+  export let post;
+  console.log('preload HORS contexte du module [slug].svelte');
 </script>
 
 <style>
-	/*
+  /*
 		By default, CSS is locally scoped to the component,
 		and any unused styles are dead-code-eliminated.
 		In this page, Svelte can't know which elements are
@@ -26,39 +29,39 @@
 		so we have to use the :global(...) modifier to target
 		all elements inside .content
 	*/
-	.content :global(h2) {
-		font-size: 1.4em;
-		font-weight: 500;
-	}
+  .content :global(h2) {
+    font-size: 1.4em;
+    font-weight: 500;
+  }
 
-	.content :global(pre) {
-		background-color: #f9f9f9;
-		box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);
-		padding: 0.5em;
-		border-radius: 2px;
-		overflow-x: auto;
-	}
+  .content :global(pre) {
+    background-color: #f9f9f9;
+    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);
+    padding: 0.5em;
+    border-radius: 2px;
+    overflow-x: auto;
+  }
 
-	.content :global(pre) :global(code) {
-		background-color: transparent;
-		padding: 0;
-	}
+  .content :global(pre) :global(code) {
+    background-color: transparent;
+    padding: 0;
+  }
 
-	.content :global(ul) {
-		line-height: 1.5;
-	}
+  .content :global(ul) {
+    line-height: 1.5;
+  }
 
-	.content :global(li) {
-		margin: 0 0 0.5em 0;
-	}
+  .content :global(li) {
+    margin: 0 0 0.5em 0;
+  }
 </style>
 
 <svelte:head>
-	<title>{post.title}</title>
+  <title>{post.title}</title>
 </svelte:head>
 
 <h1>{post.title}</h1>
 
 <div class="content">
-	{@html post.html}
+  {@html post.html}
 </div>

src/routes/settings.svelte

+<script context="module">
+  export async function preload() {
+    console.log(this);
+    console.log('settings preload');
+  }
+  // utiliser this.fetch() au lieu de fetch() (inconnu si executé côté serveur
+</script>
+
+<script>
+  console.log('settings');
+  let isDarkMode = false;
+  let moninput;
+</script>
+
+<svelte:head>
+  <title>Settings</title>
+  {#if isDarkMode}
+    <!-- load CSS in HEAD -->
+    <link rel="stylesheet" href="dark-theme.css" />
+  {/if}
+</svelte:head>
+<h1>settings</h1>
+<input type="text" bind:this={moninput} />
+<br />
+<button
+  on:click={() => {
+    moninput.focus();
+    isDarkMode = !isDarkMode;
+  }}>dark mode</button>

static/dark-theme.css

+body {
+  background-color: rgb(72, 71, 78);
+  color: white;
+}
+main {
+  background-color: rgb(72, 71, 78);
+  color: white;
+}