Merge pull request #902 from reshma045/issue887-branch

Fix: Improve image visibility in dark mode by inverting images

Author: ksen0

src/content/contributor-docs/en/fes_contribution_guide.mdx

@@ -7,7 +7,8 @@ description: >
 ---
 {/* An overview of the Friendly Error System codebase and a reference for developers. */}
 
-
+import { Image } from 'astro:assets';
+import fesDiagram from '../images/fes.svg';
 
 The `core/friendly_errors` folder contains the code for the p5js’ Friendly Error Systems (FES) responsible for generating Friendly Error messages or Friendly Errors. You may have seen Friendly Error messages starting with “`🌸 p5.js says:`” in your console, supplementing default, browser-generated error messages.
 
@@ -26,7 +27,11 @@ The main functions for generating the Friendly Error messages are:
 
 Here is a diagram that outlines the location of all functions in FES and how they connect to others:
 
-![A diagram of the files used in FES and their uses](src/content/contributor-docs/images/fes.svg)
+<Image
+  src={fesDiagram}
+  alt="A diagram of the files used in FES and their uses"
+  class="invert-in-dark"
+/>
 
 Individual files contain the following main FES functions:
 

styles/global.scss

@@ -409,6 +409,10 @@ pre.code-box,
   }
 }
 
+.dark-theme .invert-in-dark {
+  filter: invert(100%);
+}
+
 // Grid that switches from 2 to 3 to 4 columns as screen gets bigger
 // Usually used with items that have a column width of 3
 .content-grid {