diff --git a/.vitepress/config.js b/.vitepress/config.js
index 382aeb0..f0bd6c7 100644
--- a/.vitepress/config.js
+++ b/.vitepress/config.js
@@ -1,49 +1,49 @@
-require('./genMetadata').watchPosts();
+require("./genMetadata").watchPosts();
 
 /**
  * @type {import('vitepress').UserConfig}
  */
 module.exports = {
-  title: 'StateML',
-  description: 'A language for authoring state machines.',
+  title: "StateML",
+  description: "A language for authoring state machines.",
   head: [
     [
-      'link',
+      "link",
       {
-        rel: 'icon',
-        type: 'image/svg+xml',
-        href: '/favicon.svg',
+        rel: "icon",
+        type: "image/svg+xml",
+        href: "/favicon.svg",
       },
     ],
     [
-      'link',
+      "link",
       {
-        rel: 'icon',
-        type: 'image/png',
-        href: '/favicon.png',
+        rel: "icon",
+        type: "image/png",
+        href: "/favicon.png",
       },
     ],
     [
-      'link',
+      "link",
       {
-        rel: 'preload',
-        as: 'font',
-        href: '/fira-code-variable.ttf',
-        crossorigin: 'anonymous',
+        rel: "preload",
+        as: "font",
+        href: "/fira-code-variable.ttf",
+        crossorigin: "anonymous",
       },
     ],
     [
-      'meta',
+      "meta",
       {
-        name: 'keywords',
+        name: "keywords",
         content:
-          'SML, StateML, State Machine Language, state machines, finite state machines, FSM, statecharts',
+          "SML, StateML, State Machine Language, state machines, finite state machines, FSM, statecharts",
       },
     ],
   ],
   markdown: {
     config(md) {
-      md.use(require('markdown-it-attrs'));
+      md.use(require("markdown-it-attrs"));
     },
   },
 };
diff --git a/.vitepress/theme/Date.vue b/.vitepress/theme/Date.vue
index f36bd16..30ada00 100644
--- a/.vitepress/theme/Date.vue
+++ b/.vitepress/theme/Date.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed } from "vue";
 
 const props = defineProps({
   createdDate: { type: Object, required: true },
@@ -21,10 +21,10 @@ const isUpdated = computed(
 );
 
 function formatUpdatedDate() {
-  return new Date(props.updatedDate).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
+  return new Date(props.updatedDate).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
   });
 }
 
