update preview pictures

Now includes light and dark theme variants of screenshots.

The README will only render (on github) the relevant picture based on the user's preference. See [github docs](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to)

Updated mkdocs build similarly, but uses CSS instead of raw HTML.

README.md

@@ -7,15 +7,7 @@
 [io-doc]: https://cpp-linter.github.io/cpp-linter-action/inputs-outputs
 [recipes-doc]: https://cpp-linter.github.io/cpp-linter-action/examples
 
-[format-annotations-preview]: https://raw.githubusercontent.com/cpp-linter/cpp-linter-action/main/docs/images/annotations-clang-format.png
-[tidy-annotations-preview]: https://raw.githubusercontent.com/cpp-linter/cpp-linter-action/main/docs/images/annotations-clang-tidy.png
-[thread-comment-preview]: https://raw.githubusercontent.com/cpp-linter/cpp-linter-action/main/docs/images/comment.png
-[step-summary-preview]: https://raw.githubusercontent.com/cpp-linter/cpp-linter-action/main/docs/images/step-summary.png
-[tidy-review-preview]: https://raw.githubusercontent.com/cpp-linter/cpp-linter-action/main/docs/images/tidy-review.png
-[format-review-preview]: https://raw.githubusercontent.com/cpp-linter/cpp-linter-action/main/docs/images/format-review.png
-[format-suggestion-preview]: https://raw.githubusercontent.com/cpp-linter/cpp-linter-action/main/docs/images/format-suggestion.png
-
-<!--README-start-->
+<!-- start -->
 
 # C/C++ Linter Action <sub><sup>| clang-format & clang-tidy</sup></sub>
 
@@ -71,49 +63,78 @@ For all explanations of our available input parameters and output variables, see
 
 See also our [example recipes][recipes-doc].
 
+<!-- stop -->
 ## Example
 
 ### Annotations
 
-Using [`file-annotations`][file-annotations]:
+Using [`--file-annotations`][file-annotations]:
 
 #### clang-format annotations
 
-![clang-format annotations][format-annotations-preview]
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/images/format-annotation-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="docs/images/format-annotation-light.png">
+  <img alt="format-annotation-preview." src="docs/images/format-review-light.png">
+</picture>
 
 #### clang-tidy annotations
 
-![clang-tidy annotations][tidy-annotations-preview]
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/images/tidy-annotation-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="docs/images/tidy-annotation-light.png">
+  <img alt="tidy-annotation-preview." src="docs/images/tidy-review-light.png">
+</picture>
 
 ### Thread Comment
 
-Using [`thread-comments`][thread-comments]:
+Using [`--thread-comments`][thread-comments]:
 
-![sample thread-comment][thread-comment-preview]
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/images/thread-comment-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="docs/images/thread-comment-light.png">
+  <img alt="thread-comment-preview." src="docs/images/thread-comment-light.png">
+</picture>
 
 ### Step Summary
 
-Using [`step-summary`][step-summary]:
+Using [`--step-summary`][step-summary]:
 
-![step summary][step-summary-preview]
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/images/step-summary-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="docs/images/step-summary-light.png">
+  <img alt="step-summary-preview." src="docs/images/step-summary-light.png">
+</picture>
 
 ### Pull Request Review
 
-#### Only clang-tidy
-
-Using [`tidy-review`][tidy-review]:
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/images/review-summary-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="docs/images/review-summary-light.png">
+  <img alt="review-summary-preview." src="docs/images/review-summary-light.png">
+</picture>
 
-![sample tidy-review][tidy-review-preview]
+#### clang-tidy suggestion
 
-#### Only clang-format
+Using [`--tidy-review`][tidy-review]:
 
-Using [`format-review`][format-review]:
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/images/tidy-review-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="docs/images/tidy-review-light.png">
+  <img alt="tidy-review-preview." src="docs/images/tidy-review-light.png">
+</picture>
 
