add theme-color meta tag if missing

svecosystem · Jan 25, 2024 · f4fe320 · f4fe320
1 parent e63d34c
commit f4fe320
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -45,24 +45,6 @@ To enable this, set the `themeColor` prop to your preferred colors:
 <ModeWatcher themeColor={{ dark: "black", light: "white" }}>
 ```
 
-Note that for this to work, you must have added the `theme-color` meta tag to your `head` element in `app.html`:
-
-```diff
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-+		<meta name="theme-color" content="black" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div>%sveltekit.body%</div>
-	</body>
-</html>
-```
-
 ## API
 
 ### toggleMode

diff --git a/src/app.html b/src/app.html
@@ -2,7 +2,6 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<meta name="theme-color" content="black" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%

diff --git a/src/lib/mode-watcher.svelte b/src/lib/mode-watcher.svelte
@@ -54,6 +54,12 @@
 </script>
 
 <svelte:head>
+	{#if themeColors}
+		<!-- default to dark mode for to allow testing -->
+		<!-- this will be overwritten by FOUC prevention snippet below -->
+		<!-- but that snippet does not run in vitest -->
+		<meta name="theme-color" content={themeColors.dark} />
+	{/if}
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html `<script nonce="%sveltekit.nonce%">(` + stringified + `)(` + args + `);</script>`}
 </svelte:head>
diff --git a/src/tests/Mode.svelte b/src/tests/Mode.svelte
@@ -4,10 +4,6 @@
 	export let track = true;
 </script>
 
-<svelte:head>
-	<meta name="theme-color" content="black" />
-</svelte:head>
-
 <ModeWatcher {track} themeColors={{ dark: 'black', light: 'white' }} />
 <span data-testid="mode">{$mode}</span>
 <button on:click={toggleMode} data-testid="toggle"> toggle </button>

diff --git a/src/tests/StealthMode.svelte b/src/tests/StealthMode.svelte
@@ -4,10 +4,6 @@
 	export let track = true;
 </script>
 
-<svelte:head>
-	<meta name="theme-color" content="black" />
-</svelte:head>
-
 <ModeWatcher {track} themeColors={{ dark: 'black', light: 'white' }} />
 <button on:click={toggleMode} data-testid="toggle"> toggle </button>
 <button on:click={() => setMode('light')} data-testid="light">light</button>