Merge branch 'main' into main-jd-stackblitz-for-examples

* docs: move color-mode script

* Move color-modes.js in static folder

* Async load color-modes.js

* Switch to DOMContentLoaded

* Revert async loading

.eslintrc.json

@@ -55,6 +55,7 @@
     "unicorn/no-array-callback-reference": "off",
     "unicorn/no-array-method-this-argument": "off",
     "unicorn/no-null": "off",
+    "unicorn/no-typeof-undefined": "off",
     "unicorn/no-unused-properties": "error",
     "unicorn/prefer-array-flat": "off",
     "unicorn/prefer-dom-node-dataset": "off",

.github/workflows/browserstack.yml

@@ -8,6 +8,9 @@ env:
   FORCE_COLOR: 2
   NODE: 18
 
+permissions:
+  contents: read
+
 jobs:
   browserstack:
     runs-on: ubuntu-latest

.github/workflows/bundlewatch.yml

@@ -11,6 +11,9 @@ env:
   FORCE_COLOR: 2
   NODE: 18
 
+permissions:
+  contents: read
+
 jobs:
   bundlewatch:
     runs-on: ubuntu-latest

.github/workflows/cspell.yml

@@ -10,8 +10,15 @@ on:
 env:
   FORCE_COLOR: 2
 
+permissions:
+  contents: read
+
 jobs:
   cspell:
+    permissions:
+      # allow streetsidesoftware/cspell-action to fetch files for commits and PRs
+      contents: read
+      pull-requests: read
     runs-on: ubuntu-latest
 
     steps:

.github/workflows/css.yml

@@ -11,6 +11,9 @@ env:
   FORCE_COLOR: 2
   NODE: 18
 
+permissions:
+  contents: read
+
 jobs:
   css:
     runs-on: ubuntu-latest

.github/workflows/docs.yml

@@ -11,6 +11,9 @@ env:
   FORCE_COLOR: 2
   NODE: 18
 
+permissions:
+  contents: read
+
 jobs:
   docs:
     runs-on: ubuntu-latest

.github/workflows/issue-close-require.yml

@@ -4,8 +4,15 @@ on:
   schedule:
     - cron: "0 0 * * *"
 
+permissions:
+  contents: read
+
 jobs:
   issue-close-require:
+    permissions:
+      # allow actions-cool/issues-helper to update issues and PRs
+      issues: write
+      pull-requests: write
     runs-on: ubuntu-latest
     if: github.repository == 'twbs/bootstrap'
     steps:

.github/workflows/issue-labeled.yml

@@ -4,8 +4,15 @@ on:
   issues:
     types: [labeled]
 
+permissions:
+  contents: read
+
 jobs:
   issue-labeled:
+    permissions:
+      # allow actions-cool/issues-helper to update issues and PRs
+      issues: write
+      pull-requests: write
     if: github.repository == 'twbs/bootstrap'
     runs-on: ubuntu-latest
     steps:

.github/workflows/js.yml

@@ -11,8 +11,15 @@ env:
   FORCE_COLOR: 2
   NODE: 18
 
+permissions:
+  contents: read
+
 jobs:
   run:
+    permissions:
+      # allow coverallsapp/github-action to create new checks issues and fetch code
+      checks: write
+      contents: read
     name: JS Tests
     runs-on: ubuntu-latest
 

.github/workflows/lint.yml

@@ -11,6 +11,9 @@ env:
   FORCE_COLOR: 2
   NODE: 18
 
+permissions:
+  contents: read
+
 jobs:
   lint:
     runs-on: ubuntu-latest

.github/workflows/node-sass.yml

@@ -11,6 +11,9 @@ env:
   FORCE_COLOR: 2
   NODE: 18
 
+permissions:
+  contents: read
+
 jobs:
   css:
     runs-on: ubuntu-latest

.github/workflows/release-notes.yml

@@ -6,8 +6,15 @@ on:
       - main
   workflow_dispatch:
 
+permissions:
+  contents: read
+
 jobs:
   update_release_draft:
