Merge pull request #41 from DaniFoldi/dark-mode

Cherry · Sep 30, 2024 · 4c1de1d · 4c1de1d
2 parents 7607f41 + bcbac21
commit 4c1de1d
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 0 deletions.
diff --git a/src/sanitizers.ts b/src/sanitizers.ts
@@ -50,5 +50,7 @@ export const sanitizers = {
 	fontSize: sanitizeNumber,
 	bgColor: sanitizeColor,
 	textColor: sanitizeColor,
+	darkBgColor: sanitizeColor,
+	darkTextColor: sanitizeColor,
 	textWrap: sanitizeBoolean,
 };
diff --git a/src/simple-svg-placeholder.ts b/src/simple-svg-placeholder.ts
@@ -12,6 +12,8 @@ export type Options = {
 	lineHeight?: number;
 	bgColor?: string;
 	textColor?: string;
+	darkBgColor?: string;
+	darkTextColor?: string;
 	dataUri?: boolean;
 	charset?: string;
 	textWrap?: boolean;
@@ -30,12 +32,27 @@ export function simpleSvgPlaceholder({
 	dy = fontSize * 0.35,
 	bgColor = '#ddd',
 	textColor = 'rgba(0,0,0,0.5)',
+	darkBgColor,
+	darkTextColor,
 	dataUri = true,
 	charset = 'utf8',
 	textWrap = false,
 	padding = '0.5em',
 }: Options = {}) {
 	let content = '';
+
+	let style = '';
+
+	if (darkBgColor || darkTextColor) {
+		style = `<style>
+      @media (prefers-color-scheme: dark) {
+        ${darkBgColor ? `rect { fill: ${darkBgColor}; }` : ''}
+        ${darkTextColor && !textWrap ? `text { fill: ${darkTextColor}; }` : ''}
+        ${darkTextColor && textWrap ? `div { color: ${darkTextColor} !important; }` : ''}
+      }
+      </style>`;
+	}
+
 	if (textWrap) {
 		content = `<foreignObject width="${width}" height="${height}">
 		<div xmlns="http://www.w3.org/1999/xhtml" style="
@@ -59,6 +76,7 @@ export function simpleSvgPlaceholder({
 	}
 
 	const str = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+	${style}
 	<rect fill="${bgColor}" width="${width}" height="${height}"/>
 	${content}
 	</svg>`;

diff --git a/src/utils.ts b/src/utils.ts
@@ -64,6 +64,8 @@ export const availableImageOptions = [
 	'fontSize',
 	'bgColor',
 	'textColor',
+	'darkBgColor',
+	'darkTextColor',
 	'textWrap',
 ] as const;
 

diff --git a/test/__snapshots__/simple-svg-placeholder.test.ts.snap b/test/__snapshots__/simple-svg-placeholder.test.ts.snap
@@ -8,6 +8,10 @@ exports[`simpleSVGPlaceholder > should return accurate svg placeholder for { dat
 
 exports[`simpleSVGPlaceholder > should return accurate svg placeholder for { dataUri: false, width: 300, height: 300, text: 'Some super long string', textColor: 'rgba(255,255,255,0.5)', bgColor: 'rgba(0,0,0,0.5)', textWrap: true } 1`] = `"<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><rect fill="rgba(0,0,0,0.5)" width="300" height="300"/><foreignObject width="300" height="300"><div xmlns="http://www.w3.org/1999/xhtml" style="align-items: center;box-sizing: border-box;color: rgba(255,255,255,0.5);display: flex;font-family: sans-serif;font-size: 60px;font-weight: bold;height: 100%;line-height: 1.2;justify-content: center;padding: 0.5em;text-align: center;width: 100%;">Some super long string</div> </foreignObject></svg>"`;
 
+exports[`simpleSVGPlaceholder > should return accurate svg placeholder for { dataUri: false, width: 1920, height: 1080, text: 'Dark mode background', darkBgColor: 'rgba(255,255,255,0.5)', bgColor: 'rgba(0,0,0,0.5)' } 1`] = `"<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"><style> @media (prefers-color-scheme: dark) { rect { fill: rgba(255,255,255,0.5); } } </style><rect fill="rgba(0,0,0,0.5)" width="1920" height="1080"/><text fill="rgba(0,0,0,0.5)" font-family="sans-serif" font-size="216" dy="75.6" font-weight="bold" x="50%" y="50%" text-anchor="middle">Dark mode background</text></svg>"`;
+
+exports[`simpleSVGPlaceholder > should return accurate svg placeholder for { dataUri: false, width: 1920, height: 1080, text: 'Dark mode text', darkTextColor: 'rgba(255,255,255,0.5)', textColor: 'rgba(0,0,0,0.5)' } 1`] = `"<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"><style> @media (prefers-color-scheme: dark) { text { fill: rgba(255,255,255,0.5); } } </style><rect fill="#ddd" width="1920" height="1080"/><text fill="rgba(0,0,0,0.5)" font-family="sans-serif" font-size="216" dy="75.6" font-weight="bold" x="50%" y="50%" text-anchor="middle">Dark mode text</text></svg>"`;
+
 exports[`simpleSVGPlaceholder > should return accurate svg placeholder for { dataUri: false, width: 1920, height: 1080, text: 'Hello World', textColor: '#fff', bgColor: '#000' } 1`] = `"<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"><rect fill="#000" width="1920" height="1080"/><text fill="#fff" font-family="sans-serif" font-size="216" dy="75.6" font-weight="bold" x="50%" y="50%" text-anchor="middle">Hello World</text></svg>"`;
 
 exports[`simpleSVGPlaceholder > should return accurate svg placeholder for { dataUri: false, width: 1920, height: 1080, text: 'Hello World', textColor: 'rgba(255,255,255,0.5)', bgColor: 'rgba(0,0,0,0.5)' } 1`] = `"<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"><rect fill="rgba(0,0,0,0.5)" width="1920" height="1080"/><text fill="rgba(255,255,255,0.5)" font-family="sans-serif" font-size="216" dy="75.6" font-weight="bold" x="50%" y="50%" text-anchor="middle">Hello World</text></svg>"`;

diff --git a/test/simple-svg-placeholder.test.ts b/test/simple-svg-placeholder.test.ts
@@ -36,6 +36,22 @@ describe('simpleSVGPlaceholder', () => {
 			textColor: 'rgba(255,255,255,0.5)',
 			bgColor: 'rgba(0,0,0,0.5)',
 		},
+		{
+			dataUri: false,
+			width: 1920,
+			height: 1080,
+			text: 'Dark mode background',
+			darkBgColor: 'rgba(255,255,255,0.5)',
+			bgColor: 'rgba(0,0,0,0.5)',
+		},
+		{
+			dataUri: false,
+			width: 1920,
+			height: 1080,
+			text: 'Dark mode text',
+			darkTextColor: 'rgba(255,255,255,0.5)',
+			textColor: 'rgba(0,0,0,0.5)',
+		},
 		{
 			dataUri: false,
 			width: 300,