@@ -39,7 +39,7 @@ function getDateTime(time) {
       flex flex-wrap
       column-gap-3
       text-sm
-      leading-6
+      leading-10
       font-medium
       text-gray-500
       whitespace-nowrap
@@ -48,14 +48,18 @@ function getDateTime(time) {
     <div class="flex">
       <dt class="sr-only">Created</dt>
       <dd>
-        <time :datetime="getDateTime(props.createdDate.time)">{{ props.createdDate.string }}</time>
+        <time :datetime="getDateTime(props.createdDate.time)">{{
+          props.createdDate.string
+        }}</time>
       </dd>
     </div>
     <div v-if="isUpdated" class="flex">
       (
       <dt>updated&nbsp;</dt>
       <dd>
-        <time :datetime="getDateTime(props.updatedDate)">{{ formatUpdatedDate() }}</time>
+        <time :datetime="getDateTime(props.updatedDate)">{{
+          formatUpdatedDate()
+        }}</time>
       </dd>
       )
     </div>
diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue
index c5ff094..49fabe5 100644
--- a/.vitepress/theme/Layout.vue
+++ b/.vitepress/theme/Layout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col justify-center">
+  <div class="flex flex-col justify-center dark:text-gray-400">
     <nav
       class="flex items-center flex-col md:flex-row mb-10"
       :class="isIndex ? 'justify-center' : 'justify-between'"
@@ -10,13 +10,21 @@
           xmlns="http://www.w3.org/2000/svg"
           role="img"
           aria-labelledby="statemlLogo"
-          class="h-16 md:h-10 fill-current stroke-current"
+          class="dark:text-gray-400 h-16 md:h-10 fill-current stroke-current"
         >
           <title id="statemlLogo">StateMl Logo</title>
           <path
             d="M111.296 57.2675C111.296 59.5465 110.696 61.5605 109.494 63.3095C108.311 65.0585 106.606 66.4277 104.38 67.417C102.154 68.4063 99.4775 68.901 96.3505 68.901C92.8878 68.901 89.9816 68.3975 87.632 67.3905C85.3 66.3658 83.3655 65.1027 81.8285 63.601L86.2275 58.725C87.5878 59.9087 89.0895 60.8273 90.7325 61.481C92.3755 62.117 94.1775 62.435 96.1385 62.435C97.9581 62.435 99.4333 62.0463 100.564 61.269C101.695 60.474 102.26 59.361 102.26 57.93C102.26 56.5873 101.783 55.5362 100.829 54.7765C99.8926 54.0168 98.1436 53.2483 95.582 52.471C91.289 51.1637 88.2326 49.6267 86.413 47.86C84.611 46.0757 83.71 43.7878 83.71 40.9965C83.71 38.7528 84.3283 36.836 85.565 35.246C86.8193 33.656 88.4976 32.4458 90.6 31.6155C92.7023 30.7675 95.0166 30.3435 97.543 30.3435C100.387 30.3435 102.896 30.7587 105.069 31.589C107.242 32.4017 109.123 33.5677 110.713 35.087L106.606 39.804C105.369 38.7617 104.035 37.9932 102.604 37.4985C101.173 36.9862 99.716 36.73 98.232 36.73C96.5713 36.73 95.2375 37.0392 94.2305 37.6575C93.2235 38.2582 92.72 39.1503 92.72 40.334C92.72 41.1113 92.9408 41.765 93.3825 42.295C93.8241 42.825 94.5926 43.3285 95.688 43.8055C96.7833 44.2648 98.3026 44.8037 100.246 45.422C102.56 46.1287 104.539 46.9767 106.182 47.966C107.843 48.9377 109.106 50.1655 109.971 51.6495C110.855 53.1335 111.296 55.0062 111.296 57.2675ZM137.776 66.357C136.68 67.0637 135.355 67.6643 133.801 68.159C132.246 68.6537 130.497 68.901 128.554 68.901C124.879 68.901 122.15 67.9647 120.365 66.092C118.581 64.2017 117.689 61.64 117.689 58.407V45.634H111.779V39.857H117.689V33.762L126.063 32.755V39.857H135.126L134.304 45.634H126.063V58.407C126.063 59.8027 126.381 60.8008 127.017 61.4015C127.653 62.0022 128.669 62.3025 130.064 62.3025C131.054 62.3025 131.955 62.1877 132.767 61.958C133.598 61.7107 134.34 61.4015 134.993 61.0305L137.776 66.357ZM163.672 59.891C163.672 60.951 163.813 61.7195 164.096 62.1965C164.396 62.6735 164.873 63.0357 165.527 63.283L163.805 68.795C162.144 68.636 160.739 68.2738 159.591 67.7085C158.46 67.1255 157.568 66.251 156.915 65.085C155.837 66.3747 154.459 67.3375 152.781 67.9735C151.102 68.5918 149.389 68.901 147.64 68.901C144.742 68.901 142.428 68.0795 140.697 66.4365C138.983 64.7758 138.126 62.647 138.126 60.05C138.126 56.9937 139.319 54.6352 141.704 52.9745C144.106 51.3138 147.481 50.4835 151.827 50.4835H155.616V49.4235C155.616 46.5438 153.761 45.104 150.051 45.104C149.15 45.104 147.993 45.2365 146.58 45.5015C145.166 45.7488 143.753 46.111 142.34 46.588L140.405 41.023C142.225 40.334 144.115 39.8128 146.076 39.4595C148.055 39.1062 149.821 38.9295 151.376 38.9295C155.563 38.9295 158.655 39.7863 160.651 41.5C162.665 43.196 163.672 45.6517 163.672 48.867V59.891ZM150.528 62.912C151.429 62.912 152.374 62.647 153.364 62.117C154.353 61.5693 155.104 60.8008 155.616 59.8115V55.2535H153.549C151.217 55.2535 149.503 55.6157 148.408 56.34C147.313 57.0467 146.765 58.089 146.765 59.467C146.765 60.5447 147.092 61.3927 147.746 62.011C148.417 62.6117 149.344 62.912 150.528 62.912ZM192.854 66.357C191.759 67.0637 190.434 67.6643 188.879 68.159C187.325 68.6537 185.576 68.901 183.632 68.901C179.958 68.901 177.228 67.9647 175.444 66.092C173.66 64.2017 172.767 61.64 172.767 58.407V45.634H166.858V39.857H172.767V33.762L181.141 32.755V39.857H190.204L189.383 45.634H181.141V58.407C181.141 59.8027 181.459 60.8008 182.095 61.4015C182.731 62.0022 183.747 62.3025 185.143 62.3025C186.132 62.3025 187.033 62.1877 187.846 61.958C188.676 61.7107 189.418 61.4015 190.072 61.0305L192.854 66.357ZM202.321 56.3665C202.603 58.6632 203.354 60.315 204.573 61.322C205.792 62.3113 207.294 62.806 209.078 62.806C210.368 62.806 211.613 62.594 212.815 62.17C214.016 61.746 215.173 61.1807 216.286 60.474L219.652 65.032C218.327 66.1627 216.719 67.0902 214.829 67.8145C212.956 68.5388 210.818 68.901 208.416 68.901C205.2 68.901 202.506 68.265 200.333 66.993C198.16 65.7033 196.526 63.9367 195.431 61.693C194.335 59.4493 193.788 56.87 193.788 53.955C193.788 51.1813 194.318 48.6638 195.378 46.4025C196.438 44.1235 197.983 42.3127 200.015 40.97C202.064 39.6097 204.564 38.9295 207.515 38.9295C210.2 38.9295 212.523 39.5037 214.484 40.652C216.463 41.8003 217.991 43.4522 219.069 45.6075C220.164 47.7628 220.712 50.351 220.712 53.372C220.712 53.849 220.694 54.3613 220.659 54.909C220.641 55.4567 220.606 55.9425 220.553 56.3665H202.321ZM207.515 44.5475C206.013 44.5475 204.803 45.0863 203.884 46.164C202.965 47.2417 202.409 48.9642 202.215 51.3315H212.55C212.532 49.2822 212.134 47.6392 211.357 46.4025C210.58 45.1658 209.299 44.5475 207.515 44.5475ZM252.994 31.271L255.061 68H247.482L247.032 52.2855C246.979 50.3422 246.961 48.655 246.979 47.224C247.014 45.793 247.076 44.4238 247.164 43.1165C247.253 41.7915 247.359 40.3075 247.482 38.6645L243.348 61.746H236.776L232.324 38.6645C232.466 40.2015 232.581 41.6502 232.669 43.0105C232.757 44.3532 232.81 45.7665 232.828 47.2505C232.863 48.7345 232.863 50.457 232.828 52.418L232.563 68H225.116L227.183 31.271H236.114L240.195 55.015L244.064 31.271H252.994ZM261.957 68V31.271H270.649V61.1365H286.576L285.675 68H261.957Z"
           />
-          <rect x="71" y="5" width="228" height="90" rx="18" stroke-width="10" fill="none" />
+          <rect
+            x="71"
+            y="5"
+            width="228"
+            height="90"
+            rx="18"
+            stroke-width="10"
+            fill="none"
+          />
           <path
             d="M64 48.3238C66.6667 49.8634 66.6667 53.7124 64 55.252L44.1818 66.694C41.5152 68.2336 38.1818 66.3091 38.1818 63.2299V40.3459C38.1818 37.2667 41.5152 35.3422 44.1818 36.8818L64 48.3238Z"
           />
@@ -33,7 +41,9 @@
         <a href="#">Learn</a>
         <a href="#">Playground</a>
         <a href="#">Spec</a>
-        <a href="/garden" :class="isGarden ? 'font-bold' : ''">Digital Garden</a>
+        <a href="/garden" :class="isGarden ? 'font-bold' : ''"
+          >Digital Garden</a
+        >
         <a href="https://github.com/StateML">Github</a>
         <a href="https://twitter.com/stateml_org">Twitter</a>
       </div>
@@ -50,13 +60,15 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { useRoute } from 'vitepress';
-import Posts from './Posts.vue';
-import Post from './Post.vue';
+import { computed } from "vue";
+import { useRoute } from "vitepress";
+import Posts from "./Posts.vue";
+import Post from "./Post.vue";
 
 const route = useRoute();
-const isIndex = computed(() => route.path === '/index.html' || route.path === '/');
-const isPost = computed(() => route.path.includes('/garden/'));
-const isGarden = computed(() => route.path.includes('garden'));
+const isIndex = computed(
+  () => route.path === "/index.html" || route.path === "/"
+);
+const isPost = computed(() => route.path.includes("/garden/"));
+const isGarden = computed(() => route.path.includes("garden"));
 </script>
diff --git a/.vitepress/theme/Post.vue b/.vitepress/theme/Post.vue
index ecc9b14..e901694 100644
--- a/.vitepress/theme/Post.vue
+++ b/.vitepress/theme/Post.vue
@@ -1,8 +1,8 @@
 <script setup>
-import Date from './Date.vue';
-import { computed } from 'vue';
-import { useRoute } from 'vitepress';
-import posts from '../metadata.json';
+import Date from "./Date.vue";
+import { computed } from "vue";
+import { useRoute } from "vitepress";
+import posts from "../metadata.json";
 
 const route = useRoute();
 function findCurrentIndex() {
@@ -18,10 +18,12 @@ const prevPost = computed(() => posts[findCurrentIndex() + 1]);
   <article class="prose">
     <header class="mb-8">
       <Date :created-date="date" :updated-date="route.data.lastUpdated" />
-      <h1 class="!m-0">{{ $frontmatter.title }}</h1>
-      <dl class="flex text-sm font-medium leading-5 whitespace-nowrap">
+      <h1 class="!m-0 text-gray-400">{{ $frontmatter.title }}</h1>
+      <dl class="flex text-sm font-medium leading-10 whitespace-nowrap">
         <dt class="sr-only">Name</dt>
-        <dd class="text-gray-900 whitespace-nowrap">{{ $frontmatter.author }}</dd>
+        <dd class="text-gray-900 whitespace-nowrap dark:text-gray-400">
+          {{ $frontmatter.author }}
+        </dd>
         <dt v-if="$frontmatter.twitter" class="sr-only">Twitter</dt>
         <dd v-if="$frontmatter.twitter">
           <span class="px-2">|</span>
@@ -29,13 +31,14 @@ const prevPost = computed(() => posts[findCurrentIndex() + 1]);
             :href="'https://twitter.com/' + $frontmatter.twitter"
             target="_blank"
             rel="noopnener noreferrer"
+            class="dark:text-gray-100"
             >{{ $frontmatter.twitter }}</a
           >
         </dd>
       </dl>
     </header>
 
-    <Content class="mb-10" />
+    <Content class="mb-10 dark:text-gray-400 leading-1 tracking-tight" />
 
     <footer>
       <div class="flex mb-8">
@@ -43,8 +46,15 @@ const prevPost = computed(() => posts[findCurrentIndex() + 1]);
           <h2 class="text-gray-500 !text-sm">Previous Article</h2>
           <a :href="prevPost.href">{{ prevPost.title }}</a>
         </div>
-        <div v-if="nextPost && prevPost" class="mx-4 border border-gray-200"></div>
-        <div v-if="nextPost" :class="prevPost ? 'text-right' : ''" class="flex-1 max-w-xs">
+        <div
+          v-if="nextPost && prevPost"
+          class="mx-4 border border-gray-200"
+        ></div>
+        <div
+          v-if="nextPost"
+          :class="prevPost ? 'text-right' : ''"
+          class="flex-1 max-w-xs"
+        >
           <h2 class="text-gray-500 !text-sm">Next Article</h2>
           <a :href="nextPost.href">{{ nextPost.title }}</a>
         </div>
diff --git a/.vitepress/theme/Posts.vue b/.vitepress/theme/Posts.vue
index 1633eed..b1aa752 100644
--- a/.vitepress/theme/Posts.vue
+++ b/.vitepress/theme/Posts.vue
@@ -1,6 +1,6 @@
 <script setup>
-import Date from './Date.vue';
-import posts from '../metadata.json';
+import Date from "./Date.vue";
+import posts from "../metadata.json";
 </script>
 
 <template>
@@ -13,6 +13,7 @@ import posts from '../metadata.json';
             leading-9
             font-extrabold
             text-gray-900
+            dark:text-gray-400
             tracking-tight
             sm:text-4xl sm:leading-10
             md:text-6xl md:leading-14
@@ -20,24 +21,41 @@ import posts from '../metadata.json';
         >
           {{ $frontmatter.title }}
         </h1>
-        <p class="text-lg leading-7 text-gray-500">{{ $frontmatter.subtitle }}</p>
+        <p class="text-lg leading-7 text-gray-500 dark:text-gray-500">
+          {{ $frontmatter.subtitle }}
+        </p>
       </div>
     </div>
     <ul class="divide-y divide-gray-200">
       <li class="py-12" v-for="{ title, href, date, tags, excerpt } of posts">
-        <article class="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
+        <article
+          class="
+            space-y-2
+            xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline
+          "
+        >
           <Date :created-date="date" />
           <div class="space-y-3 xl:col-span-3">
             <h2 class="text-xl leading-8 font-semibold tracking-tight">
-              <a class="text-gray-900 no-underline" :href="href">{{ title }}</a>
+              <a
+                class="text-gray-900 no-underline dark:text-gray-400"
+                :href="href"
+                >{{ title }}</a
+              >
             </h2>
             <div v-if="tags" class="flex flex-wrap items-center gap-3">
-              <div v-for="tag in tags" :key="tag" class="px-1 rounded bg-gray-200 text-black">
+              <div
+                v-for="tag in tags"
+                :key="tag"
+                class="px-1 rounded bg-gray-200 text-black dark:text-gray-400"
+              >
                 {{ tag }}
               </div>
             </div>
-            <div class="text-base leading-6 font-normal">
-              <a class="link" aria-label="read more" :href="href">Read more →</a>
+            <div class="text-base leading-6 font-normal dark:text-gray-300">
+              <a class="link" aria-label="read more" :href="href"
+                >Read more →</a
+              >
             </div>
           </div>
         </article>
diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index 6afca45..6362f5d 100644
--- a/.vitepress/theme/style.css
+++ b/.vitepress/theme/style.css
@@ -3,8 +3,8 @@
 @tailwind utilities;
 
 @font-face {
-  font-family: 'Fira Code';
-  src: local('Fira Code'), url('/fira-code-variable.ttf') format('truetype');
+  font-family: "Fira Code";
+  src: local("Fira Code"), url("/fira-code-variable.ttf") format("truetype");
   font-display: swap;
 }
 
@@ -14,19 +14,19 @@
   --active-color: #000000;
 }
 
-/* TODO: wait for tailwind typography to support dark theme: https://github.com/tailwindlabs/tailwindcss-typography/pull/122#issuecomment-937641445 */
-/* @media screen and (prefers-color-scheme: dark) {
+@media screen and (prefers-color-scheme: dark) {
   :root {
-    --background-color: #010101;
-    --foreground-color: #d7d7d7;
+    --background-color: #13161f;
+    --foreground-color: #dadada;
+    --active-color: #ffffff;
   }
-} */
+}
 
 body {
   @apply antialiased;
   background-color: var(--background-color);
   color: var(--foreground-color);
-  font-family: 'Fira Code', monospace;
+  font-family: "Fira Code", monospace;
   margin: 2rem;
 }
 
@@ -42,7 +42,7 @@ a:active {
   color: var(--active-color);
 }
 
-a[href='#'] {
+a[href="#"] {
   @apply pointer-events-none cursor-not-allowed opacity-40;
 }
 
diff --git a/index.md b/index.md
index cd23c34..9cf7e55 100644
--- a/index.md
+++ b/index.md
@@ -2,13 +2,14 @@
 title: A language for authoring state machines.
 ---
 
-<section class="flex flex-col justify-center items-center" style="margin: min(20%, 10rem) 0;">
+<section class="flex flex-col justify-center items-center dark:text-gray-400" style="margin: min(20%, 10rem) 0;">
 
 <h1 class="!mt-0">
   <svg
+  id="logo"
     viewBox="0 0 304 100"
     xmlns="http://www.w3.org/2000/svg"
-    class="w-full max-w-xs fill-current stroke-current"
+    class="dark:text-gray-400 w-full max-w-xs fill-current stroke-current"
   >
     <path
       d="M111.296 57.2675C111.296 59.5465 110.696 61.5605 109.494 63.3095C108.311 65.0585 106.606 66.4277 104.38 67.417C102.154 68.4063 99.4775 68.901 96.3505 68.901C92.8878 68.901 89.9816 68.3975 87.632 67.3905C85.3 66.3658 83.3655 65.1027 81.8285 63.601L86.2275 58.725C87.5878 59.9087 89.0895 60.8273 90.7325 61.481C92.3755 62.117 94.1775 62.435 96.1385 62.435C97.9581 62.435 99.4333 62.0463 100.564 61.269C101.695 60.474 102.26 59.361 102.26 57.93C102.26 56.5873 101.783 55.5362 100.829 54.7765C99.8926 54.0168 98.1436 53.2483 95.582 52.471C91.289 51.1637 88.2326 49.6267 86.413 47.86C84.611 46.0757 83.71 43.7878 83.71 40.9965C83.71 38.7528 84.3283 36.836 85.565 35.246C86.8193 33.656 88.4976 32.4458 90.6 31.6155C92.7023 30.7675 95.0166 30.3435 97.543 30.3435C100.387 30.3435 102.896 30.7587 105.069 31.589C107.242 32.4017 109.123 33.5677 110.713 35.087L106.606 39.804C105.369 38.7617 104.035 37.9932 102.604 37.4985C101.173 36.9862 99.716 36.73 98.232 36.73C96.5713 36.73 95.2375 37.0392 94.2305 37.6575C93.2235 38.2582 92.72 39.1503 92.72 40.334C92.72 41.1113 92.9408 41.765 93.3825 42.295C93.8241 42.825 94.5926 43.3285 95.688 43.8055C96.7833 44.2648 98.3026 44.8037 100.246 45.422C102.56 46.1287 104.539 46.9767 106.182 47.966C107.843 48.9377 109.106 50.1655 109.971 51.6495C110.855 53.1335 111.296 55.0062 111.296 57.2675ZM137.776 66.357C136.68 67.0637 135.355 67.6643 133.801 68.159C132.246 68.6537 130.497 68.901 128.554 68.901C124.879 68.901 122.15 67.9647 120.365 66.092C118.581 64.2017 117.689 61.64 117.689 58.407V45.634H111.779V39.857H117.689V33.762L126.063 32.755V39.857H135.126L134.304 45.634H126.063V58.407C126.063 59.8027 126.381 60.8008 127.017 61.4015C127.653 62.0022 128.669 62.3025 130.064 62.3025C131.054 62.3025 131.955 62.1877 132.767 61.958C133.598 61.7107 134.34 61.4015 134.993 61.0305L137.776 66.357ZM163.672 59.891C163.672 60.951 163.813 61.7195 164.096 62.1965C164.396 62.6735 164.873 63.0357 165.527 63.283L163.805 68.795C162.144 68.636 160.739 68.2738 159.591 67.7085C158.46 67.1255 157.568 66.251 156.915 65.085C155.837 66.3747 154.459 67.3375 152.781 67.9735C151.102 68.5918 149.389 68.901 147.64 68.901C144.742 68.901 142.428 68.0795 140.697 66.4365C138.983 64.7758 138.126 62.647 138.126 60.05C138.126 56.9937 139.319 54.6352 141.704 52.9745C144.106 51.3138 147.481 50.4835 151.827 50.4835H155.616V49.4235C155.616 46.5438 153.761 45.104 150.051 45.104C149.15 45.104 147.993 45.2365 146.58 45.5015C145.166 45.7488 143.753 46.111 142.34 46.588L140.405 41.023C142.225 40.334 144.115 39.8128 146.076 39.4595C148.055 39.1062 149.821 38.9295 151.376 38.9295C155.563 38.9295 158.655 39.7863 160.651 41.5C162.665 43.196 163.672 45.6517 163.672 48.867V59.891ZM150.528 62.912C151.429 62.912 152.374 62.647 153.364 62.117C154.353 61.5693 155.104 60.8008 155.616 59.8115V55.2535H153.549C151.217 55.2535 149.503 55.6157 148.408 56.34C147.313 57.0467 146.765 58.089 146.765 59.467C146.765 60.5447 147.092 61.3927 147.746 62.011C148.417 62.6117 149.344 62.912 150.528 62.912ZM192.854 66.357C191.759 67.0637 190.434 67.6643 188.879 68.159C187.325 68.6537 185.576 68.901 183.632 68.901C179.958 68.901 177.228 67.9647 175.444 66.092C173.66 64.2017 172.767 61.64 172.767 58.407V45.634H166.858V39.857H172.767V33.762L181.141 32.755V39.857H190.204L189.383 45.634H181.141V58.407C181.141 59.8027 181.459 60.8008 182.095 61.4015C182.731 62.0022 183.747 62.3025 185.143 62.3025C186.132 62.3025 187.033 62.1877 187.846 61.958C188.676 61.7107 189.418 61.4015 190.072 61.0305L192.854 66.357ZM202.321 56.3665C202.603 58.6632 203.354 60.315 204.573 61.322C205.792 62.3113 207.294 62.806 209.078 62.806C210.368 62.806 211.613 62.594 212.815 62.17C214.016 61.746 215.173 61.1807 216.286 60.474L219.652 65.032C218.327 66.1627 216.719 67.0902 214.829 67.8145C212.956 68.5388 210.818 68.901 208.416 68.901C205.2 68.901 202.506 68.265 200.333 66.993C198.16 65.7033 196.526 63.9367 195.431 61.693C194.335 59.4493 193.788 56.87 193.788 53.955C193.788 51.1813 194.318 48.6638 195.378 46.4025C196.438 44.1235 197.983 42.3127 200.015 40.97C202.064 39.6097 204.564 38.9295 207.515 38.9295C210.2 38.9295 212.523 39.5037 214.484 40.652C216.463 41.8003 217.991 43.4522 219.069 45.6075C220.164 47.7628 220.712 50.351 220.712 53.372C220.712 53.849 220.694 54.3613 220.659 54.909C220.641 55.4567 220.606 55.9425 220.553 56.3665H202.321ZM207.515 44.5475C206.013 44.5475 204.803 45.0863 203.884 46.164C202.965 47.2417 202.409 48.9642 202.215 51.3315H212.55C212.532 49.2822 212.134 47.6392 211.357 46.4025C210.58 45.1658 209.299 44.5475 207.515 44.5475ZM252.994 31.271L255.061 68H247.482L247.032 52.2855C246.979 50.3422 246.961 48.655 246.979 47.224C247.014 45.793 247.076 44.4238 247.164 43.1165C247.253 41.7915 247.359 40.3075 247.482 38.6645L243.348 61.746H236.776L232.324 38.6645C232.466 40.2015 232.581 41.6502 232.669 43.0105C232.757 44.3532 232.81 45.7665 232.828 47.2505C232.863 48.7345 232.863 50.457 232.828 52.418L232.563 68H225.116L227.183 31.271H236.114L240.195 55.015L244.064 31.271H252.994ZM261.957 68V31.271H270.649V61.1365H286.576L285.675 68H261.957Z"
@@ -49,7 +50,7 @@ languages, and interpreters.
 <img
   src="/stateml-roadmap.png"
   alt="Current roadmap for StateML. Finish the grammar, draft a spec, and build out some tooling before the first announcement!"
-  class="w-full max-w-sm rounded-3xl !my-0 mx-auto"
+  class="dark:text-gray-400 w-full max-w-sm rounded-3xl !my-0 mx-auto"
 />
 
 </section>
diff --git a/tailwind.config.js b/tailwind.config.js
index e4907ac..121e934 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,18 +1,18 @@
-const plugin = require('tailwindcss/plugin');
+const plugin = require("tailwindcss/plugin");
 
 const variableFontWeightPlugin = plugin(({ addUtilities }) => {
   const fontWeights = [
-    '.font-thin',
-    '.font-light',
-    '.font-extralight',
-    '.font-normal',
-    '.font-medium',
-    '.font-semibold',
-    '.font-bold',
-    '.font-extrabold',
-    '.font-black',
+    ".font-thin",
+    ".font-light",
+    ".font-extralight",
+    ".font-normal",
+    ".font-medium",
+    ".font-semibold",
+    ".font-bold",
+    ".font-extrabold",
+    ".font-black",
   ].reduce((acc, className, i) => {
-    acc[className] = { 'font-variation-settings': `'wght' ${(i + 1) * 100}` };
+    acc[className] = { "font-variation-settings": `'wght' ${(i + 1) * 100}` };
     return acc;
   }, {});
 
@@ -20,7 +20,8 @@ const variableFontWeightPlugin = plugin(({ addUtilities }) => {
 });
 
 module.exports = {
-  mode: 'jit',
-  purge: ['./.vitepress/theme/**/*.vue', './**/*.md'],
-  plugins: [variableFontWeightPlugin, require('@tailwindcss/typography')],
+  mode: "jit",
+  purge: ["./.vitepress/theme/**/*.vue", "./**/*.md"],
+  plugins: [variableFontWeightPlugin, require("@tailwindcss/typography")],
+  darkMode: "media",
 };