diff --git a/doc/source/_static/animation_timing_example.css b/doc/source/_static/animation_timing_example.css
index b10736b..e6fc966 100644
--- a/doc/source/_static/animation_timing_example.css
+++ b/doc/source/_static/animation_timing_example.css
@@ -1,12 +1,19 @@
+body {
+    --animation-box-color: lightblue;
+}
+body[data-theme=dark] {
+    --animation-box-color: darkcyan;
+}
+
 .anim-timing-example {
-    border: 2px solid black;
-    box-shadow: 2px 2px 4px #ddd;
+    border: 2px solid #333333;
+    box-shadow: 2px 2px 4px var(--janim-box-shadow);
     margin-bottom: 20px;
 }
 .anim-timing-interactive {
     padding: 14px;
     padding-top: 10px;
-    background-color: #fafafa;
+    background-color: var(--color-background-primary);
     overflow: hidden;
 }
 .anim-boxes {
@@ -15,7 +22,7 @@
 .animation-box {
     width: 100px;
     height: 30px;
-    background-color: lightblue;
+    background-color: var(--animation-box-color);
     position: relative;
     display: flex;
     justify-content: left;
@@ -33,7 +40,7 @@
     margin-right: 8px;
 }
 .anim-arg-input>span {
-    width: 50px;
+    width: 60px;
 }
 .anim-arg-input>input {
     width: 100%;
diff --git a/doc/source/_static/custom.css b/doc/source/_static/custom.css
index b0db2a3..1cc8377 100644
--- a/doc/source/_static/custom.css
+++ b/doc/source/_static/custom.css
@@ -1,3 +1,10 @@
+body {
+    --janim-box-shadow: #ddd;
+}
+body[data-theme=dark] {
+    --janim-box-shadow: #444;
+}
+
 p {
     font-size: initial;
 }
@@ -30,7 +37,7 @@ div.toctree-wrapper.compound span.caption-text {
 
 .janim-box {
     background-color: #333333;
-    box-shadow: 2px 2px 4px #ddd;
+    box-shadow: 2px 2px 4px var(--janim-box-shadow);
     margin-bottom: 20px;
 }