tree 7941babf58d496c1eb8fe0db41f69859af8209a5
parent ef81a945b0db4b771183e4a9042f5cda28258f14
author Scott Todd <scotttodd@google.com> 1653346410 -0700
committer GitHub <noreply@github.com> 1653346410 -0700
gpgsig -----BEGIN PGP SIGNATURE-----
 
 wsBcBAABCAAQBQJijBBqCRBK7hj4Ov3rIwAABZQIAB8bzQ31a1w80bYMagrlsFFw
 br5x9xxUS9k4nZQqi23X6dVLMYF7hkpLVp9ztIwkxTWgwSRnPzXeOul+JUHFoUkd
 M6HjucRYOli1uhtyhWvSR0x9S3jpTEXuq8fNrhbKu2z1P/RtiQeuK0Uu0+uwWlKJ
 YiiDlZLVfntBnYUQIbYVFgo47lrlt72awK20KO8nNKDEN0odU63L4j/eYNalIGak
 7pftnbe/PYqDf3MYrytQaSAv0uuighYCiBvSsmtlNz6fuUC+zkKButMe42BgbRN0
 tdcpZIQDx75uP+VDxm8rRz7lr6QYHoc0zXLm+x4KgBDG2UiGMhYqxFj8BYd/mdM=
 =FQ30
 -----END PGP SIGNATURE-----
 

Add dark mode architecture diagram to README and website. (#9192)

GitHub and mkdocs-material both now support including light and dark mode versions of images. We can use this to show a more natural project architecture diagram based on the current website theme, fixing https://github.com/google/iree/issues/7140.

---

Live Previews (until this PR gets merged):

| | Before (always light mode) | After (with light and dark) |
| - | - | - |
| website | https://google.github.io/iree/#project-architecture | https://scotttodd.github.io/iree/#project-architecture |
| readme | https://github.com/google/iree#architecture-overview | https://github.com/ScottTodd/iree/tree/diagram-dark-mode#architecture-overview |

Screenshots:

light on light: ![image](https://user-images.githubusercontent.com/4010439/169913657-07953051-b0d7-4c34-8a4e-fcbc9e7cea85.png)
light on dark: ![image](https://user-images.githubusercontent.com/4010439/169913554-93db186b-dc26-4703-8c4a-03f895530d0d.png) (this PR replaces this with dark on dark)
dark on dark: ![image](https://user-images.githubusercontent.com/4010439/169913597-c6def1f8-afdd-40d4-973c-d81f7aa6a1e5.png) (new with this PR)


---

References:
* https://www.stefanjudis.com/notes/how-to-define-dark-light-mode-images-in-github-markdown/
* https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/
* https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/

Note: the `<picture>` syntax suggested in the recent GitHub blog post just directly passes through the element contents, so relative paths to files in the repository do not work (yet?). Because of that, I've opted to use the non-standard `#gh-dark-mode-only`/`#gh-light-mode-only` selectors. These are implemented in GitHub, mkdocs-material, and in VSCode's markdown preview, but other markdown renderers may display both the light and dark mode images, instead of one or the other.