Manual fixes for snippets so that they pley nice with dark mode

src/docs/styles/_snippets.scss

@@ -0,0 +1,85 @@
+.page-container.dark {
+  [data-scope="easing-variables"] {
+    .easing-variables {
+      background: #ddd;
+      color: black;
+    }
+  }
+  [data-scope="constant-width-to-height-ratio"] {
+    .constant-width-to-height-ratio {
+      background: #ddd;
+    }
+  }
+  [data-scope="display-table-centering"] {
+    .container {
+      border-color: #ddd;
+    }
+  }
+  [data-scope="ghost-trick"] {
+    .ghosting {
+      background: #a307c2;
+    }
+  }
+  [data-scope="transform-centering"] {
+    .parent {
+      border-color: #ddd;
+    }
+  }
+  [data-scope="truncate-text-multiline"] {
+    .truncate-text-multiline::after {
+      background: linear-gradient(to right, rgba(255, 255, 255, 0), #2a314c 50%);
+    }
+  }
+  [data-scope="circle"] {
+    .circle {
+      background: #ddd;
+    }
+  }
+  [data-scope="etched-text"] {
+    .etched-text {
+      text-shadow: 0 2px black;
+      color: #424d76;
+    }
+  }
+  [data-scope="focus-within"] {
+    label {
+      color: #fff;
+    }
+  }
+  [data-scope="overflow-scroll-gradient"] {
+    .overflow-scroll-gradient__scroller {
+      background: #2a314c;
+    }
+    .overflow-scroll-gradient::after {
+      background: linear-gradient(rgba(0, 0, 0, 0.001), #2a314c);
+    }
+  }
+  [data-scope="pretty-text-underline"] {
+    .pretty-text-underline {
+      text-shadow: 1px 1px #2a314c, -1px 1px #2a314c, -1px -1px #2a314c, 1px -1px #2a314c;
+    }
+  }
+  [data-scope="reset-all-styles"] {
+    .reset-all-styles {
+      color: white;
+    }
+  }
+  [data-scope="shape-separator"] {
+    .shape-separator {
+      background: #ddd;
+      &::after {
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%232a314c'/%3E%3C/svg%3E")
+      }
+    }
+  }
+  [data-scope="triangle"] {
+    .triangle {
+      border-top: 20px solid #ddd;
+    }
+  }
+  [data-scope="zebra-striped-list"] {
+    li:nth-child(odd) {
+      background-color: #424d76; 
+    }
+  }
+}

src/docs/styles/index.scss

@@ -12,3 +12,4 @@ $layout-large-breakpoint: 900px;
 @import 'card';
 @import 'code';
 @import 'toast';
+@import 'snippets';