Merge branch 'master' into update-stumbleupon-link

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();
 }