diff --git a/quartz/static/icon-back.png b/quartz/static/icon-back.png
new file mode 100644
index 000000000..b6656a7a8
Binary files /dev/null and b/quartz/static/icon-back.png differ
diff --git a/quartz/static/icon.png b/quartz/static/icon.png
index b6656a7a8..f087279c0 100644
Binary files a/quartz/static/icon.png and b/quartz/static/icon.png differ
diff --git a/quartz/static/moon-light.png b/quartz/static/moon-light.png
new file mode 100644
index 000000000..b7845c141
Binary files /dev/null and b/quartz/static/moon-light.png differ
diff --git a/quartz/static/og-image-back.png b/quartz/static/og-image-back.png
new file mode 100644
index 000000000..f1321455b
Binary files /dev/null and b/quartz/static/og-image-back.png differ
diff --git a/quartz/static/og-image.png b/quartz/static/og-image.png
index f1321455b..6f8d803a1 100644
Binary files a/quartz/static/og-image.png and b/quartz/static/og-image.png differ
diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
index b0c09dcb9..9c88718c8 100644
--- a/quartz/styles/custom.scss
+++ b/quartz/styles/custom.scss
@@ -1,3 +1,23 @@
 @use "./base.scss";
 
 // put your custom CSS here!
+$backg: "/static/moon-light.png";
+
+[saved-theme="dark"] body::before {
+  filter: invert(100%);
+  opacity: 0.05;
+}
+
+body::before {
+  filter: invert(0%);
+  content: "";
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  background-image: url("/static/moon-light.png");
+  background-size: 125%;
+  opacity: 0.1;
+  background-repeat: no-repeat;
+}