-![sample format-review][format-review-preview]
+#### clang-format suggestion
 
-![sample format-suggestion][format-suggestion-preview]
+Using [`--format-review`][format-review]:
 
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/images/format-review-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="docs/images/format-review-light.png">
+  <img alt="format-review-preview." src="docs/images/format-review-light.png">
+</picture>
 
+<!-- resume -->
 ## Add C/C++ Linter Action badge in README
 
 You can show C/C++ Linter Action status with a badge in your repository README

docs/index.md

@@ -7,16 +7,67 @@
 [io-doc]: inputs-outputs.md
 [recipes-doc]: examples/index.md
 
-[format-annotations-preview]: images/annotations-clang-format.png
-[tidy-annotations-preview]: images/annotations-clang-tidy.png
-[thread-comment-preview]: images/comment.png
-[step-summary-preview]: images/step-summary.png
-[tidy-review-preview]: images/tidy-review.png
-[format-review-preview]: images/format-review.png
-[format-suggestion-preview]: images/format-suggestion.png
+{%
+    include "../README.md"
+    start="<!-- start -->"
+    end="<!-- stop -->"
+%}
+
+## Example
+
+### Annotations
+
+Using [`--file-annotations`][file-annotations]:
+
+#### clang-format annotations
+
+![format-annotation-dark](images/format-annotation-dark.png){ .dark-only }
+![format-annotation-light](images/format-annotation-light.png){ .light-only }
+
+#### clang-tidy annotations
+
+![tidy-annotation-dark](images/tidy-annotation-dark.png){ .dark-only }
+![tidy-annotation-light](images/tidy-annotation-light.png){ .light-only }
+
+### Thread Comment
+
+Using [`--thread-comments`][thread-comments]:
+
+![thread-comment-dark](images/thread-comment-dark.png){ .dark-only }
+![thread-comment-light](images/thread-comment-light.png){ .light-only }
+
+??? example "Expanded"
+
+    ![thread-comment-expanded-dark](images/thread-comment-expanded-dark.png){ .dark-only }
+    ![thread-comment-expanded-light](images/thread-comment-expanded-light.png){ .light-only }
+
+### Step Summary
+
+Using [`--step-summary`][step-summary]:
+
+![step-summary-dark](images/step-summary-dark.png){ .dark-only }
+![step-summary-light](images/step-summary-light.png){ .light-only }
+
+### Pull Request Review
+
+![review-summary-dark](images/review-summary-dark.png){ .dark-only }
+![review-summary-light](images/review-summary-light.png){ .light-only }
+
+#### clang-tidy suggestion
+
+Using [`--tidy-review`][tidy-review]:
+
+![tidy-review-dark](images/tidy-review-dark.png){ .dark-only }
+![tidy-review-light](images/tidy-review-light.png){ .light-only }
+
+#### clang-format suggestion
+
+Using [`--format-review`][format-review]:
+
+![format-review-dark](images/format-review-dark.png){ .dark-only }
+![format-review-light](images/format-review-light.png){ .light-only }
 
 {%
-   include-markdown "../README.md"
-   start="<!--README-start-->"
-   end="<!--README-end-->"
+    include "../README.md"
+    start="<!-- resume -->"
 %}

docs/stylesheets/extra.css

@@ -2,6 +2,15 @@ th {
     background-color: var(--md-default-fg-color--lightest);
 }
 
+[data-md-color-scheme="default"] img.dark-only {
+    display: none;
+
+}
+
+[data-md-color-scheme="slate"] img.light-only {
+    display: none;
+}
+
 .md-header,
 .md-nav--primary .md-nav__title[for="__drawer"] {
     background-color: #4051b5;

mkdocs.yml

@@ -84,6 +84,7 @@ markdown_extensions:
   - pymdownx.highlight:
       linenums_style: pymdownx-inline
   - pymdownx.inlinehilite
+  - pymdownx.details
   - pymdownx.snippets:
       check_paths: true
   - attr_list