dry in styles.css swr-site example

.gitignore

@@ -13,3 +13,4 @@ out/
 
 tsup.config.bundled*
 tsconfig.tsbuildinfo
+pagefind/

examples/swr-site/styles.css

@@ -1,28 +1,22 @@
 @import 'nextra-theme-docs/dist/style.css' layer(nextra-base);
+
 @tailwind utilities;
 
 .dark .invert-on-dark {
   filter: invert(1) brightness(1.8);
 }
 
 body {
-  background:
-    linear-gradient(
-      to bottom,
-      rgba(255, 255, 255, 0) 0%,
-      rgb(var(--nextra-bg)) 300px
-    ),
-    fixed 0 0 / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0),
-    fixed 10px 10px / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0);
-}
+  --bg-dot-color: #d1d1d1;
+
+  .dark & {
+    --bg-dot-color: #313131;
+  }
 
-.dark body {
   background:
-    linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0) 0%,
-      rgb(var(--nextra-bg)) 300px
-    ),
-    fixed 0 0 / 20px 20px radial-gradient(#313131 1px, transparent 0),
-    fixed 10px 10px / 20px 20px radial-gradient(#313131 1px, transparent 0);
+    linear-gradient(to bottom, transparent, rgb(var(--nextra-bg)) 300px),
+    fixed 0 0 / 20px 20px
+      radial-gradient(var(--bg-dot-color) 1px, transparent 0),
+    fixed 10px 10px / 20px 20px
+      radial-gradient(var(--bg-dot-color) 1px, transparent 0);
 }