Fix issues with dark theme (#1335)

Fixes #1318

_includes/card.html

@@ -31,6 +31,8 @@
               <img src="{{include.image}}" width="120" height="120" alt="{{include.title}}" class="panel-item">
               {% elsif include.icon %}
               <i class="{{ include.icon }} panel-icon{% if include.iconcolor %} text-{{include.iconcolor}}{% endif %}"></i>
+              {% elsif include.font %}
+              <span class="{{ include.font }} panel-item" style="font-size: 120px;" alt="{{ include.title }}"></span>
               {% endif %}
               {{include.description}}
             </p>

_includes/cardv2.html

@@ -30,6 +30,9 @@
     <p class="card-text">
       <img
         src="{{include.image}}"
+        {% if include.image-dark %}
+        data-theme-src="{{include.image-dark}}"
+        {% endif %}
         height="120"
         width="120"
         class="panel-pic"

_includes/head.html

@@ -44,5 +44,5 @@
 
   <!-- CSS stylesheets -->
   <link href="/assets/css/style.css?v=6" rel="stylesheet">
-  <link id="dark-css" href="/assets/css/dark.css?v=2" rel="stylesheet" media="(prefers-color-scheme: dark)">
+  <link id="dark-css" href="/assets/css/dark.css?v=3" rel="stylesheet" media="(prefers-color-scheme: dark)">
 </head>

_includes/scripts.html

@@ -2,7 +2,7 @@
 <script src="/assets/js/popper.min.js?v=4"></script>
 <script src="/assets/js/bootstrap.min.js?v=4"></script>
 <script src="/assets/js/sortable.min.js?v=4"></script>
-<script src="/assets/js/main.js?v=3"></script>
+<script src="/assets/js/main.js?v=4"></script>
 
 <!--
   Matomo is the leading open-source analytics platform:

_includes/sections/browser-fingerprint.html

@@ -4,8 +4,6 @@
   <strong>Your Browser sends information that makes you unique amongst millions of users and therefore easy to identify.</strong>
 </div>
 
-<img src="/assets/img/layout/browser-fingerprint.png" width="439" height="350" class="img-fluid float-right" alt="Fingerprint image" style="margin-left:20px;">
-
 <p>When you visit a web page, your browser voluntarily sends information about its configuration, such as available fonts, browser type, and add-ons. If this combination of information is unique, it may be possible to identify and track you without using cookies. EFF created a Tool called <a href="https://panopticlick.eff.org/">Panopticlick</a> to test your browser to see how unique it is.</p>
 
 <p>

_includes/sections/mobile-operating-systems.html

@@ -7,6 +7,7 @@
 {% include cardv2.html
 title="GrapheneOS"
 image="/assets/img/tools/GrapheneOS.png"
+image-dark="/assets/img/tools/GrapheneOS-dark.png"
 description='GrapheneOS (formerly known as CopperheadOS) is a free and open-source security and privacy focused mobile operating system built on top of the Android Open Source Project. It currently specifically targets devices offering strong hardware security.'
 badges="info:AOSP"
 labels="warning:contrib:This software may depend on or recommend non-free software."

_includes/sections/participate.html

@@ -26,7 +26,7 @@
 
   {% include card.html color="warning"
   title="Develop on GitHub"
-  image="/assets/img/icons/github.png"
+  font="fab fa-github"
   url="https://github.com/privacytoolsIO/privacytools.io"
   website="GitHub"
   description="The complete website source code is available on GitHub. Join our developer team!"

_includes/sections/productivity-tools.html

@@ -15,6 +15,7 @@
   include cardv2.html
   title="Etherpad"
   image="/assets/img/tools/Etherpad.png"
+  image-dark="/assets/img/tools/Etherpad-dark.png"
   description="<strong>Etherpad</strong> is a highly customizable open source online editor providing collaborative editing in real-time. <a href=https://github.com/ether/etherpad-lite/wiki/Sites-that-run-Etherpad>Here are a list of sites that run Etherpad</a>."
   website="https://etherpad.org/"
   forum="https://forum.privacytools.io/t/discussion-etherpad-productivity-tools/1538"
@@ -32,6 +33,7 @@
   include cardv2.html
   title="Write.as"
   image="/assets/img/tools/WriteAs.png"
+  image-dark="/assets/img/tools/WriteAs-dark.png"
   description="<strong>Write.as</strong> is a cross-platform, privacy-oriented blogging platform. It's anonymous by default, letting you publish without signing up. If you create an account, it doesn't require any personal information. No ads, distraction-free, and built on a sustainable business model."
   website="https://write.as/"
   forum="https://forum.privacytools.io/t/discussion-write-as-productivity-tools/1539"

_includes/sections/selfhosted-cloud.html

@@ -25,6 +25,7 @@ github="https://github.com/nextcloud"
 {% include cardv2.html
 title="Tahoe-LAFS"
 image="/assets/img/tools/Tahoe-LAFS.png"
+image-dark="/assets/img/tools/Tahoe-LAFS-dark.png"
 website="https://www.tahoe-lafs.org/"
 forum="https://forum.privacytools.io/t/discussion-tahoe-lafs/1662"
 description="Tahoe-LAFS is a Free and Open decentralized cloud storage system. It distributes your data across multiple servers. Even if some of the servers fail or are taken over by an attacker, the entire file store continues to function correctly, preserving your privacy and security."

assets/css/dark.scss

@@ -1,13 +1,15 @@
 ---
 ---
-$dark-400: #181b21;
-$dark-300: #22262e;
-$dark-200: #343a46;
-$dark-100: #464f60;
+@import '_vars';
+
+$dark-900: #181b21;
+$dark-800: #22262e;
+$dark-700: #343a46;
+$dark-600: #464f60;
 $light: #d8d8d8;
 $primary: #345e8e;
 $danger: #b63f4a;
-$secondary: $dark-100;
+$secondary: $dark-600;
 $success: #2c7f40;
 $warning: #c6a339;
 $info: #218899;
@@ -18,7 +20,7 @@ $info: #218899;
  */
 
 body {
-  background: $dark-400;
+  background: $dark-900;
   color: $light;
 }
 a {
@@ -37,12 +39,11 @@ img {
  */
 
 .alert a {
-  color: #214D97;
+  color: lighten($primary, 30%);
 }
 
 .bg-secondary, .btn-secondary, .badge-secondary { background-color: $secondary !important; }
 .btn-secondary, .card-secondary .card-header { border-color: $secondary !important; }
-.text-secondary { color: $secondary !important; }
 .alert-secondary, .btn-secondary:hover {
   color: $light;
   background-color: darken($secondary, 10%);
@@ -60,12 +61,15 @@ img {
 
 .bg-warning, .btn-warning, .badge-warning { background-color: $warning !important; }
 .btn-warning, .card-warning .card-header { border-color: $warning !important; }
+.btn-warning:hover { color: $dark-700 !important }
 .text-warning { color: $warning !important; }
-.card-warning > .text-dark { color: $dark-400 !important; }
+.card-warning > .text-dark { color: $dark-900 !important; }
+.alert-warning a { color: darken($primary, 6%); }
+.badge-warning a { color: $primary; }
 .alert-warning, .btn-warning:hover {
-  color: $light;
-  background-color: darken($warning, 10%);
-  border-color: darken($warning, 10%);
+  color: $dark-900;
+  background-color: darken($warning, 8%);
+  border-color: darken($warning, 8%);
 }
 
 .bg-info, .btn-info, .badge-info { background-color: $info !important; }
@@ -101,33 +105,33 @@ img {
 
 .dropdown-item:hover {
   color: $light;
-  background-color: $dark-300;
+  background-color: $dark-800;
 }
 
 .form-control,
 .form-control:focus {
   color: $light;
-  background: $dark-300;
-  border-color: $dark-300;
+  background: $dark-800;
+  border-color: $dark-800;
 }
 
 .form-control[readonly],
 .form-control:disabled {
-  background: $dark-300;
+  background: $dark-800;
 }
 
 .card,
 .jumbotron,
 .list-group-item {
-  background: $dark-300;
+  background: $dark-800;
 }
 
 .blockquote {
-  border-color: $dark-300;
+  border-color: $dark-800;
 }
 
 .bg-dark {
-  background-color: $dark-300 !important;
+  background-color: $dark-800 !important;
 }
 
 .dropdown-item {
@@ -135,24 +139,25 @@ img {
 }
 
 .list-group-item {
-  border-color: $dark-200;
+  border-color: $dark-700;
 }
 
 .text-dark {
   color: $light !important;
 }
 
+
 table[data-sortable].sortable-theme-bootstrap {
   color: $light;
-  background-color: $dark-300;
+  background-color: $dark-800;
 }
 table[data-sortable].sortable-theme-bootstrap th,
 table[data-sortable].sortable-theme-bootstrap td {
-  border-color: $dark-100 !important;
+  border-color: $dark-600 !important;
 }
 table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"] {
   color: $light;
-  background: $dark-200;
+  background: $dark-700;
 }
 table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted-direction="ascending"]::after, {
   border-bottom-color: $light;
@@ -168,8 +173,8 @@ table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted
 
 .nav-dropdown {
   color: $light;
-  background-color: $dark-400;
-  border-color: $dark-300;
+  background-color: $dark-900;
+  border-color: $dark-800;
 }
 
 .nav-theme-icon:before {
@@ -177,3 +182,12 @@ table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted
   font-size: 1em;
   content: "\f185";
 }
+
+.twitter { background: desaturate($twitter, 25%); }
+.mastodon { background: desaturate($mastodon, 25%); }
+.facebook { background: desaturate($facebook, 25%); }
+.stumbleupon { background: desaturate($stumbleupon, 25%); }
+.reddit { background: desaturate($reddit, 25%); }
+.linkedin { background: desaturate($linkedin, 25%); }
+.email { background: desaturate($email, 25%); }
+.diaspora { background: desaturate($diaspora, 25%); }

assets/js/main.js

@@ -66,6 +66,24 @@ function changeColorScheme() {
     document.querySelector("#dark-css").removeAttribute("media");
     localStorage.setItem("colorScheme", "dark");
   }
+  fixThemeImages();
+}
+
+
+// Fix images in dark theme
+function fixThemeImages() {
+  document.querySelectorAll('[data-theme-src]').forEach(function(image) {
+    tempSrc = image.src;
+    image.src = image.getAttribute("data-theme-src");
+    image.setAttribute("data-theme-src", tempSrc);
+  });
+}
+if (
+  (localStorage.getItem("colorScheme") === "dark") ||
+  (window.matchMedia("(prefers-color-scheme: dark)").matches ^
+    localStorage.getItem("colorScheme") === "light")
+) {
+  fixThemeImages();
 }
 
 

donate.html

@@ -294,7 +294,7 @@ permalink: /donate/
       <p>The <a href="/contact/">privacytools.io team</a> does not necessarily endorse all of the cryptocurrencies listed on this page. Please conduct your own research before purchasing any cryptocurrencies.</p>
       <h3>Thanks for your support. You are awesome!</h3>
       <p>
-      <img src="/assets/img/misc/smile.png" class="img-fluid" alt="Smile">
+      <span class="far fa-smile-beam fa-3x"></span>
       </p>
     </div>