diff --git a/src/components/Markdown/Markdown.css b/src/components/Markdown/Markdown.css
index 9cbe7e55ce46..902ba1f8ecd4 100644
--- a/src/components/Markdown/Markdown.css
+++ b/src/components/Markdown/Markdown.css
@@ -1,4 +1,5 @@
 @reference "tailwindcss";
+@reference "../../styles/theme.css";
 @import "./prism-theme.css";
 
 /*
@@ -52,7 +53,7 @@
   h4,
   h5,
   h6 {
-    @apply block font-semibold text-[#32434a] leading-[1.4];
+    @apply block font-semibold text-heading-dark leading-[1.4];
     font-family:
       "Source Serif Pro", ui-serif, Georgia, Cambria, "Times New Roman", Times,
       serif;
@@ -140,7 +141,7 @@
   }
 
   aside {
-    @apply border-l-4 border-solid border-l-[#dddddd] py-[0.75em] px-[1em] text-gray-500;
+    @apply border-l-4 border-solid border-l-aside-border py-[0.75em] px-[1em] text-gray-500;
     > :first-child {
       margin-top: 0;
     }
@@ -165,24 +166,24 @@
       > .warning__prefix,
       > .preview__prefix,
       > .todo__prefix {
-        @apply capitalize font-semibold block text-base text-[#1a1a1a] mb-[0.25em];
+        @apply capitalize font-semibold block text-base text-aside-prefix mb-[0.25em];
       }
     }
 
     &.tip {
-      @apply bg-[#eaf8ff] text-[#4e7182] border-l-[#1eb4ff];
+      @apply bg-aside-tip-bg text-aside-tip-text border-l-aside-tip-border;
     }
 
     &.warning {
-      @apply bg-[#fdf5d8] text-[#716b53] border-l-[#f3c316];
+      @apply bg-aside-warning-bg text-aside-warning-text border-l-aside-warning-border;
     }
 
     &.preview {
-      @apply bg-gray-100 text-[#716b53] border-l-[#1e72b3];
+      @apply bg-gray-100 text-aside-warning-text border-l-brand-blue;
     }
 
     &.todo {
-      @apply bg-[#fbddcd] text-[#907a6e] border-l-[#e95d13];
+      @apply bg-aside-todo-bg text-aside-todo-text border-l-aside-todo-border;
 
       .tip-content::before {
         content: "[TODO]: ";
@@ -192,7 +193,7 @@
   }
 
   blockquote {
-    @apply border-l-4 border-solid border-l-[#dddddd] py-[0.75em] px-[1em] text-gray-500 italic;
+    @apply border-l-4 border-solid border-l-aside-border py-[0.75em] px-[1em] text-gray-500 italic;
 
     > :first-child {
       margin-top: 0;
@@ -226,7 +227,7 @@
   }
 
   th {
-    @apply font-bold text-left py-1.5 px-3 bg-[#f1f4f4] border-r border-solid border-r-[#cccccc];
+    @apply font-bold text-left py-1.5 px-3 bg-table-header-bg border-r border-solid border-r-table-border;
 
     &:last-child {
       @apply border-r-0;
@@ -234,14 +235,14 @@
   }
 
   tr {
-    @apply border border-solid border-[#cccccc] block mb-2.5;
+    @apply border border-solid border-table-border block mb-2.5;
 
     &:nth-child(2n) {
-      @apply bg-[#f8f8f8];
+      @apply bg-table-row-alt;
     }
 
     &:last-child {
-      @apply border-b border-b-[#cccccc];
+      @apply border-b border-b-table-border;
     }
 
     @media (min-width: 768px) {
@@ -266,7 +267,7 @@
       &::before {
         content: none;
       }
-      @apply border-r border-r-[#cccccc] border-b-0;
+      @apply border-r border-r-table-border border-b-0;
       &:last-child {
         @apply border-r-0;
       }
@@ -296,7 +297,7 @@
   }
 
   a code {
-    @apply text-[#1a6bac];
+    @apply text-brand-link;
   }
   a {
     text-decoration: underline;
@@ -304,11 +305,11 @@
     text-decoration-thickness: 1px;
   }
   pre {
-    @apply bg-[#2d3748] text-[#e2e8f0] p-4 pr-14 rounded-[3px] text-sm leading-normal overflow-auto;
+    @apply bg-code-pre-bg text-code-pre-text p-4 pr-14 rounded-[3px] text-sm leading-normal overflow-auto;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
 
     code {
-      @apply m-0 p-0 whitespace-pre border-none bg-transparent text-[#a5cee1];
+      @apply m-0 p-0 whitespace-pre border-none bg-transparent text-code-token;
       font-family: monospace;
       text-shadow: 0 1px 0 rgba(22, 31, 35, 0.5);
 
@@ -317,20 +318,20 @@
 
         &::after {
           content: "›";
-          @apply float-left relative -left-0.5 text-center text-[#1e78c2] text-base;
+          @apply float-left relative -left-0.5 text-center text-code-link text-base;
         }
       }
 
       a {
         border-bottom: 1px dotted;
-        @apply border-b-[#175d96];
+        @apply border-b-code-anchor-border;
       }
 
       .code-link {
         @apply relative;
 
         &:hover {
-          @apply text-[#2186d8];
+          @apply text-code-link-hover;
         }
       }
     }
diff --git a/src/components/NotificationBar/MessageBar.jsx b/src/components/NotificationBar/MessageBar.jsx
index b3035d12e525..63dfa1bc70e0 100644
--- a/src/components/NotificationBar/MessageBar.jsx
+++ b/src/components/NotificationBar/MessageBar.jsx
@@ -25,15 +25,14 @@ export default function MessageBar(props) {
     <>
       {listTransitions((styles) => (
         <animated.div
-          className="flex items-center rounded z-50 fixed left-[1px] right-[1px] bottom-[1px] bg-white border-2 border-solid border-gray-700 max-w-full pl-20 py-20 shadow-2xl md:left-20 md:right-auto md:bottom-20 md:max-w-[300px] dark:bg-gray-500 print:hidden"
+          className="flex items-center rounded z-50 fixed left-px right-px bottom-px bg-white border-2 border-solid border-gray-700 max-w-full pl-20 py-20 shadow-2xl md:left-20 md:right-auto md:bottom-20 md:max-w-[300px] dark:bg-gray-500 print:hidden"
           style={styles}
         >
           <Content />
           {localStorageIsEnabled ? (
             <button
               type="button"
-              className="px-20 self-stretch inline-flex items-center cursor-pointer"
-              style={{ background: "none", border: "none" }}
+              className="px-20 self-stretch inline-flex items-center cursor-pointer bg-transparent border-none"
               onClick={close}
             >
               <CloseIcon
diff --git a/src/styles/dark.css b/src/styles/dark.css
index c761f6a8448a..9bb6041dbdc6 100644
--- a/src/styles/dark.css
+++ b/src/styles/dark.css
@@ -2,11 +2,11 @@
 
 [data-theme="dark"] {
   body {
-    @apply bg-[#121212] text-[#e0e0e0];
+    @apply bg-dark-bg text-dark-text;
   }
 
   .splash__section--dark {
-    @apply bg-[#202020];
+    @apply bg-dark-surface;
   }
 
   .markdown {
@@ -16,54 +16,54 @@
     h4,
     h5,
     h6 {
-      @apply text-[#9ab3c0];
+      @apply text-dark-heading;
     }
 
     code,
     tt {
       text-shadow: none;
-      @apply bg-[rgba(70,94,105,0.45)];
+      @apply bg-dark-code-inline-bg;
     }
 
     blockquote {
-      @apply border-l-[#343434] text-[#a3a3a3];
+      @apply border-l-dark-section-border text-dark-muted;
     }
 
     blockquote.tip {
-      @apply bg-[#192429] text-[#7da2b4];
+      @apply bg-dark-aside-tip-bg text-dark-aside-tip-text;
     }
 
     blockquote.warning {
-      @apply bg-[#27220a] text-[#a49d83];
+      @apply bg-dark-aside-warning-bg text-dark-aside-warning-text;
     }
 
     blockquote.todo {
-      @apply bg-[#402b1f] text-[#998478];
+      @apply bg-dark-aside-todo-bg text-dark-aside-todo-text;
     }
 
     hr {
-      @apply bg-[#343434];
+      @apply bg-dark-section-border;
     }
 
     th {
-      @apply bg-[#121212] border-[#252525];
+      @apply bg-dark-bg border-dark-border;
     }
 
     tr,
     tr:last-child {
-      @apply border-[#252525];
+      @apply border-dark-border;
     }
 
     tr:nth-child(2n) {
-      @apply bg-[#202020];
+      @apply bg-dark-surface;
     }
 
     td {
-      @apply border-[#252525];
+      @apply border-dark-border;
     }
 
     pre {
-      @apply bg-[#131b1f];
+      @apply bg-dark-code-bg;
 
       code {
         @apply bg-transparent;
@@ -71,10 +71,10 @@
     }
 
     a code {
-      @apply text-[#69a8ee];
+      @apply text-dark-link;
 
       &:hover {
-        @apply text-[#82b7f6];
+        @apply text-dark-link-hover;
       }
     }
 
@@ -82,7 +82,7 @@
     aside.warning,
     aside.preview,
     aside.todo {
-      @apply bg-[#222222] text-white;
+      @apply bg-dark-surface-2 text-white;
     }
 
     aside.tip > .tip__prefix,
@@ -99,11 +99,11 @@
 
   .sponsors__content,
   .footer__inner {
-    @apply border-[#252525];
+    @apply border-dark-border;
   }
 
   .page-links__gap {
-    @apply text-gray-300;
+    @apply text-dark-muted;
   }
 
   .site {
@@ -111,11 +111,11 @@
   }
 
   .sidebar__docs-version {
-    @apply border-[#252525] text-[#b8b8b8];
+    @apply border-dark-border text-dark-sidebar-version;
   }
 
   .contributor .contributor__name {
-    @apply bg-[#121212] text-[#9ab3c0];
+    @apply bg-dark-bg text-dark-heading;
   }
 
   .footer-openjsf-logo {
@@ -130,12 +130,12 @@
 @layer base {
   [data-theme="dark"] a,
   [data-theme="dark"] button.as-link {
-    @apply text-[#69a8ee];
+    @apply text-dark-link;
   }
 }
 
 @layer base {
   [data-theme="dark"] a:hover {
-    @apply text-[#82b7f6];
+    @apply text-dark-link-hover;
   }
 }
diff --git a/src/styles/index.css b/src/styles/index.css
index e31984fe806b..954288ab1581 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,5 +1,6 @@
 @reference "tailwindcss";
 @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&family=Source+Sans+Pro:ital,wght@0,400;0,600;1,400&family=Source+Serif+Pro:wght@600&display=swap");
+@import "./theme.css";
 @import "./dark.css";
 
 * {
@@ -34,19 +35,19 @@ body {
 @layer base {
   a,
   button.as-link {
-    @apply text-[#1a6bac] no-underline;
-    transition: color 250ms;
+    @apply text-brand-link no-underline;
+    @apply transition-colors duration-[250ms];
 
     &.icon-link {
       @apply inline-block text-[0.7em] ml-[16px] -rotate-45 text-[#909090];
 
       &:hover {
-        @apply text-[#1a6bac];
+        @apply text-brand-link;
       }
     }
 
     &:hover {
-      @apply text-[#144f80];
+      @apply text-brand-link-hover;
     }
   }
 
diff --git a/src/styles/theme.css b/src/styles/theme.css
new file mode 100644
index 000000000000..58b53a6b9b46
--- /dev/null
+++ b/src/styles/theme.css
@@ -0,0 +1,129 @@
+@theme {
+  /* Brand link colors */
+  --color-brand-link: #1d78c1;
+  --color-brand-link-hover: #144f80;
+  --color-brand-link-dark: #69a8ee;
+  --color-brand-link-dark-hover: #82b7f6;
+
+  /* Brand button/UI blue */
+  --color-brand-blue: #175d96;
+  --color-brand-blue-hover: #135d96;
+
+  /* Heading color */
+  --color-heading-dark: #32434a;
+
+  /* Aside/callout colors */
+  --color-aside-border: #dddddd;
+  --color-aside-tip-bg: #eaf8ff;
+  --color-aside-tip-text: #4e7182;
+  --color-aside-tip-border: #1eb4ff;
+  --color-aside-warning-bg: #fdf5d8;
+  --color-aside-warning-text: #716b53;
+  --color-aside-warning-border: #f3c316;
+  --color-aside-todo-bg: #fbddcd;
+  --color-aside-todo-text: #907a6e;
+  --color-aside-todo-border: #e95d13;
+  --color-aside-prefix: #1a1a1a;
+
+  /* Table colors */
+  --color-table-header-bg: #f1f4f4;
+  --color-table-border: #cccccc;
+  --color-table-row-alt: #f8f8f8;
+
+  /* Code colors */
+  --color-code-pre-bg: #2d3748;
+  --color-code-pre-text: #e2e8f0;
+  --color-code-token: #a5cee1;
+  --color-code-link: #1e78c2;
+  --color-code-link-hover: #2186d8;
+  --color-code-anchor-border: #175d96;
+
+  /* Dark mode surface colors */
+  --color-dark-bg: #121212;
+  --color-dark-surface: #202020;
+  --color-dark-border: #252525;
+  --color-dark-surface-2: #222222;
+  --color-dark-heading: #9ab3c0;
+  --color-dark-text: #e0e0e0;
+  --color-dark-muted: #a3a3a3;
+  --color-dark-sidebar-version: #b8b8b8;
+  --color-dark-link: #69a8ee;
+  --color-dark-link-hover: #82b7f6;
+  --color-dark-code-bg: #131b1f;
+  --color-dark-code-inline-bg: rgba(70, 94, 105, 0.45);
+  --color-dark-aside-tip-bg: #192429;
+  --color-dark-aside-tip-text: #7da2b4;
+  --color-dark-aside-warning-bg: #27220a;
+  --color-dark-aside-warning-text: #a49d83;
+  --color-dark-aside-todo-bg: #402b1f;
+  --color-dark-aside-todo-text: #998478;
+  --color-dark-active-bg: #222424;
+  --color-dark-section-border: #343434;
+  --color-dark-sidebar-text: #cadbe6;
+  --color-dark-active-text: #465e69;
+
+  /* Sidebar/nav */
+  --color-nav-bg: #526b78;
+
+  /* Sponsor button */
+  --color-sponsor-text-dark: #4fa8ff;
+  --color-sponsor-hover-bg-dark: #4fa8ff;
+  --color-sponsor-hover-text-dark: #04131f;
+}
+
+/* Explicit runtime CSS custom properties so var(--color-*) works without @import "tailwindcss" */
+:root {
+  --color-brand-link: #1d78c1;
+  --color-brand-link-hover: #144f80;
+  --color-brand-link-dark: #69a8ee;
+  --color-brand-link-dark-hover: #82b7f6;
+  --color-brand-blue: #175d96;
+  --color-brand-blue-hover: #135d96;
+  --color-heading-dark: #32434a;
+  --color-aside-border: #dddddd;
+  --color-aside-tip-bg: #eaf8ff;
+  --color-aside-tip-text: #4e7182;
+  --color-aside-tip-border: #1eb4ff;
+  --color-aside-warning-bg: #fdf5d8;
+  --color-aside-warning-text: #716b53;
+  --color-aside-warning-border: #f3c316;
+  --color-aside-todo-bg: #fbddcd;
+  --color-aside-todo-text: #907a6e;
+  --color-aside-todo-border: #e95d13;
+  --color-aside-prefix: #1a1a1a;
+  --color-table-header-bg: #f1f4f4;
+  --color-table-border: #cccccc;
+  --color-table-row-alt: #f8f8f8;
+  --color-code-pre-bg: #2d3748;
+  --color-code-pre-text: #e2e8f0;
+  --color-code-token: #a5cee1;
+  --color-code-link: #1e78c2;
+  --color-code-link-hover: #2186d8;
+  --color-code-anchor-border: #175d96;
+  --color-dark-bg: #121212;
+  --color-dark-surface: #202020;
+  --color-dark-border: #252525;
+  --color-dark-surface-2: #222222;
+  --color-dark-heading: #9ab3c0;
+  --color-dark-text: #e0e0e0;
+  --color-dark-muted: #a3a3a3;
+  --color-dark-sidebar-version: #b8b8b8;
+  --color-dark-link: #69a8ee;
+  --color-dark-link-hover: #82b7f6;
+  --color-dark-code-bg: #131b1f;
+  --color-dark-code-inline-bg: rgba(70, 94, 105, 0.45);
+  --color-dark-aside-tip-bg: #192429;
+  --color-dark-aside-tip-text: #7da2b4;
+  --color-dark-aside-warning-bg: #27220a;
+  --color-dark-aside-warning-text: #a49d83;
+  --color-dark-aside-todo-bg: #402b1f;
+  --color-dark-aside-todo-text: #998478;
+  --color-dark-active-bg: #222424;
+  --color-dark-section-border: #343434;
+  --color-dark-sidebar-text: #cadbe6;
+  --color-dark-active-text: #465e69;
+  --color-nav-bg: #526b78;
+  --color-sponsor-text-dark: #4fa8ff;
+  --color-sponsor-hover-bg-dark: #4fa8ff;
+  --color-sponsor-hover-text-dark: #04131f;
+}