From 4953a95e36b30fdbbaa5ed21db0da64b11590a82 Mon Sep 17 00:00:00 2001
From: Jakob Guddas <github@jguddas.de>
Date: Tue, 15 Aug 2023 19:32:25 +0200
Subject: [PATCH] feat: added fallback background for browsers without
 prefers-color-scheme support (#1493)

* feat: added fallback background to svg preview for browsers without prefers-color-scheme support

* feat: added fallback background to svg stroke-width preview for browsers without prefers-color-scheme support
---
 .../api/gh-icon/stroke-width/[...data].get.ts   | 17 +++++++++++++----
 docs/.vitepress/lib/SvgPreview/index.tsx        | 10 ++++++++--
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/docs/.vitepress/api/gh-icon/stroke-width/[...data].get.ts b/docs/.vitepress/api/gh-icon/stroke-width/[...data].get.ts
index 5618ec53a..1354b1ae4 100644
--- a/docs/.vitepress/api/gh-icon/stroke-width/[...data].get.ts
+++ b/docs/.vitepress/api/gh-icon/stroke-width/[...data].get.ts
@@ -22,10 +22,19 @@ export default eventHandler((event) => {
 
   const svg = Buffer.from(
     // We can't use jsx here, is not supported here by nitro.
-    renderToString(createElement(Icon, { strokeWidth })).replace(
-      />/,
-      '><style>@media screen and (prefers-color-scheme: dark) { svg { stroke: #fff } }</style>'
-    )
+    renderToString(createElement(Icon, { strokeWidth }))
+      .replace(/fill\="none"/, 'fill="#fff"')
+      .replace(
+        />/,
+        `><style>
+        @media screen and (prefers-color-scheme: light) {
+          svg { fill: transparent !important; }
+        }
+        @media screen and (prefers-color-scheme: dark) {
+          svg { stroke: #fff; fill: transparent !important; }
+        }
+      </style>`
+      )
   ).toString('utf8');
 
   defaultContentType(event, 'image/svg+xml')
diff --git a/docs/.vitepress/lib/SvgPreview/index.tsx b/docs/.vitepress/lib/SvgPreview/index.tsx
index 056b9ae5e..4120be93d 100644
--- a/docs/.vitepress/lib/SvgPreview/index.tsx
+++ b/docs/.vitepress/lib/SvgPreview/index.tsx
@@ -4,7 +4,7 @@ import { getPaths, assert } from './utils';
 
 const Grid = ({
   radius,
-  fill,
+  fill = '#fff',
   ...props
 }: {
   strokeWidth: number;
@@ -12,6 +12,7 @@ const Grid = ({
 } & PathProps<'stroke', 'strokeWidth'>) => (
   <g className="svg-preview-grid-group" strokeLinecap="butt" {...props}>
     <rect
+      className="svg-preview-grid-rect"
       width={24 - props.strokeWidth}
       height={24 - props.strokeWidth}
       x={props.strokeWidth / 2}
@@ -207,7 +208,12 @@ const SvgPreview = React.forwardRef<
 >(({ src, children, showGrid = false, ...props }, ref) => {
   const paths = typeof src === 'string' ? getPaths(src) : src;
 
-  const darkModeCss = `@media screen and (prefers-color-scheme: dark) {
+  const darkModeCss = `@media screen and (prefers-color-scheme: light) {
+  .svg-preview-grid-rect { fill: none }
+}
+@media screen and (prefers-color-scheme: dark) {
+  .svg-preview-grid-rect { fill: none }
+  .svg
   .svg-preview-grid-group,
   .svg-preview-radii-group,
   .svg-preview-shadow-mask-group,