[README] Change diagram color in dark mode

[jablko]

Thanks @OpportunityLiu for reporting the issue #55678 (comment) and @ImRodry for announcing GitHub's solution #55678 (comment)!

1. Add #gh-light-mode-only and #gh-dark-mode-only fragments to propagate the mode to the SVG fragment identifier.
2. Add gh-dark-mode-only id to the root SVG element and use #gh-dark-mode-only:target CSS pseudo-class to change the current color from black to white.

[typescript-bot]

@jablko Thank you for submitting this PR!

This is a live comment which I will keep updated.

This PR touches some part of DefinitelyTyped infrastructure, so a DT maintainer will need to review it. This is rare — did you mean to do this?

0 packages in this PR (and infra files)

• Infra files
  • README.es.md
  • README.it.md
  • README.ja.md
  • README.ko.md
  • README.md
  • README.pt.md
  • README.ru.md
  • README.zh.md
  • docs/support-window.svg
  • scripts/support-window.ts

Code Reviews

There aren't any other owners of this package, so a DT maintainer will review it.

You can test the changes of this PR in the Playground.

Status

• ✅ No merge conflicts
• ✅ Continuous integration tests have passed
• 🕐 A DT maintainer needs to approve changes which affect DT infrastructure (README.es.md, README.it.md, README.ja.md, README.ko.md, README.md, README.pt.md, README.ru.md, README.zh.md, docs/support-window.svg, scripts/support-window.ts)

Once every item on this list is checked, I'll ask you for permission to merge and publish the changes.

---

Diagnostic Information: What the bot saw about this PR

{
  "type": "info",
  "now": "-",
  "pr_number": 57360,
  "author": "jablko",
  "headCommitOid": "2b73cdd566572f6483599b68cf624b4e8bd68787",
  "lastPushDate": "2021-11-24T21:21:50.000Z",
  "lastActivityDate": "2021-11-24T22:00:42.000Z",
  "hasMergeConflict": false,
  "isFirstContribution": false,
  "tooManyFiles": false,
  "hugeChange": false,
  "popularityLevel": "Well-liked by everyone",
  "pkgInfo": [
    {
      "name": null,
      "kind": "edit",
      "files": [
        {
          "path": "README.es.md",
          "kind": "infrastructure"
        },
        {
          "path": "README.it.md",
          "kind": "infrastructure"
        },
        {
          "path": "README.ja.md",
          "kind": "infrastructure"
        },
        {
          "path": "README.ko.md",
          "kind": "infrastructure"
        },
        {
          "path": "README.md",
          "kind": "infrastructure"
        },
        {
          "path": "README.pt.md",
          "kind": "infrastructure"
        },
        {
          "path": "README.ru.md",
          "kind": "infrastructure"
        },
        {
          "path": "README.zh.md",
          "kind": "infrastructure"
        },
        {
          "path": "docs/support-window.svg",
          "kind": "infrastructure"
        },
        {
          "path": "scripts/support-window.ts",
          "kind": "infrastructure"
        }
      ],
      "owners": [],
      "addedOwners": [],
      "deletedOwners": [],
      "popularityLevel": "Critical"
    }
  ],
  "reviews": [],
  "mainBotCommentID": 978262597,
  "ciResult": "pass"
}

[typescript-bot]

🔔 @jablko — there are no owners, but it would still be good if you find someone to review this PR in the next few days, otherwise a maintainer will look at it. (And if you do find someone, maybe even recruit them to be a second owner to make future changes easier...)

[ImRodry]

It’s looking good!

[orta]

Confirmed it works, impressive - would make a good quick blog post somewhere

[jablko]

@orta Thanks for the suggestion! How's this blog post? http://jdbates.blogspot.com/2021/12/you-can-use-gh-dark-mode-onlytarget-css.html