Add image support for dark and light themes (#599)

* Add image support for dark and light themes

* Minor fix

* Display data-theme images only once the theme is defined

* Document light/dark image display CSS

---------

Co-authored-by: Stefan van der Walt <stefanv@berkeley.edu>

Author: jarrodmillman

assets/theme-css/styles.css

@@ -12,6 +12,29 @@ body {
   text-align: center !important;
 }
 
+/* Handle selective display depending on light/dark theme */
+
+html:not([data-theme]) {
+  .light-theme {
+    display: none;
+  }
+  .dark-theme {
+    display: none;
+  }
+}
+
+html[data-theme="dark"] {
+  .light-theme {
+    display: none;
+  }
+}
+
+html[data-theme="light"] {
+  .dark-theme {
+    display: none;
+  }
+}
+
 img {
   max-width: 100%;
 }

layouts/partials/_elements/image.html

@@ -1,8 +1,34 @@
-{{ if .data.target -}}<a href="{{ .data.target }}">{{ end -}}
+{{- if .data.src }}
+{{- if .data.target -}}<a href="{{ .data.target }}">{{ end -}}
 <img src="{{ .data.src }}" alt="{{ .data.alt }}"
   {{- with .data.align }} class="align-{{ . }}"{{ end -}}
   {{- with .data.width }} width="{{ . }}"{{ end -}}
   {{- with .data.height }} height="{{ . }}"{{ end -}}
   {{- with .data.loading }} loading="{{ . }}"{{ end -}}
 >
 {{- if .data.target }}</a>{{ end -}}
+{{- else if ( and .data.lightsrc .data.darksrc ) }}
+{{- with .data.lightsrc }}
+{{ if $.data.target -}}<a href="{{ $.data.target }}">{{ end -}}
+<img src="{{ . }}" class="light-theme" alt="{{ $.data.alt }}"
+  {{- with $.data.align }} class="align-{{ . }}"{{ end -}}
+  {{- with $.data.width }} width="{{ . }}"{{ end -}}
+  {{- with $.data.height }} height="{{ . }}"{{ end -}}
+  {{- with $.data.loading }} loading="{{ . }}"{{ end -}}
+>
+{{- if $.data.target }}</a>{{ end -}}
+{{- end }}
+{{- with .data.darksrc }}
+{{ if $.data.target -}}<a href="{{ $.data.target }}">{{ end -}}
+<img src="{{ . }}" class="dark-theme" alt="{{ $.data.alt }}"
+  {{- with $.data.align }} class="align-{{ . }}"{{ end -}}
+  {{- with $.data.width }} width="{{ . }}"{{ end -}}
+  {{- with $.data.height }} height="{{ . }}"{{ end -}}
+  {{- with $.data.loading }} loading="{{ . }}"{{ end -}}
+>
+{{- if $.data.target }}</a>{{ end -}}
+{{- end }}
+{{ end }}
+
+{{ define "partials/_elements/inlineimage.html" }}
+{{ end }}