Use a local theme. (#4)

greggman · web-flow · commit b17abfc01741 · 2026-03-31T13:08:25.000-07:00
The current theme is not dark mode aware. As such it was showing
the dark SVG logo on a hard coded light page.

This changes it to use a local theme so that it's entirely in
the site's control.
diff --git a/README.md b/README.md
@@ -1,3 +1,7 @@
+---
+layout: default
+permalink: /
+---
 <img alt="WebGPU logo" src="https://raw.githubusercontent.com/gpuweb/gpuweb/cd07d570226c8e4c82a1b616f967fe76f98920a3/logo/webgpu-responsive.svg" width="400">
 
 <!-- TODO: add a live webgpu test like on https://get.webgl.org -->
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1,3 @@
+title: WebGPU
+theme: []
+
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{ page.title | default: site.title }}</title>
+  <link rel="stylesheet" href="{{ 'assets/css/style.css' | relative_url }}">
+</head>
+<body>
+  {{ content }}
+</body>
+</html>
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -0,0 +1,30 @@
+:root {
+  color-scheme: light dark;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  max-width: 1012px;
+  margin: 40px auto;
+  padding: 0 30px;
+  background-color: canvas;
+  color: canvastext;
+}
+
+a {
+  color: accentcolor;
+  text-decoration: none;
+}
+
+pre, code {
+  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  background-color: rgba(175, 184, 193, 0.2);
+  padding: 0.2em 0.4em;
+  border-radius: 6px;
+}
+
+h1, h2 {
+  border-bottom: 1px solid rgba(210, 217, 223, 0.2);
+  padding-bottom: 0.3em;
+}
