[README] Change diagram color in dark mode (#57360)

* [README] Change diagram color in dark mode

* [README] 🤖 Update support window diagram

https://github.com/jablko/DefinitelyTyped/actions/runs/1501218079

Co-authored-by: github/workflows/support-window.yml <bot@typescriptlang.org>

README.es.md

@@ -35,7 +35,8 @@ Definitely Typed solamente prueba paquetes en versiones de TypeScript que son me
 Actualmente, las versiones 3.7 y posteriores están siendo probadas. Si estas usando TypeScript 2.0 a 3.6, puedes intentar instalando paquetes `@types` — la mayoría de los paquetes no usan los beneficios de Typescript más nuevos. No hay garantía de que funcionen.
 Versiones soportadas:
 
-<img src="docs/support-window.svg" style="width:100%">
+<img src="docs/support-window.svg#gh-light-mode-only" style="width:100%">
+<img src="docs/support-window.svg#gh-dark-mode-only" style="width:100%">
 
 Los paquetes `@types` tienen etiquetas para las versiones de Typescript que explícitamente soportan, usualmente puedes obtener versiones más viejas de los paquetes anteriores a 2 años.
 Por ejemplo, si ejecutas `npm dist-tags @types/react`, observaras que Typescript 2.5 puede usar types para react@16.0, a su vez, Typescript 2.6 y 2.7 pueden usar types para react@16.4.

README.it.md

@@ -57,7 +57,8 @@ Se stai usando una versiond di TypeScript tra 2.0 e la 3.6, puoi ancora provare
 Non c'è comunque nessuna garanzia che funzioneranno.
 Ecco le informazioni riguardanti le versioni supportate:
 
-<img src="docs/support-window.svg" style="width:100%">
+<img src="docs/support-window.svg#gh-light-mode-only" style="width:100%">
+<img src="docs/support-window.svg#gh-dark-mode-only" style="width:100%">
 
 I package `@types` hanno dei tag per la versione di TypeScript che supportano, quindi di solito puoi installare vecchi package che sono più vecchi di due anni.
 Ad esempio se esegui `npm dist-tags @types/react`, vedrai che TypeScript 2.5 potrà usare i tipi per react@16.0, mentre TypeScript 2.6 e 2.7 potranno usare i tipi per react@16.4:

README.ja.md

@@ -55,7 +55,8 @@ TypeScript 2.0 ～ 3.6 を使用している場合、引き続き `@types` パ
 ただし、正常に動作する保証もありません。
 サポート期間については下記のとおりです。
 
-<img src="docs/support-window.svg" style="width:100%">
+<img src="docs/support-window.svg#gh-light-mode-only" style="width:100%">
+<img src="docs/support-window.svg#gh-dark-mode-only" style="width:100%">
 
 `@types` パッケージには、サポートする TypeScript のバージョンを明示的に指定するタグがあるため、多くの場合はサポート期間外のバージョン用のパッケージでも入手できます。
 たとえば、 `npm dist-tags @types/react` を実行すると、 TypeScript 2.5 なら react@16.0 の、 TypeScript 2.6 や 2.7 なら react@16.4 の型定義がそれぞれ利用できることが確認できます。

README.ko.md

@@ -59,7 +59,8 @@ TypeScript 2.0에서 3.6 버전을 사용하는 경우, 그래도 `@types` 패
 그러나 작동 여부를 보장하지는 못합니다.
 지원 기간은 다음과 같습니다:
 
-<img src="docs/support-window.svg" style="width:100%">
+<img src="docs/support-window.svg#gh-light-mode-only" style="width:100%">
+<img src="docs/support-window.svg#gh-dark-mode-only" style="width:100%">
 
 `@types` 패키지 안에는 패키지가 확실하게 지원하는 TypeScript 버전이 태그로 쓰여 있으므로, 2년 지원 기간이 지난 오래된 패키지도 보통 찾아보실 수 있습니다.
 예를 들어, `npm dist-tags @types/react` 명령어를 입력하면 TypeScript 2.5는 react@16.0용 타입을, TypeScript 2.6 및 2.7은 react@16.4용 타입을 사용할 수 있는 것을 확인하실 수 있습니다:

README.md

@@ -59,7 +59,8 @@ If you're using TypeScript 2.0 to 3.6, you can still try installing `@types` pac
 But there's no guarantee that they'll work.
 Here is the support window:
 
-<img src="docs/support-window.svg" style="width:100%">
+<img src="docs/support-window.svg#gh-light-mode-only" style="width:100%">
+<img src="docs/support-window.svg#gh-dark-mode-only" style="width:100%">
 
 `@types` packages have tags for versions of TypeScript that they explicitly support, so you can usually get older versions of packages that predate the 2-year window.
 For example, if you run `npm dist-tags @types/react`, you'll see that TypeScript 2.5 can use types for react@16.0, whereas TypeScript 2.6 and 2.7 can use types for react@16.4:

README.pt.md

@@ -57,7 +57,8 @@ Se você está usando as versões 2.0 a 3.6 do TypeScript, você ainda pode tent
 Mas não tem nenhuma garantia de que elas funcionarão.
 Esta é a tabela de duração de suporte das versões.
 
-<img src="docs/support-window.svg" style="width:100%">
+<img src="docs/support-window.svg#gh-light-mode-only" style="width:100%">
+<img src="docs/support-window.svg#gh-dark-mode-only" style="width:100%">
 
 Pacotes `@types` têm tags para versões do TypeScript que elas explicitamente suportam, então normalmente você pode usar versões mais antigas dos pacotes que precedem o período de 2 anos.
 Por exemplo, se você executar o comando `npm dist-tags @types/react`, você verá que o TypeScript 2.5 pode usar os tipos para o react@16.0, enquanto o TypeScript 2.6 e 2.7 podem usar os tipos para o react@16.4:

README.ru.md

@@ -57,7 +57,8 @@ npm install --save-dev @types/node
 
 График обновлений:
 
-<img src="docs/support-window.svg" style="width:100%">
+<img src="docs/support-window.svg#gh-light-mode-only" style="width:100%">
+<img src="docs/support-window.svg#gh-dark-mode-only" style="width:100%">
 
 Пакеты, которые существовали до ноября 2019 года, могут иметь более старые версии, которые явно помечены как совместимые с более старыми версиями Typescript; используйте тег "ts2.6" для Typescript 2.6, например.
 

README.zh.md

@@ -52,7 +52,8 @@ npm install --save-dev @types/node
 
 Definitely Typed 仅在发布时间小于 2 年的 TypeScript 版本上测试软件包。当前已测试 3.7 及更高版本。如果您使用的是 TypeScript 2.0 到 3.6，仍然可以尝试安装 @types 软件包，大多数软件包都不使用 TypeScript 的新特性。但是不能保证它们会起作用，这是支持窗口：
 
-<img src="docs/support-window.svg" style="width:100%">
+<img src="docs/support-window.svg#gh-light-mode-only" style="width:100%">
+<img src="docs/support-window.svg#gh-dark-mode-only" style="width:100%">
 
 `@types` 软件包具有它们明确支持的 TypeScript 版本的标记，因此通常可以获取早于 2 年窗口的较早版本的软件包。例如，如果运行 `npm dist-tags @types/react`，您能看到 TypeScript 2.5 最高支持 react@16.0 的类型定义，而 TypeScript 2.6 和 2.7 则最高支持 react@16.4：
 

scripts/support-window.ts

@@ -33,9 +33,7 @@ const x = scaleTime()
         // of additional, unsupported versions?
         new Date(
           Number(d.releaseDate) +
-            ((d.endDate as unknown as number) -
-              (d.releaseDate as unknown as number)) /
-              4
+            ((d.endDate as never) - (d.releaseDate as never)) / 4
         )
     )!,
     max(supported, (d) => d.endDate)!,
