Test different rendering modes and accessibility features. Capture dark mode themes, print-friendly layouts, and reduced motion versions of your pages.
Emulation options allow you to test how your website appears in different rendering contexts without manually changing browser settings. This is essential for testing dark mode themes, print layouts, and accessibility features like reduced motion.
When to use emulation?
Force the page to render in dark mode by setting the prefers-color-scheme media query to dark. Perfect for testing dark theme implementations or capturing screenshots for documentation in dark mode.
booleanprefers-color-schemefalseconst response = await fetch('https://www.snapshotai.dev/api/v1/screenshots', {
method: 'POST',
headers: {
'Authorization': 'Bearer sk_live_YOUR_API_KEY',
'Content-Type': 'application/json',
},
body: JSON.stringify({
url: 'https://example.com',
options: {
dark_mode: true // Force dark mode
}
})
});
const data = await response.json();
console.log('Dark mode screenshot captured:', data.data.id);Capture both light and dark versions to showcase your theme implementation:
import requests
def capture_theme(url, dark_mode=False):
response = requests.post(
'https://www.snapshotai.dev/api/v1/screenshots',
headers={
'Authorization': 'Bearer sk_live_YOUR_API_KEY',
'Content-Type': 'application/json'
},
json={
'url': url,
'options': {
'dark_mode': dark_mode,
'viewport_width': 1920,
'viewport_height': 1080
}
}
)
return response.json()['data']['id']
# Capture both versions
light_screenshot = capture_theme('https://example.com', dark_mode=False)
dark_screenshot = capture_theme('https://example.com', dark_mode=True)
print(f"Light mode: {light_screenshot}")
print(f"Dark mode: {dark_screenshot}")Tip: Use dark mode screenshots for documentation to show users how your app looks in dark theme. Many developers prefer reading docs in dark mode!
Change the CSS media type to print to see how the page looks when printed. This is essential for testing print stylesheets and ensuring documents, invoices, or reports render correctly when printed.
string'screen' | 'print''screen'curl -X POST https://www.snapshotai.dev/api/v1/screenshots \
-H "Authorization: Bearer sk_live_YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"url": "https://example.com/invoice",
"options": {
"media_type": "print"
}
}'const response = await fetch('https://www.snapshotai.dev/api/v1/screenshots', {
method: 'POST',
headers: {
'Authorization': 'Bearer sk_live_YOUR_API_KEY',
'Content-Type': 'application/json',
},
body: JSON.stringify({
url: 'https://app.example.com/invoice/12345',
options: {
media_type: 'print', // Use print stylesheet
viewport_width: 800, // A4 width approx
viewport_height: 1131, // A4 height approx
format: 'pdf' // Optional: PDF output
}
})
});
// Perfect for generating printable invoices or reports
const data = await response.json();
console.log('Print-ready screenshot:', data.data.id);Common Use Cases:
Enable the prefers-reduced-motion media query to test accessibility features. This helps verify that your website respects user motion preferences and provides a comfortable experience for users with vestibular disorders or motion sensitivity.
booleanprefers-reduced-motionfalseconst response = await fetch('https://www.snapshotai.dev/api/v1/screenshots', {
method: 'POST',
headers: {
'Authorization': 'Bearer sk_live_YOUR_API_KEY',
'Content-Type': 'application/json',
},
body: JSON.stringify({
url: 'https://animated-site.com',
options: {
reduced_motion: true, // Enable accessibility mode
delay: 1000 // Allow time for animations to be disabled
}
})
});
// Verify that animations are properly disabled
const data = await response.json();
console.log('Accessibility test screenshot:', data.data.id);Accessibility Best Practices:
prefers-reduced-motionYou can combine multiple emulation options to test complex scenarios:
import requests
response = requests.post(
'https://www.snapshotai.dev/api/v1/screenshots',
headers={
'Authorization': 'Bearer sk_live_YOUR_API_KEY',
'Content-Type': 'application/json'
},
json={
'url': 'https://example.com',
'options': {
# Dark mode with accessibility
'dark_mode': True,
'reduced_motion': True,
# Additional options
'viewport_width': 1920,
'viewport_height': 1080,
'delay': 1000
}
}
)
# Perfect for accessibility testing in dark mode
data = response.json()
print(f"Dark mode + reduced motion screenshot: {data['data']['id']}")Test and showcase your dark theme implementation. Capture screenshots for documentation, marketing, or comparison.
{
"dark_mode": true,
"viewport_width": 1920
}Generate print-friendly versions of invoices, reports, or documents. Test @media print styles.
{
"media_type": "print",
"viewport_width": 800
}Verify that animations are properly disabled when users prefer reduced motion.
{
"reduced_motion": true,
"delay": 1000
}Test multiple features together: dark mode accessibility, print dark mode, etc.
{
"dark_mode": true,
"reduced_motion": true
}Test Both Light and Dark Modes
Always test your site in both themes to ensure colors, contrasts, and UI elements work correctly in each mode.
Use Print Media for Documents
When generating screenshots of invoices, receipts, or reports, use media_type: 'print' to ensure proper formatting.
Add Delay for Animations
When testing reduced motion, add a small delay to allow time for animations to be properly disabled before capturing.
Save as Templates
Save common emulation configurations (dark mode, print, accessibility) as templates for quick reuse.
Verify CSS Media Queries
Ensure your CSS properly responds to @media (prefers-color-scheme: dark), @media print, and @media (prefers-reduced-motion).
Our team can help you test your dark mode, print styles, and accessibility features.