+    permissions:
+      # allow release-drafter/release-drafter to create GitHub releases and add labels to PRs
+      contents: write
+      pull-requests: write
     runs-on: ubuntu-latest
     if: github.repository == 'twbs/bootstrap'
     steps:

.github/workflows/scorecards.yml

@@ -0,0 +1,65 @@
+name: Scorecards supply-chain security
+
+on:
+  # Only the default branch is supported.
+  branch_protection_rule:
+  push:
+    branches:
+      - main
+  schedule:
+    - cron: "16 10 * * 6"
+  workflow_dispatch:
+
+# Declare default permissions as read only.
+permissions: read-all
+
+jobs:
+  analysis:
+    name: Scorecards analysis
+    runs-on: ubuntu-latest
+    permissions:
+      # Needed to upload the results to code-scanning dashboard.
+      security-events: write
+      # Used to receive a badge.
+      id-token: write
+      # Needs for private repositories.
+      contents: read
+      actions: read
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - name: Run analysis
+        uses: ossf/scorecard-action@v2.1.0
+        with:
+          results_file: results.sarif
+          results_format: sarif
+          # (Optional) Read-only PAT token. Uncomment the `repo_token` line below if:
+          # - you want to enable the Branch-Protection check on a *public* repository, or
+          # - you are installing Scorecards on a *private* repository
+          # To create the PAT, follow the steps in https://github.com/ossf/scorecard-action#authentication-with-pat.
+          # repo_token: ${{ secrets.SCORECARD_READ_TOKEN }}
+
+          # Publish the results for public repositories to enable scorecard badges. For more details, see
+          # https://github.com/ossf/scorecard-action#publishing-results.
+          # For private repositories, `publish_results` will automatically be set to `false`, regardless
+          # of the value entered here.
+          publish_results: true
+
+      # Upload the results as artifacts (optional). Commenting out will disable uploads of run results in SARIF
+      # format to the repository Actions tab.
+      - name: Upload artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: SARIF file
+          path: results.sarif
+          retention-days: 5
+
+      # Upload the results to GitHub's code scanning dashboard.
+      - name: Upload to code-scanning
+        uses: github/codeql-action/upload-sarif@v1
+        with:
+          sarif_file: results.sarif

README.md

