colors

app/signup/static/signup/style.scss

@@ -2,6 +2,12 @@
 @use 'grids-responsive';
 /* The line above should remain empty */
 
+$darkTextColor: #ccc;
+$darkTextColorStr: "ccc";
+$darkBgGrey: #313131;
+$blueLinkVisited: #007bff;
+$grey: #666;
+
 /************************/
 /** Very Common Things **/
 /************************/
@@ -22,7 +28,7 @@ html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
 
 a, a:visited {
     text-decoration: none;
-    color: #007bff;
+    color: $blueLinkVisited;
 }
 
 a:hover, a:focus {
@@ -50,6 +56,7 @@ body {
 h1 {
     font-size: 1.6rem;
 }
+
 $h2Size: 1.2rem;
 h2 {
     font-size: $h2Size;
@@ -69,8 +76,11 @@ h1.brand-title {
     text-align: center;
 }
 
+h1.brand-title > a, h2.brand-subtitle {
+    color: #eee;
+}
+
 h1.brand-title > a {
-    color: #000;
     font-variant: small-caps;
     font-size: 3rem;
 }
@@ -79,11 +89,9 @@ h1.brand-title > a:hover, h1.brand-title > a:focus {
     text-decoration: none;
 }
 
-$grey: #666;
 h2.brand-subtitle {
     font-size: 1.6rem;
     text-align: center;
-    color: $grey;
 }
 
 main {
@@ -95,10 +103,11 @@ main {
 #header {
     margin-left: auto;
     margin-right: auto;
-    background-color: #e6e6e6;
     padding: 1rem 2rem 2rem 2rem;
     border-radius: 10px;
     max-width: 1000px;
+
+    background: radial-gradient(circle at top left, $blueLinkVisited 0%, $grey 50%, $darkTextColor 100%);
 }
 
 /*******************************/
@@ -244,13 +253,8 @@ $featuresGutter: 1rem;
 /**********************************/
 
 @media (prefers-color-scheme: dark) {
-    // these two should match
-    $textColor: #ccc;
-    $textColorStr: "ccc";
-    $bgGrey: #313131;
-
-    h1, h2, h2.brand-subtitle, h3, body {
-        color: $textColor;
+    h1, h2, h3, body {
+        color: $darkTextColor;
     }
     body {
         background-color: #222;
@@ -260,14 +264,19 @@ $featuresGutter: 1rem;
     }
 
     #header {
-        background-color: $bgGrey;
+        background-color: $darkBgGrey;
+        background: radial-gradient(circle at top left, $blueLinkVisited 0%, $darkBgGrey 50%, $darkTextColor 100%);
+    }
+
+    h2.brand-subtitle {
+        color: #ccc;
     }
 
     #page-index {
         #subscribe-section {
-            background-color: $bgGrey;
+            background-color: $darkBgGrey;
             > h2 {
-                color: $textColor;
+                color: $darkTextColor;
             }
 
             span.message-success {
@@ -275,7 +284,7 @@ $featuresGutter: 1rem;
             }
 
             input {
-                color: $textColor;
+                color: $darkTextColor;
                 border: 1px solid #555;
                 box-shadow: none;
                 -webkit-box-shadow: none;
@@ -288,7 +297,7 @@ $featuresGutter: 1rem;
         label::before {
             // difference from the default version: the color of the
             // shape is #ccc.
-            background-image: svgarrow($textColorStr);
+            background-image: svgarrow($darkTextColorStr);
         }
 
     }