sponsors: handle light/dark mode

Author: justinmk

images/sponsors/coderabbit-logo-dark.svg

@@ -81,7 +81,16 @@ <h3>Drop-in Vim</h3>
       <h2 id="sponsors-header">Sponsors</h2>
       <div id="sponsors" class="sponsors-main">
         <p>
-          <a href="https://coderabbit.ai/"><img width="300" class="img-fluid" src="images/sponsors/coderabbit-logo.svg" title="Visit https://coderabbit.ai to learn more." alt="Visit https://coderabbit.ai to learn more."/></a>
+          <a href="https://coderabbit.ai/">
+            <picture title="Visit https://coderabbit.ai to learn more." alt="Visit https://coderabbit.ai to learn more.">
+              <!-- light mode: -->
+              <source srcset="images/sponsors/coderabbit-logo.svg" media="(prefers-color-scheme: light)"/>
+              <!-- dark mode: -->
+              <source srcset="images/sponsors/coderabbit-logo-dark.svg"  media="(prefers-color-scheme: dark)"/>
+              <!-- no color preference: -->
+              <img width="300" class="img-fluid" src="images/sponsors/coderabbit-logo.svg">
+            </picture>
+          </a>
         </p>
         <p>
           <a href="https://www.warp.dev/?utm_source=github&utm_medium=referral&utm_campaign=neovim_20231211"><img width="300" class="img-fluid" src="images/sponsors/warp-300px.png" title="Visit warp.dev to learn more." alt="Visit warp.dev to learn more."/>