docs: move color-mode script (#37658)

* docs: move color-mode script

* Move color-modes.js in static folder

* Async load color-modes.js

* Switch to DOMContentLoaded

* Revert async loading

site/content/docs/5.2/customize/color-modes.md

@@ -248,7 +248,7 @@ Here's a look at the JavaScript that powers it. Feel free to inspect our own doc
 
 {{< example lang="js" show_preview="false" >}}
 {{< js.inline >}}
-{{- readFile (path.Join "site/assets/js/color-modes/index.js") -}}
+{{- readFile (path.Join "site/static/docs" .Site.Params.docs_version "assets/js/color-modes.js") -}}
 {{< /js.inline >}}
 {{< /example >}}
 

site/layouts/partials/header.html

@@ -1,6 +1,3 @@
-{{- $colorModeJS := resources.Get "js/color-modes/index.js" }}
-<script src="{{ $colorModeJS.Permalink | relURL }}"></script>
-
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
@@ -22,6 +19,9 @@
 <meta name="robots" content="{{ . }}">
 {{- end }}
 
+{{- $colorModeJS := printf "/docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}}
+<script src="{{ $colorModeJS | relURL }}"></script>
+
 {{ partial "stylesheet" . }}
 {{ partial "favicons" . }}
 {{ partial "social" . }}

site/static/docs/5.2/assets/js/color-modes.js

@@ -46,7 +46,7 @@
     }
   })
 
-  window.addEventListener('load', () => {
+  window.addEventListener('DOMContentLoaded', () => {
     showActiveTheme(getPreferredTheme())
 
     document.querySelectorAll('[data-bs-theme-value]')