From 1f8045f40976dfeb17b17c0d4f718a0dae03449d Mon Sep 17 00:00:00 2001
From: "Azat S." <to@azat.io>
Date: Wed, 24 Jul 2024 19:52:10 +0300
Subject: [PATCH] docs: fix image loading for different color themes

---
 readme.md | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/readme.md b/readme.md
index ae43775f..737be1b4 100644
--- a/readme.md
+++ b/readme.md
@@ -39,13 +39,37 @@ See [docs](https://perfectionist.dev).
 
 ### Alphabetical Sorting
 
-![ESLint Plugin Perfectionist alphabetical usage example](https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/examples/example-alphabetical-dark.webp#gh-dark-mode-only)
-![ESLint Plugin Perfectionist alphabetical usage example](https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/examples/example-alphabetical-light.webp#gh-light-mode-only)
+<picture>
+  <source
+    srcset="https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/examples/example-alphabetical-light.webp"
+    media="(prefers-color-scheme: light)"
+  />
+  <source
+    srcset="https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/examples/example-alphabetical-dark.webp"
+    media="(prefers-color-scheme: dark)"
+  />
+  <img
+    src="https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/examples/example-alphabetical-light.webp"
+    alt="ESLint Plugin Perfectionist alphabetical usage example"
+  />
+</picture>
 
 ### Sorting by Line Length
 
-![ESLint Plugin Perfectionist line length usage example](https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/examples/example-line-length-dark.webp#gh-dark-mode-only)
-![ESLint Plugin Perfectionist line length usage example](https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/examples/example-line-length-light.webp#gh-light-mode-only)
+<picture>
+  <source
+    srcset="https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/examples/example-line-length-light.webp"
+    media="(prefers-color-scheme: light)"
+  />
+  <source
+    srcset="https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/examples/example-line-length-dark.webp"
+    media="(prefers-color-scheme: dark)"
+  />
+  <img
+    src="https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/examples/example-line-length-light.webp"
+    alt="ESLint Plugin Perfectionist line length usage example"
+  />
+</picture>
 
 ## Installation