Fix more contrast issues

static/css/appearance.css

@@ -1,3 +1,7 @@
+.theme label {
+    cursor: pointer;
+}
+
 .theme img {
     border: 1px solid var(--border-color);
     padding: 4px;

static/css/base.css

@@ -16,7 +16,7 @@ body {
     width: 100%;
     /* Set the fixed height of the footer here */
     height: 84px;
-    color: #AAA;
+    color: var(--text-muted);
     border-top: 1px solid var(--border-muted);
 }
 
@@ -140,7 +140,7 @@ pre {
 }
 
 .nav-pills > li > a {
-    color: #888;
+    color: var(--text-muted);
 }
 
 .jumbotron p {

static/css/bootstrap-colors.css

@@ -150,6 +150,12 @@ code {
     color: var(--text-muted);
 }
 
+
+h1 small,
 h2 small {
     color: var(--text-muted);
-}
+}
+
+.help-block {
+    color: var(--text-muted);
+}

static/css/log.css

@@ -41,7 +41,7 @@
 #log .details span.ua-body {
     font-family: "Lucida Console", Monaco, monospace;
     font-size: 11.7px;
-    color: #888;
+    color: var(--text-muted);
 }
 
 #log tr.ok {

static/css/my_checks.css

@@ -200,7 +200,7 @@
 }
 
 .add-check-note {
-    color: #888;
+    color: var(--text-muted);
     text-align: center;
     margin-top: 10px;
     font-size: 12px;

static/css/my_checks_desktop.css

@@ -7,7 +7,7 @@
 }
 
 .my-checks-name.unnamed {
-    color: #999;
+    color: var(--text-muted);
     font-style: italic;
 }
 
@@ -74,7 +74,7 @@
 }
 
 .checks-subline {
-    color: #888;
+    color: var(--text-muted);
     white-space: nowrap;
 }
 
@@ -113,7 +113,7 @@ tr:hover .copy-link {
 }
 
 .url-cell .base {
-    color: #888;
+    color: var(--text-muted);
 }
 
 .my-checks-url {
@@ -124,7 +124,7 @@ tr:hover .copy-link {
 }
 
 .checks-subline-duration {
-    color: #888;
+    color: var(--text-muted);
     white-space: nowrap;
 }
 

static/css/projects.css

@@ -7,7 +7,7 @@
 }
 
 #project-selector a:hover .project {
-    border-color: #0091EA;
+    border-color: var(--link-color);
 }
 
 #project-selector .project {
@@ -26,7 +26,7 @@
 }
 
 #project-selector .project.selected {
-    border-color: #0091EA;
+    border-color: var(--link-color);
 }
 
 #project-selector .project .status {
@@ -45,7 +45,7 @@
 }
 
 #project-selector #add-project:hover .project {
-    border-color: #0091EA;
-    color: #333;
+    border-color: var(--link-color);
+    color: var(--text-color);
 }
 

static/css/variables.css

@@ -1,4 +1,5 @@
 :root {
+    color-scheme: light;
     --alert-info-bg: #d9edf7;
     --alert-info-border: #bce8f1;
     --alert-info-color: #31708f;
@@ -62,11 +63,12 @@
     --tag-up-border: #ccc;
     --tag-up-color: #333;
     --text-color: #333;
-    --text-muted:  #666;
+    --text-muted:  #767676;
 }
 
 
 body.dark {
+    color-scheme: dark;
     --alert-info-bg: #123051;
     --alert-info-border: #163c64;
     --alert-info-color: #e0e2f5;
@@ -132,3 +134,8 @@ body.dark {
     --text-color: #e0e0e2;
     --text-muted: hsl(240, 3%, 55%);
 }
+
+
+
+
+

static/js/appearance.js

@@ -1,5 +1,5 @@
 $(function () {
     $("input[type=radio][name=theme]").change(function() {
-        document.body.classList.toggle("dark", this.value == "dark");
+        this.form.submit();
     });
 });

templates/accounts/appearance.html

@@ -34,12 +34,15 @@
 
                     <div class="row">
                         <div class="col-sm-6 theme">
-                            <img
-                                src="{% static 'img/theme-light.png' %}"
-                                alt="Light theme preview">
+                            <label for="theme-light">
+                                <img
+                                    src="{% static 'img/theme-light.png' %}"
+                                    alt="Light theme preview">
+                            </label>
 
                             <label class="radio-container">
                                 <input
+                                    id="theme-light"
                                     type="radio"
                                     name="theme"
                                     value=""
@@ -49,12 +52,15 @@
                             </label>
                         </div>
                         <div class="col-sm-6 theme">
-                            <img
-                                src="{% static 'img/theme-dark.png' %}"
-                                alt="Dark theme preview">
+                            <label for="theme-dark">
+                                <img
+                                    src="{% static 'img/theme-dark.png' %}"
+                                    alt="Dark theme preview">
+                            </label>
 
                             <label class="radio-container">
                                 <input
+                                    id="theme-dark"
                                     type="radio"
                                     name="theme"
                                     value="dark"
@@ -64,11 +70,6 @@
                             </label>
                         </div>
                     </div>
-
-
-                    <button
-                        type="submit"
-                        class="btn btn-default pull-right">Save Changes</button>
                 </form>
             </div>
             {% if status == "info" %}