maple-sanket.bsky.social / overreacted
forked from danabra.mov/overreacted
my blog https://overreacted.io
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add automatic dark mode for local SVG images (#865)

* Add Illustration component with automatic dark mode support

- Create reusable Illustration component for blog posts
- Automatically switches between light and dark SVG versions using HTML5 picture element
- Component expects .dark.svg suffix for dark mode variants
- Made globally available to all MDX posts

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Add automatic dark mode for local SVG images

Local SVG images in blog posts now automatically get dark mode treatment using Excalidraw's proven filter (invert + hue-rotate). This applies only to relative image paths, leaving external SVGs untouched.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

authored by

dan
Claude and committed by
GitHub 6f996e76 306aa5ac

+20 -2
+18 -2
app/[slug]/page.tsx
··· 81 81 components={{ 82 82 a: Link, 83 83 img: ({ src, ...rest }) => { 84 + let finalSrc = src; 85 + let finalStyle = rest.style; 86 + 84 87 if (src && !/^https?:\/\//.test(src)) { 85 88 // https://github.com/gaearon/overreacted.io/issues/827 86 - src = `/${slug}/${src}`; 89 + finalSrc = `/${slug}/${src}`; 90 + if (src.endsWith('.svg')) { 91 + finalStyle = { 92 + ...rest.style, 93 + filter: 'var(--svg-filter)' 94 + }; 95 + } 87 96 } 88 - return <img src={src} {...rest} />; 97 + 98 + return ( 99 + <img 100 + src={finalSrc} 101 + {...rest} 102 + style={finalStyle} 103 + /> 104 + ); 89 105 }, 90 106 ...postComponents, 91 107 }}
+2
app/global.css
··· 12 12 --inlineCode-text: #1a1a1a; 13 13 --pink: lab(63 59.32 -1.47); 14 14 --purple: lab(33 42.09 -43.19); 15 + --svg-filter: none; 15 16 } 16 17 @media (prefers-color-scheme: dark) { 17 18 :root { ··· 24 25 --inlineCode-text: #e6e6e6; 25 26 --pink: lab(81 32.36 -7.02); 26 27 --purple: lab(78 19.97 -36.75); 28 + --svg-filter: invert(93%) hue-rotate(180deg); 27 29 } 28 30 } 29 31 @property --myColor1 {