logo uses white text on dark mode

docs/general/contributing/branding.md

@@ -40,7 +40,10 @@ All iconography and other resources can be found in the [jellyfin-ux](https://gi
 
 When using the full version of the logo, the text should only be placed to the right of the icon.
 
-![The logo should have the text placed on the right of the icon.](/images/docs/branding-logo-yes-side.png) ![The logo should never have the text placed below the icon.](/images/docs/branding-logo-no-below.png)
+![The logo should have the text placed on the right of the icon.](/images/docs/branding-logo-yes-side.png#gh-light-mode-only)
+![The logo should have the text placed on the right of the icon.](/images/docs/branding-logo-dark-theme-yes-side.png#gh-dark-mode-only)
+![The logo should never have the text placed below the icon.](/images/docs/branding-logo-no-below.png#gh-light-mode-only)
+![The logo should never have the text placed below the icon.](/images/docs/branding-logo-dark-theme-no-below.png#gh-dark-mode-only)
 
 The design for the logo uses a gradient for the infill, and if the non-transparent logo is chosen there is an optional background color.
 

src/css/custom.css

@@ -112,6 +112,12 @@ a.pills__item:not(.pills__item--active) {
   fill: var(--ifm-font-color-base);
 }
 
+/* To toggle the visibility of an image using the path fragment */
+[data-theme='light'] img[src$='#gh-dark-mode-only'],
+[data-theme='dark'] img[src$='#gh-light-mode-only'] {
+  display: none;
+}
+
 @media (max-width: 996px) {
   .hidden--mobile {
     display: none;