implement light & dark mode images

README.md

@@ -79,4 +79,36 @@ We are using [iconify](https://icon-sets.iconify.design) for icons. You can sear
           date=""
           excerpt=""
           url="" />
-```
+```
+
+### Images
+
+- Images should be placed in the `docs/.vitepress/public/img` folder.
+- To reference an image, simply use `/img/...` as the path.
+
+**Light & Dark Mode:**
+
+To include a light and dark mode version of an image, add the `.light-only` and `.dark-only` classes to the image tag:
+
+Markdown:
+
+```md
+![image-light](/img/myImage-light.png){.light-only}
+
+![image-dark](/img/myImage-dark.png){.dark-only}
+```
+
+HTML:
+
+```html
+<img class="light-only" src="/img/myImage-light.png">
+
+<img class="dark-only" src="/img/myImage-dark.png">
+```
+
+Tips:
+- Keep the size and aspect ratio of the images consistent.
+- Use similar filenames, such as with a `-light` or `-dark` suffix.
+- Don't include only one version of the image, else content will move when switching between light and dark mode.
+
+To modify this behaviour, see the "Light & Dark Mode images" section in the `docs/.vitepress/theme/style.css` file.

docs/.vitepress/theme/style.css

@@ -43,7 +43,7 @@
  *   in custom container, badges, etc.
  * -------------------------------------------------------------------------- */
 
- :root {
+:root {
   --vp-c-default-1: var(--vp-c-gray-1);
   /* #dddde3 */
   --vp-c-default-2: var(--vp-c-gray-2);
@@ -234,6 +234,9 @@
   }
 }
 
+
+
+
 /* 
  * Iconify
  * ========================================================================== */
@@ -248,6 +251,8 @@
 }
 
 
+
+
 /* 
  * Option Bar
  * ========================================================================== */
@@ -306,4 +311,19 @@
     transform: none;
     text-align: center;
   }
+}
+
+
+
+
+/* 
+ * Light & Dark Mode images
+ * ========================================================================== */
+
+:root:not(.dark) .dark-only {
+  display: none;
+}
+
+:root:is(.dark) .light-only {
+  display: none;
 }