Addition of a toggleable dark mode.

Other UI cleanup and consistency.

app/static/styles.css

@@ -2,6 +2,48 @@ html {
   height: 100%;
 }
 
+body {
+  background-color: #f0f0f0;
+  line-height: 180%;
+  font-size: 110%;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex-direction: column;
+  font-family: 'Barlow', sans-serif;
+}
+
+.transition, .transition * {
+  transition-duration: 0.5s;
+  transition-property: color, border-color, background-color;
+}
+
+.theme-toggler {
+  cursor: pointer;
+}
+
+body.dark-mode {
+  color: #e7e7e7;
+  background: linear-gradient(to bottom right, #2e2e62, #1a1226);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+
+h1, h2 {
+  font-family: 'BarlowMedium', sans-serif;
+  text-align: center;
+  color: #111;
+}
+
+
+body.dark-mode h1 {
+  color: #e7e7e7;
+}
+
+body.dark-mode h2 {
+  color: #e7e7e7;
+}
+
 ::placeholder {
   color: #999;
 }
@@ -37,26 +79,10 @@ h1:hover span.logo.right {
   background-color: white;
 }
 
-body {
-  background-color: #f0f0f0;
-  line-height: 180%;
-  font-size: 110%;
-  margin-left: auto;
-  margin-right: auto;
-  display: flex;
-  flex-direction: column;
-  font-family: 'Barlow', sans-serif;
-}
-
 strong {
   font-family: 'BarlowMedium', sans-serif;
 }
 
-h1, h2 {
-  font-family: 'BarlowMedium', sans-serif;
-  text-align: center;
-}
-
 h1 {
   user-select: none;
 }
@@ -84,6 +110,10 @@ label {
   transition-timing-function: ease-out;
 }
 
+body.dark-mode label {
+  color: #eee;
+}
+
 label:hover {
   color: white;
   background-color: #222;
@@ -93,12 +123,37 @@ input, textarea {
   font-family: 'Barlow', sans-serif;
 }
 
+body.dark-mode input {
+  color: #eee;
+  background-color: #000;
+  border: none;
+  padding: 8px;
+}
+
+body.dark-mode textarea {
+  color: #eee;
+  background-color: #000;
+  border: none;
+  padding: 12px;
+}
+
 select {
-  background-color: white;
   border-radius: 0;
   border-style: solid;
   border-width: 1px;
-  border-color: #ccc;
+  padding: 10px;
+}
+
+select, body.dark-mode select:hover {
+  background-color: white;
+  border-color: #8f8f9d;
+  color: black;
+}
+
+body.dark-mode select, select:hover {
+  background-color: black;
+  border-color: black;
+  color: #eee;
 }
 
 .letter-form {
@@ -130,18 +185,19 @@ div.user form input, label {
 
 div.user form input {
   font-size: 120%;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #ddd;
-  padding: 0.3em;
 }
 
 .btn {
+  cursor: pointer;
   font-weight: bold;
   border-radius: 0;
   border-style: none;
 }
 
+input.btn {
+  padding: 0.8em 2em;
+}
+
 .color-fade {
   transition-property: color, background-color;
   transition-duration: 135ms;
@@ -158,14 +214,20 @@ div.user form input {
   background-color: white;
 }
 
-.secondary {
+.secondary, body.dark-mode .secondary:hover {
   color: black;
   background-color: white;
+  border: 1px solid #8f8f9d;
 }
 
-.secondary:hover {
+.secondary a {
+  color: inherit;
+}
+
+.secondary:hover, body.dark-mode .secondary  {
   color: white;
   background-color: black;
+  border: 1px solid black;
 }
 
 .logged-in {
@@ -269,6 +331,10 @@ textarea {
   transition-timing-function: ease-out;
 }
 
+body.dark-mode div.modal-content {
+  background-color: #111;
+}
+
 .modal-background {
   background: none;
 }
@@ -306,6 +372,10 @@ textarea {
   color: #000;
 }
 
+body.dark-mode .text-button:hover {
+  color: #fff;
+}
+
 /* Small screens */
 @media only screen and (max-width: 720px) {
   body {
@@ -356,6 +426,7 @@ textarea {
   input, textarea {
     margin-bottom: 0.5em;
     font-size: 105%;
+    padding: 4px;
   }
   dd {
     margin-left: 0.5em;
@@ -370,8 +441,6 @@ textarea {
     width: 50%;
   }
   div.user form input {
-    font-size: 110%;
-    padding: 0.5em;
     height: min-content;
   }
   .user {

app/templates/_formhelpers.jinja2

@@ -51,7 +51,7 @@
           <input id="password" maxlength="32" minlength="4" name="password" type="password">
         </div>
         <div id="confirm-password-div">
-          <div style="font-size: 80%; margin-bottom: 1.5em;">Password must be between 8 and 64 characters</div>
+          <div style="margin-bottom: 1.5em;">Password must be between 8 and 64 characters</div>
           <label id='confirm-password-label' for="confirm-password">Confirm Password: </label>
           <input id="confirm-password" maxlength="32" minlength="4" name="confirm-password" type="password">
         </div>

app/templates/base.jinja2

@@ -9,6 +9,26 @@
   <meta name="description" content="UnderCover is an easy way to generate unique cover letters, making it simple to send personalized applications to many companies quickly.">
   <meta name="viewport" content="user-scalable=no; width=device-width">
   <script type="text/javascript">
+    document.addEventListener('DOMContentLoaded', () => {
+      const darkSystem = () => window.matchMedia('(prefers-color-scheme: dark)').matches
+      const lightStored = () => localStorage.getItem('dark-mode') === 'false'
+      const darkStored = () => localStorage.getItem('dark-mode') === 'true'
+      if (!lightStored() && (darkSystem() || darkStored())) {
+        document.body.classList.add('dark-mode')
+      }
+      const togglers = document.getElementsByClassName('theme-toggler');
+      for (let i = 0; i < togglers.length; i++) {
+        togglers[i].addEventListener('click', () => {
+          document.body.classList.toggle('dark-mode')
+          const darkMode = document.body.classList.contains('dark-mode')
+          localStorage.setItem("dark-mode", darkMode)
+        })
+      }
+        setTimeout(() => document.body.classList.add('transition'), 600)
+    })
+    function toggleTheme() {
+      document.body.classList.toggle('dark-mode')
+    }
     function closeModal() {
       document.getElementById('modal').classList.add('transparent')
       document.body.classList.remove('scroll-lock')
@@ -45,6 +65,11 @@
       font-display: swap;
       src: url('/static/fonts/Barlow-Medium.ttf');
     }
+    @font-face {
+      font-family: 'BarlowBold';
+      font-display: swap;
+      src: url('/static/fonts/Barlow-Bold.ttf');
+    }
   </style>
   {% block head %}{{ head }}{% endblock head %}
 </head>
@@ -55,7 +80,7 @@
   <div class="user logged-in">
       <p style="margin: 0 1em 0 0;">{{ username }}</p>
       <form action="/logout">
-          <input class="btn primary color-fade" style="margin: 0; padding: 0.4em;" type="submit" value="Logout">
+        <input class="btn primary color-fade" style="font-family: 'BarlowMedium'; margin-right: 1em;  margin: 0;" type="submit" value="Log Out"></input>
       </form>
   </div>
 {% else %}
@@ -68,9 +93,9 @@
     </form>
   </div>
 {% endif %}
-<a href="/" style="text-decoration: none;">
+<!--<a href="/" style="text-decoration: none;">-->
-    <h1><span class="logo left">Under</span><span class="logo right">Cover</span></h1>
+    <h1 title="Click to toggle dark mode" class="theme-toggler"><span class="logo left">Under</span><span class="logo right">Cover</span></h1>
-</a>
+<!--</a>-->
 <h2>The secret cover letter generator</h2>
 {% if error %}
   <div class="errors">

app/templates/writing.jinja2

@@ -49,13 +49,14 @@
                    onchange="window.location = '/?letter_name=' + this.options[this.value - 1].label"
                )
             }}
+            <div class="btn secondary color-fade" style="display: flex; justify-content: center; align-items: center; padding-left: 0.75em; padding-right: 0.75em; margin-left: 0.5em;">
               <a
                   href="/add_letter"
-                class="btn secondary color-fade"
+                  style="text-decoration: none; margin: 0; padding: 0;"
-                style="padding-left: 0.75em; padding-right: 0.75em; text-decoration: none; margin-left: 0.5em; text-align: center;"
               > + </a>
             </div>
           </div>
+        </div>
       {% endif %}
       {{ render_field(form.username) }}
       {{ render_field(form.company) }}

start

@@ -2,7 +2,7 @@
 
 SCRIPT_DIR="$( cd "$( dirname "$0" )" && pwd )"
 
-source ./env
+source $SCRIPT_DIR/env
 
 if ! test -f "$SCRIPT_DIR/.undercover_init_successful"; then
     if ! "$SCRIPT_DIR/init"; then