@@ -50,9 +48,15 @@ const y = scaleBand()
 const dom = new JSDOM();
 const svg = select(dom.window.document.body)
   .append("svg")
+  .attr("id", "gh-dark-mode-only")
   // @ts-expect-error
   .attr("viewBox", [0, 0, width, height])
   .attr("font-family", "sans-serif");
+svg.append("style").text(`
+  #gh-dark-mode-only:target {
+    color: #ffffff;
+  }
+`);
 const axes = svg
   .append("g")
   .attr("stroke-dasharray", 2)
@@ -76,10 +80,10 @@ svg
   .attr("y", (d) => y(d.version)!)
   .attr("width", (d) => x(d.endDate) - x(d.releaseDate))
   .attr("height", y.bandwidth())
-  .attr("fill", (d, i) => (i % 2 === 0 ? "#3178C6" : "#235A97"));
+  .attr("fill", (d, i) => (i % 2 === 0 ? "#3178c6" : "#235a97"));
 const texts = svg
   .append("g")
-  .attr("fill", "#FFFFFF")
+  .attr("fill", "#ffffff")
   .attr("text-anchor", "middle")
   .attr("transform", `translate(0,${y.bandwidth() / 2})`);
 texts
@@ -96,7 +100,7 @@ texts
         "-"
       )}.html`
   )
-  .attr("fill", "#FFFFFF")
+  .attr("fill", "#ffffff")
   .append("text")
   .attr("x", (d) => x(d.releaseDate) + (x(d.endDate) - x(d.releaseDate)) / 2)
   .attr("y", (d) => y(d.version)!)