diff --git a/docs/images/arsys_logo.svg b/docs/images/arsys_logo.svg
index 64833550..6d3872ec 100644
--- a/docs/images/arsys_logo.svg
+++ b/docs/images/arsys_logo.svg
@@ -4,6 +4,12 @@
 	 width="315.134px" height="88.15px" viewBox="140.08 380.418 315.134 88.15" enable-background="new 140.08 380.418 315.134 88.15"
 	 xml:space="preserve">
 <title>logos</title>
+<style type="text/css">
+  path { fill: #2c3e50; }
+  @media (prefers-color-scheme: dark) {
+    path { fill: #ffffff; }
+  }
+</style>
 <path d="M379.988,380.625c-3.113-0.493-6.072,1.525-6.746,4.604l-14.486,47.623l-15.873-52.346h-16.51l23.811,64.568
 	c1.842,3.318,1.076,7.476-1.824,9.922c-2.383,1.864-4.684,1.864-9.645,1.825h-1.191v11.747h3.969c6.867,0,11.906-0.278,14.764-2.699
 	c3.424-2.924,5.967-6.744,7.342-11.032l26.43-74.172h-10.039V380.625z M403.798,386.617c-4.648,3.81-7.283,9.549-7.143,15.557
diff --git a/docs/static/extra.css b/docs/static/extra.css
index 64c6f89c..bc3af818 100644
--- a/docs/static/extra.css
+++ b/docs/static/extra.css
@@ -49,4 +49,10 @@ reset max-width with the following CSS: */
   filter: brightness(1.2);
 }
 
+/* Invert Arsys logo in dark mode */
+[data-md-color-scheme="slate"] img[src*="arsys_logo.svg"] {
+  filter: invert(1) brightness(2);
+}
+
+