diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 51b8a16..686d544 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -19,6 +19,9 @@
   {{ if or (eq .Kind "list") (eq .Kind "term") }}
   <link rel="preload stylesheet" as="style" href="/styles/list.css">
   {{ end }}
+  {{ if and .IsPage (.Page.Scratch.Get "includes_railroad_diagram") }}
+  <link rel="preload stylesheet" as="style" href="{{ `styles/railroad.css` | absURL }}">
+  {{ end }}
   {{ range $stylesheet := .Resources.Match "*.css" }}
   <link rel="preload stylesheet" as="style" href="{{ $stylesheet.Permalink }}">
   {{ end }}
@@ -44,8 +47,8 @@
   {{ end }}
 
   {{ if and .IsPage (.Page.Scratch.Get "includes_railroad_diagram") }}
-  <script defer src="{{ `scripts/railroad.js` | absURL }}"></script>
-  <script defer src="{{ `scripts/railroad-utils.js` | absURL }}"></script>
+  <script defer type="module" src="{{ `scripts/railroad.js` | absURL }}"></script>
+  <script defer type="module" src="{{ `scripts/railroad-utils.js` | absURL }}"></script>
   {{ end }}
 
   {{ if and .IsPage (.Page.Scratch.Get "includes_p5_sketch") }}
diff --git a/layouts/shortcodes/railroad_diagram.html b/layouts/shortcodes/railroad_diagram.html
index d5e4785..ecdda1e 100644
--- a/layouts/shortcodes/railroad_diagram.html
+++ b/layouts/shortcodes/railroad_diagram.html
@@ -1,6 +1,8 @@
 {{ $id := .Get "id" }}
 {{ .Page.Scratch.Set "includes_railroad_diagram" true }}
+<div class="centered">
 <figure class="railroad-diagram" {{ if $id }}id="{{ $id }}"{{ end }}></figure>
+</div>
 <script defer type="module">
     import { railroadDiagram } from {{ `/scripts/railroad-utils.js` | relURL }};
     railroadDiagram(rr => {
diff --git a/static/styles/railroad.css b/static/styles/railroad.css
index c2ad5f2..83072c3 100644
--- a/static/styles/railroad.css
+++ b/static/styles/railroad.css
@@ -1,3 +1,13 @@
+:root {
+    --rect-fill: #fafafa;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --rect-fill: #272822;
+    }
+}
+
 svg.railroad-diagram path {
     stroke-width: 2;
     stroke: var(--body-foreground-color);
@@ -7,6 +17,7 @@ svg.railroad-diagram text {
     font-family: var(--monospace-font-family);
     text-anchor: middle;
     white-space: pre;
+    color: var(--body-foreground-color);
 }
 svg.railroad-diagram text.diagram-text {
     font-size: 12px;
@@ -25,8 +36,8 @@ svg.railroad-diagram g.non-terminal text {
 }
 svg.railroad-diagram rect {
     stroke-width: 2;
-    stroke: black;
-    fill: hsl(120,100%,90%);
+    stroke: var(--body-foreground-color);
+    fill: var(--rect-fill);
 }
 svg.railroad-diagram rect.group-box {
     stroke: gray;
@@ -35,8 +46,8 @@ svg.railroad-diagram rect.group-box {
 }
 svg.railroad-diagram path.diagram-text {
     stroke-width: 3;
-    stroke: black;
-    fill: white;
+    stroke: var(--body-foreground-color);
+    fill: var(--body-background-color);
     cursor: help;
 }
 svg.railroad-diagram g.diagram-text:hover path.diagram-text {