diff --git a/docs/ui/src/css/base.css b/docs/ui/src/css/base.css
index f269fe92a9..cb00f5664f 100644
--- a/docs/ui/src/css/base.css
+++ b/docs/ui/src/css/base.css
@@ -9,15 +9,7 @@ html {
   font-size: var(--body-font-size);
   height: 100%;
   scroll-behavior: smooth;
-  background:
-    radial-gradient(ellipse 100% 100% at var(--x1) var(--y1), rgba(89, 36, 99, 0.8), transparent 50%),
-    radial-gradient(ellipse 80% 120% at var(--x2) var(--y2), rgba(138, 214, 236, 0.5), transparent 55%),
-    radial-gradient(ellipse 150% 90% at var(--x3) var(--y3), rgba(40, 98, 114, 0.6), transparent 65%),
-    radial-gradient(ellipse 100% 100% at 80% 100%, rgba(89, 36, 99, 0.8), transparent 60%),
-    linear-gradient(135deg, #124b83, #124b83, #124b83);
-  background-attachment: fixed;
-  background-size: cover;
-  background-repeat: no-repeat;
+  background-color: var(--body-background);
 }
 
 @media screen and (min-width: 1024px) {
diff --git a/docs/ui/src/css/vars.css b/docs/ui/src/css/vars.css
index 59d79de6b3..186a8be44e 100644
--- a/docs/ui/src/css/vars.css
+++ b/docs/ui/src/css/vars.css
@@ -25,6 +25,7 @@
   --color-black-75: rgba(0, 0, 0, 0.75);
   --color-black-15: rgba(0, 0, 0, 0.15);
   --color-blue-10: rgba(140, 210, 255, 0.95);
+  --color-blue-100: rgb(18, 75, 131);
   /* fonts */
   --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
   --body-font-size: 1.0625em; /* 17px */
@@ -37,7 +38,7 @@
   --monospace-font-family: "Roboto Mono", monospace;
   --monospace-font-weight-bold: 600;
   /* base */
-  --body-background: var(--color-white);
+  --body-background: var(--color-blue-100);
   --panel-background: var(--color-black-75);
   --panel-border-color: var(--color-smoke-90);
   --scrollbar-track-color: var(--color-smoke-30);
diff --git a/docs/website/styles.css b/docs/website/styles.css
index 10c342062c..bc30ed6a72 100644
--- a/docs/website/styles.css
+++ b/docs/website/styles.css
@@ -28,6 +28,7 @@
     --function-name-color-hover: #0091ea;
     --primary-color:rgba(16, 149, 193, 1);
     --primary-color-hover:rgba(6, 125, 166, 1);
+    --body-background: #124b83;
 }
 
 @media (min-width: 576px) {
@@ -2535,10 +2536,6 @@ body > footer ul:first-of-type {
     margin-bottom: calc(var(--spacing) * .5)
 }
 
-body > footer ul:first-of-type a {
-    text-decoration:
-}
-
 @media (max-width: 767px) {
     body > footer ul:last-of-type li {
         display: list-item
@@ -2735,16 +2732,7 @@ html {
     margin: 0;
     padding: 0;
     min-height: 100%;
-    background:
-        radial-gradient(ellipse 100% 100% at var(--x1) var(--y1), rgba(89, 36, 99, 0.8), transparent 50%),
-        radial-gradient(ellipse 80% 120% at var(--x2) var(--y2), rgba(138, 214, 236, 0.5), transparent 55%),
-        radial-gradient(ellipse 150% 90% at var(--x3) var(--y3), rgba(40, 98, 114, 0.6), transparent 65%),
-        radial-gradient(ellipse 100% 100% at 80% 100%, rgba(89, 36, 99, 0.8), transparent 60%),
-        linear-gradient(135deg, #124B83, #124B83, #124B83);
-    background-blend-mode: normal;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-attachment: fixed;
+    background-color: var(--body-background);
 }
 
 /* ===========================