diff --git a/src/main/resources/static/images/page-loading-dark.png b/src/main/resources/static/images/page-loading-dark.png
new file mode 100644
index 0000000..9b0e1fc
Binary files /dev/null and b/src/main/resources/static/images/page-loading-dark.png differ
diff --git a/src/main/resources/static/images/page-loading-light.png b/src/main/resources/static/images/page-loading-light.png
new file mode 100644
index 0000000..2e75128
Binary files /dev/null and b/src/main/resources/static/images/page-loading-light.png differ
diff --git a/src/main/resources/static/js/natural_js/natural.config.js b/src/main/resources/static/js/natural_js/natural.config.js
index fef00b1..a1d532e 100644
--- a/src/main/resources/static/js/natural_js/natural.config.js
+++ b/src/main/resources/static/js/natural_js/natural.config.js
@@ -103,7 +103,14 @@
                     beforeSend : function(request, xhr, settings) {
                         // Display page loading image.
                         if(request.options.dataType === "html" && request.options.target !== null && request.options.append === false) {
-                            request.options.target.html('<div style="text-align: center; vertical-align: middle;border: 0; border: none;width: 100%;height: 100%;"><img src="images/loading.gif" height="24"></div>');
+                            var html = '<div style="text-align: center; vertical-align: middle;border: 0; border: none;width: 100%;height: 100%;">';
+                            if(window.matchMedia && window.matchMedia("(prefers-color-scheme:dark)").matches) {
+                                html += '<img src="images/page-loading-dark.png" style="opacity: 0.6;">';
+                            } else {
+                                html += '<img src="images/page-loading-light.png" style="opacity: 0.7;">';
+                            }
+                            html += '</div>';
+                            request.options.target.html(html);
                         }
                     },
                     /**