Revert "Increase dark mode contrast and add a manual toggle."

This reverts commit 92b55bad9119a659acf7e0fe505e3b69c8ac6a49.

diff --git a/media/css/main.css b/media/css/main.css
index 723366c96d2bdd719a8a6f6f25acaed6519e8551..3ae2b505b401662624a9f073e37646123ebc0d0e 100644 (file)
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -36,8 +36,6 @@
   --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;
@@ -45,9 +43,6 @@
   --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;
@@ -115,7 +110,7 @@
   --header-fg-color: #336791;
   --hr-bdr-color: #e7eae8;
   --i-fa-heart-fg-color: #b52525;
-  --i-fas-fg-color: #336791;
+  --i-fas-search-fg-color: #336791;
   --navbar-bg-color: inherit;
   --navbar-fg-color: inherit;
   --navbar-sdw-color: rgba(0,0,0,0.2);
@@ -129,7 +124,6 @@
   --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;
@@ -160,26 +154,21 @@
 }
 
 /** DARK COLOR (overrides only) **/
-[data-theme="dark"] {
-    --a-fg-color: #699eca;
+@media (prefers-color-scheme: dark) {
+  :root  {
+    --a-fg-color: #2b6da3;
     --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: #699eca;
+    --btn-download-bdr-color: #2b6da3;
     --btn-download-decoration-bdr-color: #d4d4d4;
     --btn-download-decoration-bg-color: #4a4a4a;
-    --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-download-fg-color: #2b6da3;
+    --btn-primary-bdr-color: #2b6da3;
+    --btn-primary-bg-color: #2b6da3;
     --btn-light-bdr-color: #ccc;
     --btn-light-bg-color: #d4d4d4;
     --btn-light-fg-color: rgb(1, 1, 1);
@@ -206,19 +195,19 @@
     --doccontent-table-th-bdr-color: #6b6b6b;
     --doccontent-table-th-bg-color: #6b6b6b;
     --doccontent-table-th-fg-color: #f3f5f9;
-    --footer-a-fg-color: #699eca;
+    --footer-a-fg-color: #2b6da3;
     --h2-decoration-bg-color: #6b6b6b;
-    --header-fg-color: #699eca;
+    --header-fg-color: #2b6da3;
     --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: #699eca;
-    --pg-shoutbox-fg-color: #000;
-    --pg-sidenav-a-fg-color: #699eca;
+    --pg-shoutbox-bg-color: #2b6da3;
+    --pg-sidenav-a-fg-color: #2b6da3;
     --pgcontent-a-decoration-fg-color: #50b0f0;
-    --pgcontent-doccontent-a-fg-color: #699eca;
+    --pgcontent-doccontent-a-fg-color: #2b6da3;
     --pgcontent-fa-fg-color: #6b6b6b;
     --table-td-bdr-color: #4a4a4a;
     --table-td-fg-color: #f3f5f9;
@@ -231,6 +220,7 @@
     --td-fm-unk-fg-color: #000;
     --td-fm-yes-bg-color: #89ff96;
     --td-fm-yes-fg-color: #000;
+  }
 }
 
 
@@ -706,12 +696,12 @@ ul.bold {
   padding-top: 0.2rem;
 }
 
-.pg-shout-box div {
-  color: var(--pg-shoutbox-fg-color) !important;
+.pg-shout-box a {
+  color: white;
+  text-decoration: underline;
 }
 
-.pg-shout-box a {
-  color: var(--pg-shoutbox-fg-color);
+.pg-shout-box a:hover {
   text-decoration: underline;
 }
 
@@ -1377,8 +1367,8 @@ code,
   color: var(--i-fa-heart-fg-color);
 }
 
-i.fas {
-  color: var(--i-fas-fg-color);
+i.fas.fa-search {
+  color: var(--i-fas-search-fg-color);
 }
 
 /* #CODE */
@@ -1462,12 +1452,6 @@ 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;
 }
@@ -1700,7 +1684,6 @@ 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 {
@@ -1708,10 +1691,6 @@ 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 4fbc90c934c1cce78d53d6f738ccc208be485e27..aec214a179de9833a06bd0341348720fab284e91 100644 (file)
--- a/media/js/main.js
+++ b/media/js/main.js
@@ -79,14 +79,23 @@ 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').classList.remove("btn-download-active");;
+    document.getElementById('btn-download-bsd').style.background = default_color;
     document.getElementById('download-subnav-bsd').style.display = 'none';
-    document.getElementById('btn-download-linux').classList.remove("btn-download-active");
+    document.getElementById('btn-download-linux').style.background = default_color;
     document.getElementById('download-subnav-linux').style.display = 'none';
 
     // Enable the one we want
-    btn.classList.add("btn-download-active");
+    btn.style.background = active_color;
     document.getElementById(osDiv).style.display = 'block';
 }
 
@@ -104,45 +113,3 @@ 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 b968bc7686e7b5d87062e867e6dd636c6d4a12cc..a2158a49c55ccbecb00ff5d0ae0118d7ade15b92 100644 (file)
--- a/templates/base/base.html
+++ b/templates/base/base.html
@@ -19,28 +19,14 @@
   <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}}">
-
-  <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>
-
+    <link rel="stylesheet" type="text/css" href="/dyncss/base.css?{{gitrev}}">
   {%block extrahead%}{%endblock%}
   </head>
   <body>
@@ -67,17 +53,14 @@
                 <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 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>
+             <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>
             </div>
           </nav>
         </div>

diff --git a/templates/docs/docspage.html b/templates/docs/docspage.html
index b9a3005f3ea8b9baa0437f2cb94889a2dcd4f2cc..a99caef71c9f6fd01d0e6420b9c0afbc228564f5 100644 (file)
--- a/templates/docs/docspage.html
+++ b/templates/docs/docspage.html
@@ -22,28 +22,14 @@
   <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}}">
-
-  <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>
-
+    <link rel="stylesheet" type="text/css" href="/dyncss/base.css?{{gitrev}}">
   {%block extrahead%}{%endblock%}
   </head>
   <body>
@@ -70,17 +56,14 @@
                 <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 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>
+             <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>
             </div>
           </nav>
         </div>