Skip to content

Commit c36aaef

Browse files
surishubhamsurishubham
committed
Merge pull request #1940 from sakshamarora-arch/stage
Updated documentation for Real Devices Dark Mode Feature
1 parent f72a76c commit c36aaef

File tree

4 files changed

+169
-2
lines changed

4 files changed

+169
-2
lines changed

‎assets/images/real-device-app-testing/Dark Mode/dark-mode-toggle.png‎

118 KB
Loading

‎docs/dark-mode-on-browser.md‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
id: dark-mode-on-browser
3+
title: Dark Mode
4+
sidebar_label: Dark Mode
5+
description: Toggle and test dark mode themes during manual testing sessions on real browsers.
6+
keywords:
7+
- dark mode testing
8+
- dark theme
9+
- manual web testing
10+
- theme switching
11+
- ui validation
12+
- browser dark mode
13+
- web dark mode
14+
- lambdatest real browsers
15+
- light mode testing
16+
url: https://www.lambdatest.com/support/docs/dark-mode-on-browser/
17+
site_name: LambdaTest
18+
slug: dark-mode-on-browser/
19+
---
20+
import CodeBlock from '@theme/CodeBlock';
21+
import { YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY } from "@site/src/component/keys";
22+
23+
import Tabs from '@theme/Tabs';
24+
import TabItem from '@theme/TabItem';
25+
26+
<script type="application/ld+json"
27+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
28+
"@context": "https://schema.org",
29+
"@type": "BreadcrumbList",
30+
"itemListElement": [{
31+
"@type": "ListItem",
32+
"position": 1,
33+
"name": "Home",
34+
"item": "https://www.lambdatest.com"
35+
},{
36+
"@type": "ListItem",
37+
"position": 2,
38+
"name": "Support",
39+
"item": "https://www.lambdatest.com/support/docs/"
40+
},{
41+
"@type": "ListItem",
42+
"position": 3,
43+
"name": "Dark Mode on Browser",
44+
"item": "https://www.lambdatest.com/support/docs/dark-mode-on-browser/"
45+
}]
46+
})
47+
}}
48+
></script>
49+
50+
51+
LambdaTest’s **Dark Mode** feature allows you to manually toggle between light and dark themes on **real iOS and Android devices** during manual testing sessions.
52+
This enables testers to validate UI appearance, color contrast, and theme switching for both mobile apps and web applications without writing automation scripts.
53+
54+
## Use Cases
55+
56+
- Validate app UI elements render correctly in dark mode.
57+
- Test color contrast and readability in dark themes.
58+
- Verify icon and image visibility on dark backgrounds.
59+
- Ensure theme inheritance across multiple app screens.
60+
- Check browser and web application dark mode behavior.
61+
62+
## Supported Devices
63+
64+
| Device Type | Supported OS Version |
65+
|-------------------------|----------------------|
66+
| iPhone / iPad | iOS 13 and above |
67+
| Android Phones/Tablets | Android 11 and above |
68+
69+
## Steps to enable Dark Mode in Manual Testing
70+
71+
**Step 1:** Start a manual testing session on a real iOS or Android device in **App Live** or **Browser Live**.
72+
73+
**Step 2:** Go to the **Device Control tab** and turn the toggle **On** for Dark Mode.
74+
75+
![Dark Mode Settings](../assets/images/real-device-app-testing/Dark%20Mode/dark-mode-toggle.png)
76+
77+
78+
:::tip
79+
80+
- Dark mode changes are applied at the **system/browser level** and may require refreshing the page for full effect.
81+
- Some legacy websites may not fully support dark mode.
82+
- Web applications must implement dark mode CSS for consistent theming beyond browser UI.
83+
:::

