diff --git a/src/components/Project.js b/src/components/Project.js
index 96438a0..ab1bb77 100644
--- a/src/components/Project.js
+++ b/src/components/Project.js
@@ -11,14 +11,10 @@ const Project = ({ className, project }) => (
       <h1>{project.title}</h1>
     </section>
     <section>
-      {project.description && (
-        <p className="text-foreground-secondary">{project.description}</p>
-      )}
+      {project.description && <p>{project.description}</p>}
       {project.description_long &&
         project.description_long.map((description) => (
-          <p className="text-foreground-secondary" key={description}>
-            {description}
-          </p>
+          <p key={description}>{description}</p>
         ))}
     </section>
     {project.details && (
@@ -81,7 +77,7 @@ const Project = ({ className, project }) => (
           {section.paragraphs &&
             section.paragraphs.map((paragraph, paragraphIndex) => (
               <p
-                className="text-foreground-secondary font-sm"
+                className="font-sm"
                 key={`section-${index}-paragraph-${paragraphIndex}`}
               >
                 {paragraph}
diff --git a/src/components/Slide.js b/src/components/Slide.js
index d1daef2..10ec7d5 100644
--- a/src/components/Slide.js
+++ b/src/components/Slide.js
@@ -30,9 +30,7 @@ const Slide = ({ className, slide }) => {
         <div className="slide__text-container">
           <p className="eyebrow">{slide.date}</p>
           <h1 className="h3">{slide.title}</h1>
-          <p className="text-foreground-secondary">
-            {slide.description_short || slide.description}
-          </p>
+          <p>{slide.description_short || slide.description}</p>
           <Link ElementType={GatsbyLink} to={projectPath} unstyled>
             <Button size={Button.size.small}>More Details</Button>
           </Link>
diff --git a/src/pages/index.js b/src/pages/index.js
index d4fae2d..9c32734 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -8,7 +8,7 @@ const Home = () => {
       <article className="container-md">
         <b className="h5 padding-left-sm">Hello, my name is</b>
         <h1 className="margin-top-sm">Adam Graham</h1>
-        <p className="text-foreground-secondary font-lg margin-bottom-1em">
+        <p className="font-lg margin-bottom-1em">
           Adam is a professional software engineer and game developer with 10+
           years of experience. He founded the indie game studio{' '}
           <Link external to="https://zigurous.com/">
diff --git a/src/styles/global.css b/src/styles/global.css
index aaf2f6b..ff3a1f4 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -19,8 +19,13 @@ html, body {
   }
 }
 
-.btn, .btn--default {
-  --button-color-primary: var(--color-surface-6dp);
-  --button-color-primary-hover: var(--color-surface-24dp);
-  --button-color-secondary: var(--color-on-surface-high);
+[data-theme="dark"],
+[data-theme="dark"] * {
+  --color-foreground: #c9d1d9;
+  --color-foreground-muted: #8b949e;
+  --color-default: #262a30;
+  --color-default-emphasis: #31363c;
+  --color-default-subtle: #2d3137;
+  --color-on-default: #c9d1d9;
+  --rgb-default: 38, 42, 48;
 }
diff --git a/src/styles/menu.css b/src/styles/menu.css
index ce833a8..d08af2a 100644
--- a/src/styles/menu.css
+++ b/src/styles/menu.css
@@ -14,7 +14,7 @@
   height: 100vh;
   transform: translateY(calc(100vh - 80px));
   transition: transform 400ms;
-  background-color: var(--color-surface-2dp);
+  background-color: var(--color-surface-2);
   pointer-events: all;
 }
 
@@ -49,7 +49,7 @@
 }
 
 .app-menu .logo:hover {
-  color: white;
+  color: var(--color-white, white);
 }
 
 .app-menu .navbar {
@@ -79,7 +79,7 @@
 }
 
 .app-menu .navbar li a.active:hover {
-  background-color: rgba(var(--rgb-on-background),var(--opacity-4dp));
+  background-color: var(--color-default-subtle);
 }
 
 .app-menu__body {
@@ -141,7 +141,7 @@
 }
 
 .app-menu__nav-list a:hover {
-  color: white;
+  color: var(--color-white, white);
 }
 
 @media (max-width: 576px) {
diff --git a/src/styles/project.css b/src/styles/project.css
index e307b8e..59c7e1c 100644
--- a/src/styles/project.css
+++ b/src/styles/project.css
@@ -11,7 +11,7 @@
 .project em {
   font-style: normal;
   letter-spacing: -0.5px;
-  color: var(--color-on-surface-medium);
+  color: var(--color-foreground-muted);
 }
 
 .project img {
diff --git a/src/styles/slide.css b/src/styles/slide.css
index b797f2a..4218e6b 100644
--- a/src/styles/slide.css
+++ b/src/styles/slide.css
@@ -24,7 +24,7 @@
 .slide__image {
   display: inline-flex;
   max-height: 100%;
-  border: 12px solid var(--color-surface-1dp);
+  border: 12px solid var(--color-surface-2);
   border-radius: 0.25rem;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 10%);
   background-color: var(--color-background);