@@ -58,7 +58,7 @@ Read the [Getting started page](https://getbootstrap.com/docs/5.2/getting-starte
 
 ## Status
 
-[![Build Status](https://img.shields.io/github/workflow/status/twbs/bootstrap/JS%20Tests/main?label=JS%20Tests&logo=github)](https://github.com/twbs/bootstrap/actions?query=workflow%3AJS+Tests+branch%3Amain)
+[![Build Status](https://img.shields.io/github/actions/workflow/status/twbs/bootstrap/js.yml?branch=main&label=JS%20Tests&logo=github)](https://github.com/twbs/bootstrap/actions?query=workflow%3AJS+Tests+branch%3Amain)
 [![npm version](https://img.shields.io/npm/v/bootstrap)](https://www.npmjs.com/package/bootstrap)
 [![Gem version](https://img.shields.io/gem/v/bootstrap)](https://rubygems.org/gems/bootstrap)
 [![Meteor Atmosphere](https://img.shields.io/badge/meteor-twbs%3Abootstrap-blue)](https://atmospherejs.com/twbs/bootstrap)
@@ -72,6 +72,7 @@ Read the [Getting started page](https://getbootstrap.com/docs/5.2/getting-starte
 [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=SkxZcStBeExEdVJqQ2hWYnlWckpkNmNEY213SFp6WHFETWk2bGFuY3pCbz0tLXhqbHJsVlZhQnRBdEpod3NLSDMzaHc9PQ==--3d0b75245708616eb93113221beece33e680b229)](https://www.browserstack.com/automate/public-build/SkxZcStBeExEdVJqQ2hWYnlWckpkNmNEY213SFp6WHFETWk2bGFuY3pCbz0tLXhqbHJsVlZhQnRBdEpod3NLSDMzaHc9PQ==--3d0b75245708616eb93113221beece33e680b229)
 [![Backers on Open Collective](https://img.shields.io/opencollective/backers/bootstrap)](#backers)
 [![Sponsors on Open Collective](https://img.shields.io/opencollective/sponsors/bootstrap)](#sponsors)
+![OpenSSF Scorecard](https://img.shields.io/ossf-scorecard/github.com/twbs/bootstrap)
 
 
 ## What's included

package.json

@@ -84,7 +84,7 @@
     "docs-serve": "hugo server --port 9001 --disableFastRender",
     "docs-serve-only": "npx sirv-cli _site --port 9001",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
-    "update-deps": "ncu -u -x globby,karma-browserstack-launcher,karma-rollup-preprocessor && echo Manually update site/assets/js/vendor",
+    "update-deps": "ncu -u -x globby,karma-browserstack-launcher,karma-rollup-preprocessor,terser && echo Manually update site/assets/js/vendor",
     "release": "npm-run-all dist release-sri docs-build release-zip*",
     "release-sri": "node build/generate-sri.js",
     "release-version": "node build/change-version.js",
@@ -109,25 +109,25 @@
     "@babel/preset-env": "^7.20.2",
     "@popperjs/core": "^2.11.6",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^23.0.3",
+    "@rollup/plugin-commonjs": "^23.0.4",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
     "autoprefixer": "^10.4.13",
     "bundlewatch": "^0.3.3",
     "clean-css-cli": "^5.6.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.28.0",
+    "eslint": "^8.29.0",
     "eslint-config-xo": "^0.43.1",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-markdown": "^3.0.0",
-    "eslint-plugin-unicorn": "^44.0.2",
+    "eslint-plugin-unicorn": "^45.0.2",
     "find-unused-sass-variables": "^4.0.5",
     "globby": "^11.1.0",
     "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.95.0",
+    "hugo-bin": "^0.96.0",
     "ip": "^2.0.0",
-    "jquery": "^3.6.1",
+    "jquery": "^3.6.2",
     "karma": "^6.4.1",
     "karma-browserstack-launcher": "1.4.0",
     "karma-chrome-launcher": "^3.1.1",
@@ -140,21 +140,22 @@
     "lockfile-lint": "^4.9.6",
     "nodemon": "^2.0.20",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.19",
-    "postcss-cli": "^10.0.0",
-    "rollup": "^3.5.0",
+    "postcss": "^8.4.20",
+    "postcss-cli": "^10.1.0",
+    "rollup": "^3.7.4",
     "rollup-plugin-istanbul": "^4.0.0",
     "rtlcss": "^4.0.0",
-    "sass": "^1.56.1",
+    "sass": "^1.56.2",
     "shelljs": "^0.8.5",
-    "stylelint": "^14.15.0",
+    "stylelint": "^14.16.0",
     "stylelint-config-twbs-bootstrap": "^7.0.0",
-    "terser": "^5.16.0",
+    "terser": "5.16.0",
     "vnu-jar": "22.9.29"
   },
   "files": [
     "dist/{css,js}/*.{css,js,map}",
     "js/{src,dist}/**/*.{js,map}",
+    "js/index.{esm,umd}.js",
     "scss/**/*.scss"
   ],
   "hugo-bin": {

site/assets/scss/_brand.scss

@@ -15,13 +15,13 @@
 // Individual items
 .bd-brand-item {
   + .bd-brand-item {
-    border-top: 1px solid var(--#{$prefix}border-color);
+    border-top: 1px solid var(--bs-border-color);
   }
 
   @include media-breakpoint-up(md) {
     + .bd-brand-item {
       border-top: 0;
-      border-left: 1px solid var(--#{$prefix}border-color);
+      border-left: 1px solid var(--bs-border-color);
     }
   }
 }

site/assets/scss/_component-examples.scss

@@ -180,7 +180,7 @@
     width: 10rem;
     color: var(--bs-secondary-color);
     background-color: var(--bs-tertiary-bg);
-    border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    border: var(--bs-border-width) solid var(--bs-border-color);
 
     > div {
       display: flex;

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/content/docs/5.2/examples/_index.md

@@ -35,6 +35,9 @@ aliases: "/examples/"
                                             loading="lazy">
             <h3 class="h5 mb-1">{{ $example.name }}</h3>
           </a>
+          <button type="button" class="btn-edit text-nowrap float-end" title="Try it on StackBlitz" style="margin-top: -30px" data-sb-js-snippet="{{ $example.name | urlize }}">
+            <svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
+          </button>
           <p class="text-muted">{{ $example.description }}</p>
         </div>
       {{ if (eq (add $i 1) $len) }}</div>{{ end }}

site/content/docs/5.2/examples/features/index.html

@@ -292,54 +292,53 @@ body_class: ""
     <h2 class="pb-2 border-bottom">Features with title</h2>
 
     <div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
-      <div class="d-flex flex-column align-items-start gap-2">
+      <div class="col d-flex flex-column align-items-start gap-2">
         <h3 class="fw-bold">Left-aligned title explaining these awesome features</h3>
         <p class="text-muted">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
         <a href="#" class="btn btn-primary btn-lg">Primary button</a>
       </div>
-      <div class="row row-cols-1 row-cols-sm-2 g-4">
-        <div class="d-flex flex-column gap-2">
-          <div
-            class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-            <svg class="bi" width="1em" height="1em">
-              <use xlink:href="#collection" />
-            </svg>
-          </div>
-          <h4 class="fw-semibold mb-0">Featured title</h4>
-          <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
-        </div>
 
-        <div class="d-flex flex-column gap-2">
-          <div
-            class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-            <svg class="bi" width="1em" height="1em">
-              <use xlink:href="#gear-fill" />
-            </svg>
+      <div class="col">
+        <div class="row row-cols-1 row-cols-sm-2 g-4">
+          <div class="col d-flex flex-column gap-2">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+              <svg class="bi" width="1em" height="1em">
+                <use xlink:href="#collection" />
+              </svg>
+            </div>
+            <h4 class="fw-semibold mb-0">Featured title</h4>
+            <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
-          <h4 class="fw-semibold mb-0">Featured title</h4>
-          <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
-        </div>
 
-        <div class="d-flex flex-column gap-2">
-          <div
-            class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-            <svg class="bi" width="1em" height="1em">
-              <use xlink:href="#speedometer" />
-            </svg>
+          <div class="col d-flex flex-column gap-2">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+              <svg class="bi" width="1em" height="1em">
+                <use xlink:href="#gear-fill" />
+              </svg>
+            </div>
+            <h4 class="fw-semibold mb-0">Featured title</h4>
+            <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
-          <h4 class="fw-semibold mb-0">Featured title</h4>
-          <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
-        </div>
 
-        <div class="d-flex flex-column gap-2">
-          <div
-            class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-            <svg class="bi" width="1em" height="1em">
-              <use xlink:href="#table" />
-            </svg>
+          <div class="col d-flex flex-column gap-2">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+              <svg class="bi" width="1em" height="1em">
+                <use xlink:href="#speedometer" />
+              </svg>
+            </div>
+            <h4 class="fw-semibold mb-0">Featured title</h4>
+            <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
+          </div>
+
+          <div class="col d-flex flex-column gap-2">
+            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
+              <svg class="bi" width="1em" height="1em">
+                <use xlink:href="#table" />
+              </svg>
+            </div>
+            <h4 class="fw-semibold mb-0">Featured title</h4>
+            <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
           </div>
-          <h4 class="fw-semibold mb-0">Featured title</h4>
-          <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p>
         </div>
       </div>
     </div>

site/content/docs/5.2/getting-started/parcel.md

@@ -88,7 +88,7 @@ With dependencies installed and our project folder ready for us to start coding,
    </html>
    ```
 
-   We're including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap's CSS is loaded by Webpack.
+   We're including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap's CSS is loaded by Parcel.
 
    Parcel will automatically detect we're using Sass and install the [Sass Parcel plugin](https://parceljs.org/languages/sass/) to support it. However, if you wish, you can also manually run `npm i --save-dev @parcel/transformer-sass`.
 

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/layouts/partials/scripts.html

@@ -9,6 +9,10 @@
 <script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
 {{- end }}
 
+{{ if eq .Page.Layout "single" -}}
+<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
+{{- end }}
+
 {{- $vendor := resources.Match "js/vendor/*.js" -}}
 {{- $js := resources.Match "js/*.js" -}}
 {{- $targetDocsJSPath := path.Join "/docs" .Site.Params.docs_version "assets/js/docs.js" -}}
@@ -70,3 +74,100 @@ ${htmlSnippet.replace(/^/gm, '    ')}
   }
 </script>
 {{- end }}
+
+{{ if eq .Page.Layout "single" -}}
+<script>
+  // Open in StackBlitz logic
+  document.querySelectorAll('.btn-edit').forEach(btn => {
+    btn.addEventListener('click', event => {
+      const exampleRef = event.target.closest('.btn-edit').getAttribute('data-sb-js-snippet')
+
+      StackBlitzSDK.openBootstrapSnippet(exampleRef)
+    })
+
+    StackBlitzSDK.openBootstrapSnippet = async (exampleRef) => {
+      const isRTL = '-rtl' === exampleRef.substring(exampleRef.length - 4)
+
+      const exampleMarkup = "../examples/" + exampleRef + "/index.html"
+      let markup
+      let jsSnippet = 'import \'./style.css\';'
+      
+      await fetch(exampleMarkup)
+        .then(response => response.text())
+        .then(text => markup = text)
+
+      let d = document.createElement('html')
+      d.innerHTML = markup
+
+      const exampleCSS = d.querySelector('style').innerHTML
+
+      // Get CSS file
+      const css = "../examples/"
+        + (isRTL ? (exampleRef.substring(0, exampleRef.length - 4)) : exampleRef)
+        + "/"
+        + (isRTL ? (exampleRef.substring(0, exampleRef.length - 4) + '.rtl') : exampleRef)
+        + ".css"
+      let cssContent = ''
+      const response = await fetch(css)
+
+      if (response.ok) {
+        cssContent = await response.text()
+      }
+
+      // Get JS file
+      // First try in the basic directory
+      const js = "../examples/" + (isRTL ? (exampleRef.substring(0, exampleRef.length - 4)) : exampleRef) + "/" + (isRTL ? (exampleRef.substring(0, exampleRef.length - 4)) : exampleRef) + ".js"
+      let jsContent = ''
+      const responseJS = await fetch(js)
+
+      if (responseJS.ok) {
+        jsContent = await responseJS.text()
+      }
+
+      // Second try for RTL in the basic-rtl directory
+      if (isRTL && !responseJS.ok) {
+        const jsRTL = "../examples/" + exampleRef + "/" + exampleRef.substring(0, exampleRef.length - 4) + ".js"
+        const responseJSRTL = await fetch(jsRTL)
+
+        if (responseJSRTL.ok) {
+          jsContent = await responseJSRTL.text()
+        }
+      }
+
+      // Get HTML content
+      let htmlContent = d.querySelector('body').outerHTML.replaceAll('"/docs/5.', '"https://getbootstrap.com/docs/5.')
+
+      // Special use case to handle images from Heroes example
+      htmlContent = htmlContent.replaceAll('src="bootstrap-', 'src="https://getbootstrap.com/docs/5.2/examples/' + exampleRef + '/bootstrap-')
+      // Special use case to handle images from Features example
+      htmlContent = htmlContent.replaceAll('background-image: url(\'', 'background-image: url(\'https://getbootstrap.com/docs/5.2/examples/' + exampleRef + '/')
+
+      const t = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="{{ .Site.Params.cdn.css }}" rel="stylesheet">
+    <title>Bootstrap Example</title>
+    <${'script'} src="{{ .Site.Params.cdn.js_bundle }}"></${'script'}>
+  </head>
+  ${htmlContent}
+</html>`
+
+      const project = {
+        files: {
+          'index.html': t,
+          'index.js': jsSnippet + '\r\n\r\n' + jsContent,
+          'style.css': exampleCSS + cssContent,
+        },
+        title: 'Bootstrap Example',
+        description: `Official example from ${window.location.href}`,
+        template: 'javascript',
+        tags: ['bootstrap']
+      }
+
+      StackBlitzSDK.openProject(project, { openFile: 'index.html' })
+    }
+  })
+</script>
+{{- end }}

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]')