Add light theme support

cjbassi · Jul 19, 2019 · 11aad63 · 11aad63
1 parent 0f2d9df
commit 11aad63
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 944 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
 My personal website and blog
 
-Built with [Svelte](https://github.com/sveltejs/svelte)/[Sapper](https://github.com/sveltejs/sapper) and [HackCSS](https://github.com/egoist/hack) and deployed with Netlify.
+Built with [Svelte](https://github.com/sveltejs/svelte)/[Sapper](https://github.com/sveltejs/sapper), styled with [HackCSS](https://github.com/egoist/hack), and deployed with Netlify.
diff --git a/src/template.html b/src/template.html
@@ -7,14 +7,26 @@
 		%sapper.base%
 
 		<!-- <link href="prism.css" rel="stylesheet" /> -->
-		<link rel="stylesheet" href="hack.css" />
-		<link rel="stylesheet" href="solarized-dark.css" />
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack/0.8.1/hack.css" />
+		<link rel="stylesheet" href="main.css" />
+		<link rel="stylesheet" href="solarized.css" />
+		<link rel="stylesheet" href="colorscheme.css" />
 
 		%sapper.styles%
 
 		%sapper.head%
 	</head>
-	<body class="hack solarized-dark">
+	<body class="hack">
+		<script>
+			// https://davidwalsh.name/prefers-color-scheme
+			const prefers_color_scheme = getComputedStyle(document.documentElement).getPropertyValue('content').replace(/"/g, '');
+			if (prefers_color_scheme === "light") {
+				document.body.classList.add('solarized-light');
+			} else {
+				document.body.classList.add('solarized-dark');
+			}
+		</script>
+
 		<div id="sapper">%sapper.html%</div>
 
 		%sapper.scripts%

diff --git a/static/colorscheme.css b/static/colorscheme.css
@@ -0,0 +1,19 @@
+/* https://davidwalsh.name/prefers-color-scheme */
+
+html {
+	content: ""; /* (ab)using the content property */
+}
+
+/* Light mode */
+@media (prefers-color-scheme: light) {
+	html {
+		content: "light"; /* (ab)using the content property */
+	}
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+	html {
+		content: "dark"; /* (ab)using the content property */
+	}
+}