docs: Fixes for dark theme variants

Make the background of some images transparent, and add some
CSS to ensure nodes, edges and arrows get proper colors on both
light and dark themes.

8 files changed, 16 insertions, 2 deletions

diff --git a/docs/reference/libtracker-sparql/images/graph-example-diagram.dot b/docs/reference/libtracker-sparql/images/graph-example-diagram.dot
index 56827d7f3..22b7b646e 100644
--- a/docs/reference/libtracker-sparql/images/graph-example-diagram.dot
+++ b/docs/reference/libtracker-sparql/images/graph-example-diagram.dot
@@ -1,5 +1,6 @@
 digraph {
   rankdir=LR;
+  bgcolor=transparent;
   fontname="sans-serif";
   compound=true;
   node [shape="box", style="rounded", border=0, fontname="sans-serif"];
diff --git a/docs/reference/libtracker-sparql/images/graph-example-diagram.svg b/docs/reference/libtracker-sparql/images/graph-example-diagram.svg
index 384bb9c57..18ae08536 100644
--- a/docs/reference/libtracker-sparql/images/graph-example-diagram.svg
+++ b/docs/reference/libtracker-sparql/images/graph-example-diagram.svg
@@ -7,7 +7,6 @@
 <svg width="335pt" height="174pt"
  viewBox="0.00 0.00 335.00 174.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 170)">
-<polygon fill="white" stroke="none" points="-4,4 -4,-170 331,-170 331,4 -4,4"/>
 <g id="clust1" class="cluster">
 <title>cluster_graph2</title>
 <g id="a_clust1"><a xlink:title="example:B">
diff --git a/docs/reference/libtracker-sparql/images/sandbox-diagram.dot b/docs/reference/libtracker-sparql/images/sandbox-diagram.dot
index d8b9c505b..328995807 100644
--- a/docs/reference/libtracker-sparql/images/sandbox-diagram.dot
+++ b/docs/reference/libtracker-sparql/images/sandbox-diagram.dot
@@ -2,6 +2,7 @@ graph {
   rankdir=LR;
   fontname="sans-serif";
   compound=true;
+  bgcolor=transparent;
   node [shape="box", style="rounded", border=0, fontname="sans-serif"];
 
   subgraph cluster_session {
diff --git a/docs/reference/libtracker-sparql/images/sandbox-diagram.svg b/docs/reference/libtracker-sparql/images/sandbox-diagram.svg
index ac643ad10..0eff83016 100644
--- a/docs/reference/libtracker-sparql/images/sandbox-diagram.svg
+++ b/docs/reference/libtracker-sparql/images/sandbox-diagram.svg
@@ -7,7 +7,6 @@
 <svg width="443pt" height="174pt"
  viewBox="0.00 0.00 443.00 174.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 170)">
-<polygon fill="white" stroke="none" points="-4,4 -4,-170 439,-170 439,4 -4,4"/>
 <g id="clust1" class="cluster">
 <title>cluster_session</title>
 <g id="a_clust1"><a xlink:title="User session">
diff --git a/docs/reference/libtracker-sparql/overview.md.in b/docs/reference/libtracker-sparql/overview.md.in
index 14e75d507..5c4599623 100644
--- a/docs/reference/libtracker-sparql/overview.md.in
+++ b/docs/reference/libtracker-sparql/overview.md.in
@@ -1,5 +1,7 @@
 Title: Overview
 
+{{ style.xml }}
+
 Tracker is a light-weight RDF [triple store](https://en.wikipedia.org/wiki/Triplestore)
 implementation, with a [SPARQL 1.1](https://en.wikipedia.org/wiki/SPARQL) interface.
 Tracker is implemented as a library, and may be used to create private databases,
diff --git a/docs/reference/libtracker-sparql/sandboxing.md.in b/docs/reference/libtracker-sparql/sandboxing.md.in
index 02fdb0613..12f6ade67 100644
--- a/docs/reference/libtracker-sparql/sandboxing.md.in
+++ b/docs/reference/libtracker-sparql/sandboxing.md.in
@@ -1,6 +1,8 @@
 Title: Sandboxing and portals
 slug: sandboxing-and-portals
 
+{{ style.xml }}
+
 There are times when it does make sense to lend advanced querying
 capabilities around your data to other processes of the same machine,
 or even widely available to any application that might want to make
diff --git a/docs/reference/libtracker-sparql/style.xml b/docs/reference/libtracker-sparql/style.xml
new file mode 100644
index 000000000..aa0294e3d
--- /dev/null
+++ b/docs/reference/libtracker-sparql/style.xml
@@ -0,0 +1,8 @@
+<style>
+  svg .cluster text { fill: var(--text-color-muted); }
+  svg .node ellipse { stroke: var(--text-color-muted) }
+  svg .node text { text-decoration: none !important; fill: var(--text-color); }
+  svg .edge text { text-decoration: none !important; fill: var(--text-color); }
+  svg .edge path { stroke: var(--text-color-muted); }
+  svg .edge polygon { fill: var(--text-color-muted); stroke: transparent; }
+</style>
diff --git a/docs/reference/libtracker-sparql/tutorial.md.in b/docs/reference/libtracker-sparql/tutorial.md.in
index 6a19663bf..aae3bec09 100644
--- a/docs/reference/libtracker-sparql/tutorial.md.in
+++ b/docs/reference/libtracker-sparql/tutorial.md.in
@@ -2,6 +2,8 @@ Title: SPARQL Tutorial
 Slug: sparql-tutorial
 ...
 
+{{ style.xml }}
+
 This document aims to introduce you to RDF and SPARQL from the ground
 up, up to a point where SPARQL queries will become familiar and approachable
 to reason about.