Make icons white in dark mode

assets/_defaults.scss

@@ -41,9 +41,11 @@ $toc-width: 16rem !default;
 $md-breakpoint: $menu-width + $body-min-width * 1.25 + $toc-width !default;
 $sm-breakpoint: $menu-width + $body-min-width !default;
 
-// Panel colors
+// Hint colors
 $hint-colors: (
   info: #6bf,
   warning: #fd6,
   danger: #f66
 ) !default;
+
+$icon-filter: none !default;

assets/_main.scss

@@ -94,6 +94,10 @@ ul.pagination {
   margin: 0 auto;
 }
 
+.book-icon {
+  filter: $icon-filter;
+}
+
 .book-brand {
   margin-top: 0;
 
@@ -275,17 +279,6 @@ ul.pagination {
   }
 }
 
-.book-posts {
-  min-width: $body-min-width;
-  max-width: $body-min-width * 2;
-  flex-grow: 1;
-  padding: $padding-16;
-
-  article {
-    padding-bottom: $padding-16;
-  }
-}
-
 .book-home {
   padding: $padding-16;
 }

assets/plugins/_dark.scss

@@ -6,3 +6,5 @@ $body-font-color: #e9ecef;
 
 $color-link: #84b2ff;
 $color-visited-link: #b88dff;
+
+$icon-filter: brightness(0) invert(1);

exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json

@@ -1 +1 @@
-{"Target":"book.min.eddc90f1d1267cb826e7cffc53c434e50061c4bfe41146a43670842ce6cb3bf6.css","MediaType":"text/css","Data":{"Integrity":"sha256-7dyQ8dEmfLgm58/8U8Q05QBhxL/kEUakNnCELObLO/Y="}}
+{"Target":"book.min.daeb3603c687f9ac8113081371aff99b3a3a6406ce59d6f8e0a2d0e545b7bd24.css","MediaType":"text/css","Data":{"Integrity":"sha256-2us2A8aH+ayBEwgTca/5mzo6ZAbOWdb44KLQ5UW3vSQ="}}

layouts/partials/docs/footer.html

@@ -8,7 +8,7 @@
   <div>
     {{ $date := .AuthorDate.Local.Format (default "January 2, 2006" $.Site.Params.BookDateFormat) }}
     <a class="flex align-center" href="{{ $.Site.Params.BookRepo }}/commit/{{ .Hash }}" title='{{ i18n "Last modified by" }} {{ .AuthorName }} | {{ $date }}' target="_blank">
-      <img src="{{ "svg/calendar.svg" | relURL }}" alt="Calendar" />
+      <img src="{{ "svg/calendar.svg" | relURL }}" class="book-icon" alt="Calendar" />
       <span>{{ $date }}</span>
     </a>
   </div>
@@ -18,7 +18,7 @@
   {{ if and .File .Site.Params.BookRepo .Site.Params.BookEditPath }}
   <div>
     <a class="flex align-center" href="{{ .Site.Params.BookRepo }}/{{ .Site.Params.BookEditPath }}/{{ .File.Path }}" target="_blank">
-      <img src="{{ "svg/edit.svg" | relURL }}" alt="Edit" />
+      <img src="{{ "svg/edit.svg" | relURL }}" class="book-icon" alt="Edit" />
       <span>{{ i18n "Edit this page" }}</span>
     </a>
   </div>

layouts/partials/docs/languages.html

@@ -11,7 +11,7 @@
 
   <ul>
     <li class="flex">
-      <img src="{{ "svg/translate.svg" | relURL }}" alt="Languages" />
+      <img src="{{ "svg/translate.svg" | relURL }}" class="book-icon" alt="Languages" />
       {{ $.Site.Language.LanguageName }}
     </li> 
   </ul>
@@ -20,7 +20,7 @@
     {{ range sort $langs }}
     <li class="{{ if (eq $.Site.Language .Language ) }}active{{ end }}">
       <a href="{{ .Permalink }}" class="flex">
-        <img src="{{ "svg/translate.svg" | relURL }}" alt="Languages" />
+        <img src="{{ "svg/translate.svg" | relURL }}" class="book-icon" alt="Languages" />
         {{ .Language.LanguageName }}
       </a>
     </li>

layouts/partials/docs/mobile-header.html

@@ -1,6 +1,6 @@
 <header class="flex align-center justify-between book-header">
   <label for="menu-control">
-    <img src="{{ "svg/menu.svg" | relURL }}" alt="Menu" />
+    <img src="{{ "svg/menu.svg" | relURL }}" class="book-icon" alt="Menu" />
   </label>
   <strong>{{ partial "docs/title" . }}</strong>
 </header>