diff --git a/docs-assets/screenshots/script.js b/docs-assets/screenshots/script.js
index 86108a2838..94ea2d9de6 100644
--- a/docs-assets/screenshots/script.js
+++ b/docs-assets/screenshots/script.js
@@ -4,42 +4,55 @@ import schema from './schema.js'
 
 fs.rmSync('images', { recursive: true, force: true })
 
-for (const [file, options] of Object.entries(schema)) {
-    configure(options.configure)
+const themes = ['light', 'dark']
 
-    const directory = file.substring(0, file.lastIndexOf('/'))
+themes.forEach((theme) => {
+    for (const [file, options] of Object.entries(schema)) {
+        configure(options.configure)
 
-    if (directory) {
-        fs.mkdirSync(`images/${directory}`, { recursive: true })
-    }
+        const directory = file.substring(0, file.lastIndexOf('/'))
 
-    ;(async () => {
-        const browser = await puppeteer.launch()
-        const page = await browser.newPage()
-        await page.setViewport(
-            options.viewport ?? {
-                width: 1920,
-                height: 1080,
-                deviceScaleFactor: 3,
-            },
-        )
-        await page.goto(`http://127.0.0.1:8000/${options.url}`, {
-            waitUntil: 'networkidle2',
-        })
-
-        if (options.before) {
-            await options.before(page, browser)
+        if (directory) {
+            fs.mkdirSync(`images/${theme}/${directory}`, { recursive: true })
         }
 
-        const element = await page.waitForSelector(options.selector)
-        await element.screenshot({ path: `images/${file}.jpg` })
+        ;(async () => {
+            const browser = await puppeteer.launch()
+            const page = await browser.newPage()
+            await page.setViewport(
+                options.viewport ?? {
+                    width: 1920,
+                    height: 1080,
+                    deviceScaleFactor: 3,
+                },
+            )
+            await page.goto(`http://127.0.0.1:8000/${options.url}`, {
+                waitUntil: 'networkidle2',
+            })
 
-        await element.dispose()
-        await browser.close()
+            if (theme === 'dark') {
+                await page.emulateMediaFeatures([{
+                    name: 'prefers-color-scheme',
+                    value: 'dark'
+                }])
 
-        configure()
-    })()
-}
+                await new Promise((resolve) => setTimeout(resolve, 500))
+            }
+
+            if (options.before) {
+                await options.before(page, browser)
+            }
+
+            const element = await page.waitForSelector(options.selector)
+            await element.screenshot({ path: `images/${theme}/${file}.jpg` })
+
+            await element.dispose()
+            await browser.close()
+
+            configure()
+        })()
+    }
+})
 
 function configure(php = null) {
     fs.writeFileSync(