some basic dark mode

ankarhem · Feb 2, 2022 · 1734614 · 1734614
1 parent 0b16822
commit 1734614
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 14 deletions.
diff --git a/src/app.html b/src/app.html
@@ -6,7 +6,8 @@
 		<link rel="icon" href="%svelte.assets%/favicon.png" />
 		<link rel="manifest" href="manifest.json" />
 
-		<meta name="theme-color" content="#e5e7eb" />
+		<meta name="theme-color" content="#e5e7eb" media="(prefers-color-scheme: light)" />
+		<meta name="theme-color" content="#404040" media="(prefers-color-scheme: dark)" />
 		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 		<link rel="apple-touch-icon" sizes="180x180" href="/ios/180.png" />
 		<meta name="apple-mobile-web-app-capable" content="yes" />
@@ -18,11 +19,11 @@
 		%svelte.head%
 	</head>
 	<body
-		class="bg-gray-200 flex flex-col justify-items-stretch min-h-screen min-h-screen-safe h-full standalone:h-screen"
+		class="flex flex-col justify-items-stretch min-h-screen min-h-screen-safe h-full standalone:h-screen"
 	>
 		<div
 			id="svelte"
-			class="bg-gray-50 flex flex-col min-h-screen min-h-screen-safe lg:min-h-screen h-full standalone:h-screen"
+			class="bg-gray-50 dark:bg-primary-800/[0.95] flex flex-col min-h-screen min-h-screen-safe lg:min-h-screen h-full standalone:h-screen"
 		>
 			%svelte.body%
 		</div>

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -11,12 +11,14 @@
 </script>
 
 <header
-	class="self-stretch px-3 py-0.5 bg-gray-200 border-b-[3px] border-b-primary-500 flex justify-between items-center pt-safe"
+	class="self-stretch px-3 py-0.5 bg-gray-200 border-b-primary-500 dark:bg-neutral-700 dark:border-primary-500 border-b-[3px] flex justify-between items-center pt-safe"
 >
-	<a href="/hjalp" class="text-primary-500">
+	<a href="/hjalp" class="text-primary-500 dark:text-primary-400">
 		<Icon src={QuestionMarkCircle} size="24px" />
 	</a>
-	<div class="flex items-center flex-col uppercase text-primary-500 py-1 relative">
+	<div
+		class="flex items-center flex-col uppercase text-primary-500 dark:text-primary-400 py-1 relative"
+	>
 		<h1 class="text-5xl mx-auto">
 			<a href="/" class="flex font-bold leading-10">
 				<span class="text-blue-400">S</span>

diff --git a/src/components/Notification.svelte b/src/components/Notification.svelte
@@ -28,7 +28,7 @@
 		y: -35,
 		easing: cubicInOut
 	}}
-	class={`uppercase font-bold translate-y-14 flex h-9 p-4 border-2 items-center rounded ${getNotificationStyles(
+	class={`uppercase font-bold translate-y-32 whitespace-nowrap flex h-9 p-4 border-2 items-center rounded ${getNotificationStyles(
 		notification.type
 	)}`}
 >

diff --git a/src/lib/getStateStyles.ts b/src/lib/getStateStyles.ts
@@ -3,13 +3,13 @@ import { TileState } from './types';
 export const getStateStyles = (state: TileState): string => {
 	switch (state) {
 		case TileState.Correct:
-			return 'bg-green-300 text-green-600 border-green-600';
+			return 'bg-green-300 text-green-600 border-green-600 dark:bg-green-700/80 dark:text-green-400 dark:border-green-400';
 		case TileState.WrongPlace:
-			return 'bg-yellow-300 text-yellow-600 border-yellow-600';
+			return 'bg-yellow-300 text-yellow-600 border-yellow-600 dark:bg-yellow-700/80 dark:text-yellow-500 dark:border-yellow-500';
 		case TileState.Incorrect:
-			return 'bg-neutral-300 text-neutral-600 border-neutral-600';
+			return 'bg-neutral-300 text-neutral-600 border-neutral-600 dark:bg-neutral-700/80 dark:text-neutral-400/80 dark:border-neutral-400/80';
 		case TileState.Unknown:
-			return 'bg-primary-50 text-primary-500 border-primary-300';
+			return 'bg-primary-50 text-primary-500 border-primary-300 dark:bg-primary-800/[0.7] dark:text-primary-400/80 dark:border-primary-400/80';
 		default:
 			return '';
 	}

diff --git a/static/manifest.json b/static/manifest.json
@@ -452,7 +452,5 @@
 		}
 	],
 	"start_url": "/",
-	"display": "standalone",
-	"theme_color": "#78716c",
-	"background_color": "#e5e7eb"
+	"display": "standalone"
 }