‎docs/dark-mode-on-real-devices.md‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
id: dark-mode-on-real-devices
3+
title: Dark Mode on Real Devices
4+
sidebar_label: Dark Mode
5+
description: Toggle and test dark mode themes during manual testing sessions on real iOS and Android devices.
6+
keywords:
7+
- dark mode testing
8+
- dark theme
9+
- manual app testing
10+
- theme switching
11+
- ui validation
12+
- mobile app dark mode
13+
- web dark mode
14+
- lambdatest real devices
15+
- light mode testing
16+
url: https://www.lambdatest.com/support/docs/dark-mode-on-real-devices/
17+
site_name: LambdaTest
18+
slug: dark-mode-on-real-devices/
19+
---
20+
import CodeBlock from '@theme/CodeBlock';
21+
import { YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY } from "@site/src/component/keys";
22+
23+
import Tabs from '@theme/Tabs';
24+
import TabItem from '@theme/TabItem';
25+
26+
<script type="application/ld+json"
27+
dangerouslySetInnerHTML={{ __html: JSON.stringify({
28+
"@context": "https://schema.org",
29+
"@type": "BreadcrumbList",
30+
"itemListElement": [{
31+
"@type": "ListItem",
32+
"position": 1,
33+
"name": "Home",
34+
"item": "https://www.lambdatest.com"
35+
},{
36+
"@type": "ListItem",
37+
"position": 2,
38+
"name": "Support",
39+
"item": "https://www.lambdatest.com/support/docs/"
40+
},{
41+
"@type": "ListItem",
42+
"position": 3,
43+
"name": "Dark Mode on Real Devices",
44+
"item": "https://www.lambdatest.com/support/docs/dark-mode-on-real-devices/"
45+
}]
46+
})
47+
}}
48+
></script>
49+
50+
51+
LambdaTest’s **Dark Mode** feature allows you to manually toggle between light and dark themes on **real iOS and Android devices** during manual testing sessions.
52+
This enables testers to validate UI appearance, color contrast, and theme switching for both mobile apps and web applications without writing automation scripts.
53+
54+
## Use Cases
55+
56+
- Validate app UI elements render correctly in dark mode.
57+
- Test color contrast and readability in dark themes.
58+
- Verify icon and image visibility on dark backgrounds.
59+
- Ensure theme inheritance across multiple app screens.
60+
- Check browser and web application dark mode behavior.
61+
62+
## Supported Devices
63+
64+
| Device Type | Supported OS Version |
65+
|-------------------------|----------------------|
66+
| iPhone / iPad | iOS 13 and above |
67+
| Android Phones/Tablets | Android 11 and above |
68+
69+
## Steps to enable Dark Mode in Manual Testing
70+
71+
**Step 1:** Start a manual testing session on a real iOS or Android device in **App Live** or **Browser Live**.
72+
73+
**Step 2:** Go to the **Device Control tab** and turn the toggle **On** for Dark Mode.
74+
75+
![Dark Mode Settings](../assets/images/real-device-app-testing/Dark%20Mode/dark-mode-toggle.png)
76+
77+
78+
:::tip
79+
80+
- Dark mode changes are applied at the **system/browser level** and may require refreshing the page for full effect.
81+
- Some legacy websites may not fully support dark mode.
82+
- Web applications must implement dark mode CSS for consistent theming beyond browser UI.
83+
:::

‎sidebars.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2084,8 +2084,8 @@ module.exports = {
20842084
"accessibility-settings-ios",
20852085
"devtools-on-real-devices-app",
20862086
"set-date-time-hour-format-real-devices",
2087-
"assistive-touch-on-real-ios-devices"
2088-
2087+
"assistive-touch-on-real-ios-devices",
2088+
"dark-mode-on-real-devices"
20892089
],
20902090
},
20912091
],
@@ -2107,6 +2107,7 @@ module.exports = {
21072107
"screen-reader-on-real-devices-browser",
21082108
"ip-geolocation-on-real-devices-browser",
21092109
"assistive-touch-on-real-ios-browser",
2110+
"dark-mode-on-browser",
21102111
"contacts-on-real-devices-browser",
21112112
"set-date-time-hour-format-real-devices-browser",
21122113
]

0 commit comments

Comments
 (0)