Increase dark mode contrast and add a manual toggle.

Per discussion on psql-www.

Reviewed by Jonathan Katz and Magnus Hagander.

diff --git a/media/css/main.css b/media/css/main.css
index 3ae2b505b401662624a9f073e37646123ebc0d0e..723366c96d2bdd719a8a6f6f25acaed6519e8551 100644 (file)
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -36,6 +36,8 @@
   --btn-download-bdr-color: #336791;
   --btn-download-decoration-bdr-color: inherit;
   --btn-download-decoration-bg-color: #e7eae8;
+  --btn-download-bg-color: #fff;
+  --btn-download-active-bg-color: #e7eae8;
   --btn-download-fg-color: #336791;
   --btn-light-bdr-color: #6c757d;
   --btn-light-bg-color: #6c757d;
@@ -43,6 +45,9 @@
   --btn-primary-bdr-color: #336791;
   --btn-primary-bg-color: #336791;
   --btn-primary-fg-color: #fff;
+  --btn-secondary-bdr-color: inherit;
+  --btn-secondary-bg-color: inherit;
+  --btn-secondary-fg-color: inherit;
   --button-input-bdr-color: #ced4da;
   --button-input-bg-color: #fff;
   --button-input-fg-color: #495057;
@@ -110,7 +115,7 @@
   --header-fg-color: #336791;
   --hr-bdr-color: #e7eae8;
   --i-fa-heart-fg-color: #b52525;
-  --i-fas-search-fg-color: #336791;
+  --i-fas-fg-color: #336791;
   --navbar-bg-color: inherit;
   --navbar-fg-color: inherit;
   --navbar-sdw-color: rgba(0,0,0,0.2);
@@ -124,6 +129,7 @@
   --pg-jumbotron-grdt-end-color: rgba(0, 0, 0, 0.5);
   --pg-jumbotron-grdt-start-color: rgba(0, 0, 0, 0.5);
   --pg-shoutbox-bg-color: #336791;
+  --pg-shoutbox-fg-color: #fff;
   --pg-sidenav-a-fg-color: #336791;
   --pg-text-blue-color: #008bb9;
   --pgcontent-a-decoration-fg-color: #193145;
@@ -154,21 +160,26 @@
 }
 
 /** DARK COLOR (overrides only) **/
