Dark mode sandbox

src/components/atoms/article-flag/article-flag.scss

@@ -11,6 +11,10 @@
   display: inline-block;
   text-decoration: none;
 
+  @media (prefers-color-scheme: dark) {
+    color: var(--dark-mode-color);
+  }
+
   &:hover {
     text-decoration: underline;
     text-underline-offset: 3px;

src/components/atoms/button/button.scss

@@ -27,6 +27,10 @@
   font-weight: 600;
   text-transform: none;
 
+  @media (prefers-color-scheme: dark) {
+    color: var(--light-mode-color);
+  }
+
   &:hover {
     background-color: #d7d9de;
   }

src/components/atoms/descriptors/descriptors.scss

@@ -27,6 +27,10 @@
     @include typography.identifiers-list-text();
 
     text-decoration: none;
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--dark-mode-color);
+    }
   }
 }
 

src/components/atoms/footer-main/footer-main.scss

@@ -71,6 +71,10 @@
 
     display: block;
   }
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--dark-mode-color);
+  }
 }
 
 .carbon-neutral-wrapper {

src/components/atoms/jump-to-menu/jump-to-menu.scss

@@ -59,6 +59,10 @@
   @include typography.navigation-heading();
 
   text-decoration: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--dark-mode-color);
+  }
 }
 
 .jump-menu-list__item--active .jump-menu-list__link {

src/components/atoms/sign-up/sign-up.scss

@@ -44,4 +44,8 @@
     color: var(--color-primary);
     text-decoration: underline;
   }
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--dark-mode-color);
+  }
 }

src/components/molecules/article-status/article-status.scss

@@ -34,6 +34,10 @@
   color: var(--color-primary);
   font-family: var(--font-family-primary);
   font-weight: 600;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--dark-mode-color);
+  }
 }
 
 .article-status__text {
@@ -50,6 +54,10 @@
   font-weight: 600;
   text-decoration: none;
 
+  @media (prefers-color-scheme: dark) {
+    color: var(--dark-mode-color);
+  }
+
   &:hover {
     text-decoration: underline;
     text-underline-offset: 3px;

src/components/molecules/site-header/site-header.scss

@@ -70,6 +70,10 @@
     color: var(--link-decoration);
     text-decoration: none;
 
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-text-dark-mode);
+    }
+
     &:hover {
       color: var(--color-primary);
     }
@@ -155,6 +159,10 @@
     color: var(--link-decoration);
     text-decoration: none;
 
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-text-dark-mode);
+    }
+
     &:hover {
       color: var(--color-primary);
     }
@@ -172,6 +180,10 @@
     display: block;
     text-decoration: none;
 
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-text-dark-mode);
+    }
+
     &:hover {
       color: var(--color-primary);
     }

src/components/molecules/timeline/timeline.scss

@@ -61,6 +61,10 @@
       @include mixins.margin(0, "bottom");
     }
   }
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--dark-mode-color);
+  }
 }
 
 .review-timeline__description,
@@ -71,12 +75,20 @@
   font-family: var(--font-family-primary);
   font-weight: 600;
   text-decoration: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--dark-mode-color);
+  }
 }
 
 .review-timeline__link {
   &::before {
     color: var(--color-text-secondary);
     content: "\00a0\00a0•\00a0\00a0";
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--dark-mode-color);
+    }
   }
 
   &:hover {

src/components/pages/article/article-page.scss

@@ -63,6 +63,10 @@
 
     justify-content: normal;
   }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--dark-mode-background);
+  }
 }
 
 .tabbed-navigation__tab-label {
@@ -86,6 +90,10 @@
 
       margin: 0;
     }
+
+    @media (prefers-color-scheme: dark) {
+      color: var(--dark-mode-color);
+    }
   }
 
   &.tabbed-navigation__tab-label--active {

src/pages/_document.page.tsx

@@ -13,13 +13,6 @@ export default function Document() {
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,600;1,400;1,600&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"/>
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
         <style>{`
-          html {
-            scroll-behavior: smooth;
-          }
-          body {
-            background-color: #fff;
-            margin: 0;
-          }
           [id] {
             scroll-margin: 74px;
           }

src/sass/_generated-content.scss

@@ -29,6 +29,11 @@
       border-bottom-color: var(--color-primary);
       color: var(--color-primary);
     }
+
+    @media (prefers-color-scheme: dark) {
+      border-bottom: 1px dotted #fff;
+      color: var(--dark-mode-color);
+    }
   }
 
   span > a:not(:first-child)::before {

src/sass/_settings.scss

@@ -24,8 +24,20 @@
   --site-spacing: 24px;
   --site-spacing-large: 48px;
 
+  // Dark Mode
+  --dark-mode-background: #121212;
+  --dark-mode-color: #fff;
+  --light-mode-background: #fff;
+  --light-mode-color: $color-text;
+
   // Base font size
   --base-font-size: 16;
+
+  // Dark Mode variants
+  --color-text-dark-mode: var(--dark-mode-color);
+  --color-text-light-mode: var(--color-text);
+  --color-background-dark-mode: var(--dark-mode-background);
+  --color-background-light-mode: var(--light-mode-background);
 }
 
 // Typography
@@ -40,6 +52,22 @@ $breakpoint-medium: 768px;
 $breakpoint-large: 1000px;
 $breakpoint-extra-large: 1200px;
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--color-background-dark-mode);
+    --color-text: var(--color-text-dark-mode);
+  }
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background-color: var(--color-background);
+  margin: 0;
+}
+
 @mixin container-padding($padding: true) {
   @if $padding {
     padding-left: var(--site-spacing);