1 files changed, 17 insertions, 14 deletions

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index 0a4dfbb6..d42bbfc0 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -1,8 +1,3 @@
-body {
-    background-color: hsl(0, 0%, 100%);
-    background-color: var(--color-bg, white)
-}
-
 h2 {
     font-size: 2em;
 }
@@ -3391,6 +3386,13 @@ mark {
     --font-secondary: 'Open Sans', sans-serif
 }
 
+[data-theme="dark"] {
+    --cd-color-2: hsl(0, 0%, 34%);
+    --cd-color-2-h: 0;
+    --cd-color-2-s: 0%;
+    --cd-color-2-l: 34%;
+}
+
 @supports (--css: variables) {
     @media (min-width: 64rem) {
         :root {
@@ -3424,6 +3426,10 @@ mark {
     background-color: hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.05));
 }
 
+[data-theme="dark"] .cd-timeline {
+    background-color: #2C2F33;
+}
+
 .cd-timeline h2 {
     font-weight: 700
 }
@@ -3490,6 +3496,10 @@ mark {
     box-shadow: 0 0 0 4px var(--color-white), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05)
 }
 
+[data-theme="dark"] .cd-timeline__img {
+    box-shadow: 0 0 0 4px var(--cd-color-2), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05)
+}
+
 .cd-timeline__img i {
     font-size: 1.5em;
     color: white;
@@ -3552,8 +3562,6 @@ mark {
     position: relative;
     margin-left: 1.25em;
     margin-left: var(--space-md);
-    background: hsl(0, 0%, 100%);
-    background: var(--color-white);
     border-radius: 0.25em;
     border-radius: var(--radius-md);
     padding: 1.25em;
@@ -3571,7 +3579,7 @@ mark {
     height: 0;
     border: 7px solid transparent;
     border-right-color: hsl(0, 0%, 100%);
-    border-right-color: var(--color-white)
+    border-right-color: var(--cd-color-2)
 }
 
 .cd-timeline__content h2 {
@@ -3599,15 +3607,10 @@ mark {
         height: 0;
         border: 7px solid transparent;
         border-left-color: hsl(0, 0%, 100%);
-        border-left-color: var(--color-white)
+        border-left-color: var(--cd-color-2)
     }
 }
 
-.cd-timeline__date {
-    color: hsla(207, 10%, 55%, 0.7);
-    color: hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0.7)
-}
-
 @media (min-width: 64rem) {
     .cd-timeline__date {
         position: absolute;