diff --git a/src/lib/css/variables.scss b/src/lib/css/variables.scss
index 44e35ef..bd35c71 100644
--- a/src/lib/css/variables.scss
+++ b/src/lib/css/variables.scss
@@ -1,15 +1,17 @@
 $mobile-breakpoint: "max-width: 768px";
 
 :root {
+    --background-dark: url("/img/background-black-red.jpg");
+
     --color-text: #161616;
 
     --color-primary: #DB2937;
     --color-on-primary: white;
 
-    --color-accent: #161616;
+    --color-accent: #303030;
     --color-on-accent: #f2a6ac;
 
-    --color-dark: #303030;
+    --color-dark: #161616;
     --color-dark-gradient: linear-gradient(0deg, var(--color-accent) 0%, var(--color-dark) 22%);
     --color-on-dark: #f2a6ac;
 
diff --git a/src/lib/nav.scss b/src/lib/nav.scss
index 717ec4b..aa8f5ce 100644
--- a/src/lib/nav.scss
+++ b/src/lib/nav.scss
@@ -25,7 +25,7 @@
     display: grid;
     grid-template-columns: auto minmax(0px, var(--width)) auto;
     box-shadow: var(--elevation-high);
-    background: var(--color-dark-gradient);
+    background: var(--background-dark);
 
     &--content {
         grid-area: 1 / 2 / 2 / 3;
@@ -47,7 +47,7 @@
         width: var(--desktop-logo-width);
         padding: var(--space-small);
 
-        background: var(--color-dark);
+        background: var(--background-dark);
         transition: top var(--transitions-duration) ease-out;
 
         @media($mobile-breakpoint) {
@@ -68,7 +68,7 @@
     // Override the transparent background and box-shadow: none until the
     // docking transition ends (see nav.js)
     &__docking &--logo {
-        background: var(--color-dark);
+        background: var(--background-dark);
         box-shadow: var(--elevation-high);
     }
 
diff --git a/src/pages/index/footer.scss b/src/pages/index/footer.scss
index 4bd1dea..877e292 100644
--- a/src/pages/index/footer.scss
+++ b/src/pages/index/footer.scss
@@ -1,5 +1,5 @@
 .footer {
-    background-image: url("/img/background-black-red.jpg");
+    background: var(--background-dark);
     color: white;
     font-size: 0.925rem;
 
diff --git a/src/pages/index/games.scss b/src/pages/index/games.scss
index 2e1553b..099db34 100644
--- a/src/pages/index/games.scss
+++ b/src/pages/index/games.scss
@@ -16,7 +16,7 @@
         @extend h2;
         margin: 0;
         padding: var(--space-small);
-        background: var(--color-dark-gradient);
+        background: var(--background-dark);
         color: var(--color-on-dark);
     }
 
diff --git a/src/pages/index/news.scss b/src/pages/index/news.scss
index f97890d..d55f66d 100644
--- a/src/pages/index/news.scss
+++ b/src/pages/index/news.scss
@@ -10,7 +10,7 @@
     &--header {
         display: flex;
         color: var(--color-on-dark);
-        background: var(--color-dark);
+        background: var(--background-dark);
         padding: var(--space-small) var(--space-medium);
         align-items: center;
         gap: var(--space-small);