-@media (prefers-color-scheme: dark) {
-  :root  {
-    --a-fg-color: #2b6da3;
+[data-theme="dark"] {
+    --a-fg-color: #699eca;
     --a-highlight-fg-color: #50b0f0;
     --alert-warning-bg-color: #bcb5b5;
     --alert-warning-bdr-color: #bcb5b5;
     --b-fg-color: #f3f5f9;
     --body-bg-color: #212121;
     --body-fg-color: #f3f5f9;
-    --btn-download-bdr-color: #2b6da3;
+    --btn-download-bdr-color: #699eca;
     --btn-download-decoration-bdr-color: #d4d4d4;
     --btn-download-decoration-bg-color: #4a4a4a;
-    --btn-download-fg-color: #2b6da3;
-    --btn-primary-bdr-color: #2b6da3;
-    --btn-primary-bg-color: #2b6da3;
+    --btn-download-bg-color: #212121;
+    --btn-download-active-bg-color: #4A4A4A;
+    --btn-download-fg-color: #699eca;
+    --btn-primary-bdr-color: #699eca;
+    --btn-primary-bg-color: #699eca;
+    --btn-primary-fg-color: #000;
+    --btn-secondary-bdr-color: #6b6b6b;
+    --btn-secondary-bg-color: #212121;
+    --btn-secondary-fg-color: #fff;
     --btn-light-bdr-color: #ccc;
     --btn-light-bg-color: #d4d4d4;
     --btn-light-fg-color: rgb(1, 1, 1);
@@ -195,19 +206,19 @@
     --doccontent-table-th-bdr-color: #6b6b6b;
     --doccontent-table-th-bg-color: #6b6b6b;
     --doccontent-table-th-fg-color: #f3f5f9;
-    --footer-a-fg-color: #2b6da3;
+    --footer-a-fg-color: #699eca;
     --h2-decoration-bg-color: #6b6b6b;
-    --header-fg-color: #2b6da3;
+    --header-fg-color: #699eca;
     --hr-bdr-color: #6b6b6b;
-    --i-fas-search-fg-color: #336791;
     --navbar-bg-color: #212121;
     --navbar-fg-color: #f3f5f9;
     --navbar-toggler-img: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(243, 245, 249, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
     --pg-bg-gray-color: #2e2e2e;
-    --pg-shoutbox-bg-color: #2b6da3;
-    --pg-sidenav-a-fg-color: #2b6da3;
+    --pg-shoutbox-bg-color: #699eca;
+    --pg-shoutbox-fg-color: #000;
+    --pg-sidenav-a-fg-color: #699eca;
     --pgcontent-a-decoration-fg-color: #50b0f0;
-    --pgcontent-doccontent-a-fg-color: #2b6da3;
+    --pgcontent-doccontent-a-fg-color: #699eca;
     --pgcontent-fa-fg-color: #6b6b6b;
     --table-td-bdr-color: #4a4a4a;
     --table-td-fg-color: #f3f5f9;
@@ -220,7 +231,6 @@
     --td-fm-unk-fg-color: #000;
     --td-fm-yes-bg-color: #89ff96;
     --td-fm-yes-fg-color: #000;
-  }
 }
 
 
@@ -696,12 +706,12 @@ ul.bold {
   padding-top: 0.2rem;
 }
 
-.pg-shout-box a {
-  color: white;
-  text-decoration: underline;
+.pg-shout-box div {
+  color: var(--pg-shoutbox-fg-color) !important;
 }
 
-.pg-shout-box a:hover {
+.pg-shout-box a {
+  color: var(--pg-shoutbox-fg-color);
   text-decoration: underline;
 }
 
@@ -1367,8 +1377,8 @@ code,
   color: var(--i-fa-heart-fg-color);
 }
 
-i.fas.fa-search {
-  color: var(--i-fas-search-fg-color);
+i.fas {
+  color: var(--i-fas-fg-color);
 }
 
 /* #CODE */
@@ -1452,6 +1462,12 @@ hr.eventseparator {
   cursor: pointer;
 }
 
+.btn-outline-secondary {
+  background-color: var(--btn-secondary-bg-color);
+  border-color: var(--btn-secondary-bdr-color);
+  color: var(--btn-secondary-fg-color) !important;
+}
+
 .btn-inline-block {
   display: inline-block;
 }
@@ -1684,6 +1700,7 @@ table.contributor-table thead tr th {
   border-color: var(--btn-download-bdr-color);
   border-width: 2px;
   color: var(--btn-download-fg-color) !important;
+  background-color: var(--btn-download-bg-color);
 }
 
 .btn-download:hover {
@@ -1691,6 +1708,10 @@ table.contributor-table thead tr th {
   border-color: var(--btn-download-decoration-bdr-color);
 }
 
+.btn-download-active {
+  background-color: var(--btn-download-active-bg-color);
+}
+
 .download-subnav {
   display: none;
 }

diff --git a/media/js/main.js b/media/js/main.js
index aec214a179de9833a06bd0341348720fab284e91..4fbc90c934c1cce78d53d6f738ccc208be485e27 100644 (file)
--- a/media/js/main.js
+++ b/media/js/main.js
@@ -79,23 +79,14 @@ function copyScript(trigger, elem) {
  * families on the Download page
  */
 function showDistros(btn, osDiv) {
-    var default_color = '#FFFFFF';
-    var active_color = '#e7eae8';
-
-    // dark mode
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        default_color = '#212121';
-        active_color = '#4A4A4A';
-    }
-
     // Disable everything
-    document.getElementById('btn-download-bsd').style.background = default_color;
+    document.getElementById('btn-download-bsd').classList.remove("btn-download-active");;
     document.getElementById('download-subnav-bsd').style.display = 'none';
-    document.getElementById('btn-download-linux').style.background = default_color;
+    document.getElementById('btn-download-linux').classList.remove("btn-download-active");
     document.getElementById('download-subnav-linux').style.display = 'none';
 
     // Enable the one we want
-    btn.style.background = active_color;
+    btn.classList.add("btn-download-active");
     document.getElementById(osDiv).style.display = 'block';
 }
 
@@ -113,3 +104,45 @@ document.querySelectorAll('button[data-confirm]').forEach((button) => {
         return false;
     });
 });
+
+
+/*
+ * Theme switching
+ */
+function theme_apply() {
+  'use strict';
+  if (theme === 'light') {
+    document.getElementById('btn-theme').innerHTML = '<i class="fas fa-moon"></i>';
+    document.documentElement.setAttribute('data-theme', 'light');
+    localStorage.setItem('theme', 'light');
+  } else {
+    document.getElementById('btn-theme').innerHTML = '<i class="fas fa-lightbulb"></i>';
+    document.documentElement.setAttribute('data-theme', 'dark');
+    localStorage.setItem('theme', 'dark');
+  }
+}
+
+theme_apply();
+document.getElementById("form-theme").style.display="block";
+
+function theme_switch() {
+  'use strict';
+  if (theme === 'light') {
+    theme = 'dark';
+  } else {
+    theme = 'light';
+  }
+  theme_apply();
+}
+
+let theme_OS = window.matchMedia('(prefers-color-scheme: light)');
+theme_OS.addEventListener('change', function (e) {
+  'use strict';
+  if (e.matches) {
+    theme = 'light';
+  } else {
+    theme = 'dark';
+  }
+  theme_apply();
+});
+

diff --git a/templates/base/base.html b/templates/base/base.html
index a2158a49c55ccbecb00ff5d0ae0118d7ade15b92..b968bc7686e7b5d87062e867e6dd636c6d4a12cc 100644 (file)
--- a/templates/base/base.html
+++ b/templates/base/base.html
@@ -19,14 +19,28 @@
   <link rel="stylesheet" href="/media/css/bootstrap-4.4.1.min.css">
   <link rel="shortcut icon" href="/favicon.ico" />
   {%if newstags %}
-    {%comment%}Default RSS links are only shown on pages that have newstags set{%endcomment%}
-    <link rel="alternate" type="application/rss+xml" title="All PostgreSQL News" href="/news.rss" />
-    {%for t in newstags%}
-      <link rel="alternate" type="application/rss+xml" title="PostgreSQL News about {{t.name}}" href="/news/{{t.urlname}}.rss" />
-    {%endfor%}
-    <link rel="alternate" type="application/rss+xml" title="PostgreSQL Events" href="/events.rss" />
+  {%comment%}Default RSS links are only shown on pages that have newstags set{%endcomment%}
+  <link rel="alternate" type="application/rss+xml" title="All PostgreSQL News" href="/news.rss" />
+  {%for t in newstags%}
+    <link rel="alternate" type="application/rss+xml" title="PostgreSQL News about {{t.name}}" href="/news/{{t.urlname}}.rss" />
+  {%endfor%}
+  <link rel="alternate" type="application/rss+xml" title="PostgreSQL Events" href="/events.rss" />
   {%endif%}
-    <link rel="stylesheet" type="text/css" href="/dyncss/base.css?{{gitrev}}">
+  <link rel="stylesheet" type="text/css" href="/dyncss/base.css?{{gitrev}}">
+
+  <script>
+    let theme = 'light';
+    if (localStorage.getItem('theme')) {
+      if (localStorage.getItem('theme') === 'dark') {
+        theme = 'dark';
+        document.documentElement.setAttribute('data-theme', 'dark');
+      }
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      theme = 'dark';
+      document.documentElement.setAttribute('data-theme', 'dark');
+    }
+  </script>
+
   {%block extrahead%}{%endblock%}
   </head>
   <body>
@@ -53,14 +67,17 @@
                 <li class="nav-item p-2"><a href="/about/donate/" title="Donate">Donate</a></li>
                 <li class="nav-item p-2"><a href="/account/" title="Your account">Your account</a></li>
               </ul>
-             <form role="search" method="get" action="/search/">
-               <div class="input-group">
-                 <input id="q" name="q" type="text" size="20" maxlength="255" accesskey="s"  class="form-control" placeholder="Search for...">
-                 <span class="input-group-btn">
-                   <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
-                 </span>
-               </div><!-- /input-group -->
-             </form>
+              <form role="search" method="get" action="/search/">
+                <div class="input-group">
+                  <input id="q" name="q" type="text" size="20" maxlength="255" accesskey="s"  class="form-control" placeholder="Search for...">
+                  <span class="input-group-btn">
+                    <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
+                  </span>
+                </div><!-- /input-group -->
+              </form>
+              <form id="form-theme" class="form-inline" style="display: none;">
+                <button id="btn-theme" class="btn btn-default ml-1" type="button" onclick="theme_switch()"></button>
+              </form>
             </div>
           </nav>
         </div>

diff --git a/templates/docs/docspage.html b/templates/docs/docspage.html
index a99caef71c9f6fd01d0e6420b9c0afbc228564f5..b9a3005f3ea8b9baa0437f2cb94889a2dcd4f2cc 100644 (file)
--- a/templates/docs/docspage.html
+++ b/templates/docs/docspage.html
@@ -22,14 +22,28 @@
   <link rel="stylesheet" href="/media/css/bootstrap-4.4.1.min.css">
   <link rel="shortcut icon" href="/favicon.ico" />
   {%if newstags %}
-    {%comment%}Default RSS links are only shown on pages that have newstags set{%endcomment%}
-    <link rel="alternate" type="application/rss+xml" title="All PostgreSQL News" href="/news.rss" />
-    {%for t in newstags%}
-      <link rel="alternate" type="application/rss+xml" title="PostgreSQL News about {{t.name}}" href="/news/{{t.urlname}}.rss" />
-    {%endfor%}
-    <link rel="alternate" type="application/rss+xml" title="PostgreSQL Events" href="/events.rss" />
+  {%comment%}Default RSS links are only shown on pages that have newstags set{%endcomment%}
+  <link rel="alternate" type="application/rss+xml" title="All PostgreSQL News" href="/news.rss" />
+  {%for t in newstags%}
+    <link rel="alternate" type="application/rss+xml" title="PostgreSQL News about {{t.name}}" href="/news/{{t.urlname}}.rss" />
+  {%endfor%}
+  <link rel="alternate" type="application/rss+xml" title="PostgreSQL Events" href="/events.rss" />
   {%endif%}
-    <link rel="stylesheet" type="text/css" href="/dyncss/base.css?{{gitrev}}">
+  <link rel="stylesheet" type="text/css" href="/dyncss/base.css?{{gitrev}}">
+
+  <script>
+    let theme = 'light';
+    if (localStorage.getItem('theme')) {
+      if (localStorage.getItem('theme') === 'dark') {
+        theme = 'dark';
+        document.documentElement.setAttribute('data-theme', 'dark');
+      }
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      theme = 'dark';
+      document.documentElement.setAttribute('data-theme', 'dark');
+    }
+  </script>
+
   {%block extrahead%}{%endblock%}
   </head>
   <body>
@@ -56,14 +70,17 @@
                 <li class="nav-item p-2"><a href="/about/donate/" title="Donate">Donate</a></li>
                 <li class="nav-item p-2"><a href="/account/" title="Your account">Your account</a></li>
               </ul>
-             <form role="search" method="get" action="/search/">
-               <div class="input-group">
-                 <input id="q" name="q" type="text" size="20" maxlength="255" accesskey="s"  class="form-control" placeholder="Search for...">
-                 <span class="input-group-btn">
-                   <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
-                 </span>
-               </div><!-- /input-group -->
-             </form>
+              <form role="search" method="get" action="/search/">
+                <div class="input-group">
+                  <input id="q" name="q" type="text" size="20" maxlength="255" accesskey="s"  class="form-control" placeholder="Search for...">
+                  <span class="input-group-btn">
+                    <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
+                  </span>
+                </div><!-- /input-group -->
+              </form>
+              <form id="form-theme" class="form-inline" style="display: none;">
+                <button id="btn-theme" class="btn btn-default ml-1" type="button" onclick="theme_switch()"></button>
+              </form>
             </div>
           </nav>
         </div>