diff --git a/ib002/03-time-complexity/extend.md b/ib002/03-time-complexity/extend.md
index c77949a..c38c37b 100644
--- a/ib002/03-time-complexity/extend.md
+++ b/ib002/03-time-complexity/extend.md
@@ -83,7 +83,7 @@ As we could observe in the example above, `extend` iterates over all of the elem
 
 Consider constructing of this list:
 
-![Rendered construction of the list](/files/ib002/extend/construction.svg)
+![Rendered construction of the list](/files/ib002/extend/construction_light.svg#gh-light-mode-only)![Rendered construction of the list](/files/ib002/extend/construction_dark.svg#gh-dark-mode-only)
 
 Let us assume that you extend the result with the list that you get from the recursive call.
 
diff --git a/ib002/10-graphs/bfs-tree.md b/ib002/10-graphs/bfs-tree.md
index d2e7aa5..cd11e75 100644
--- a/ib002/10-graphs/bfs-tree.md
+++ b/ib002/10-graphs/bfs-tree.md
@@ -18,11 +18,11 @@ As we have talked on the seminar, if we construct from some vertex $u$ BFS tree
 
 Consider the following graph:
 
-![BFS graph](/files/ib002/bfs-tree/bfs_graph.svg)
+![BFS graph](/files/ib002/bfs-tree/bfs_graph_light.svg#gh-light-mode-only)![BFS graph](/files/ib002/bfs-tree/bfs_graph_dark.svg#gh-dark-mode-only)
 
 We run BFS from the vertex $a$ and obtain the following BFS tree:
 
-![BFS tree](/files/ib002/bfs-tree/bfs_tree.svg)
+![BFS tree](/files/ib002/bfs-tree/bfs_tree_light.svg#gh-light-mode-only)![BFS tree](/files/ib002/bfs-tree/bfs_tree_dark.svg#gh-dark-mode-only)
 
 Let's consider pair of vertices $e$ and $h$. For them we can safely lay, from the BFS tree, following properties:
 
@@ -37,7 +37,7 @@ Let's keep the same graph, but break the lower bound, i.e. I have gotten a lower
 
 Now the more important question, is there a shorter path in that graph? The answer is no, there's no shorter path than the one with length $2$. So what can we do about it? We'll add an edge to have a shorter path. Now we have gotten a lower bound of $2$, which means the only shorter path we can construct has $1$ edge and that is ‹$e, h$› (no intermediary vertices). Let's do this!
 
-![BFS tree](/files/ib002/bfs-tree/bfs_graph_with_additional_edge.svg)
+![BFS tree](/files/ib002/bfs-tree/bfs_graph_with_additional_edge_light.svg#gh-light-mode-only)![BFS tree](/files/ib002/bfs-tree/bfs_graph_with_additional_edge_dark.svg#gh-dark-mode-only)
 
 Okay, so we have a graph that breaks the rule we have laid. However, we need to run BFS to obtain the new BFS tree, since we have changed the graph.
 
@@ -49,7 +49,7 @@ Do we need to run BFS after **every** change?
 
 :::
 
-![BFS tree](/files/ib002/bfs-tree/bfs_tree_with_additional_edge.svg)
+![BFS tree](/files/ib002/bfs-tree/bfs_tree_with_additional_edge_light.svg#gh-light-mode-only)![BFS tree](/files/ib002/bfs-tree/bfs_tree_with_additional_edge_dark.svg#gh-dark-mode-only)
 
 Oops, we have gotten a new BFS tree, that has a height difference of 1.
 
diff --git a/regenerate-dots.sh b/regenerate-dots.sh
index 166ac7e..efe71b9 100644
--- a/regenerate-dots.sh
+++ b/regenerate-dots.sh
@@ -3,6 +3,11 @@
 FONT="Iosevka,'Iosevka Term','Cascadia Code','JetBrains Mono','Fira Code',monospace"
 
 for pic in $(find ./static/files -name '*.dot' -print); do
-    SVG_NAME=".$(echo $pic | cut -d'.' -f2).svg"
-    dot $pic -Tsvg -Gfontname="$FONT" -Nfontname="$FONT" -Efontname="$FONT" > $SVG_NAME
+    SVG_NAME=".$(echo $pic | cut -d'.' -f2)"
+
+    # light mode
+    dot $pic -Tsvg -Gfontname="$FONT" -Nfontname="$FONT" -Efontname="$FONT" > ${SVG_NAME}_light.svg
+
+    # dark mode
+    dot $pic -Tsvg -Gfontname="$FONT" -Nfontname="$FONT" -Efontname="$FONT" -Gbgcolor="none" -Gcolor="white" -Gfontcolor="white" -Nfillcolor="none" -Ncolor="white" -Nfontcolor="white" -Efillcolor="none" -Ecolor="white" -Efontcolor="white" > ${SVG_NAME}_dark.svg
 done;
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index b19f6ab..06ee693 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -31,4 +31,9 @@
 
 pre, code, kbd, var, tt {
   font-family: Iosevka, 'Iosevka Term', 'Cascadia Code', 'JetBrains Mono', 'Fira Code', monospace;
-}
\ No newline at end of file
+}
+
+[data-theme='light'] img[src$='#gh-dark-mode-only'],
+[data-theme='dark'] img[src$='#gh-light-mode-only'] {
+  display: none;
+}