一键在 Manus 中运行任何 Skill

dark-mode-testing

星标4

分支0

更新时间2026年6月24日 02:43

Toggle between light and dark mode in Cursor's browser, screenshot both states, and flag missing token mappings or contrast issues.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

0xAidan

0xAidan/polymarket-bot-test

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Dark Mode Testing

Verify that dark mode works correctly by toggling themes and comparing.

Workflow

1. Open the App

Navigate to the target page using browser_navigate.

2. Screenshot Light Mode

Take a screenshot of the page in its default (light) state using browser_take_screenshot.

3. Toggle Dark Mode

Toggle dark mode using one of these methods (try in order):

Class toggle: Execute JS to add dark class to <html>:

document.documentElement.classList.toggle('dark')

Attribute toggle: Set data-theme="dark":

document.documentElement.setAttribute('data-theme', 'dark')

Media query: Use browser to emulate prefers-color-scheme: dark
UI toggle: Find the theme toggle button in browser_snapshot and click it

4. Screenshot Dark Mode

Take another screenshot after toggling.

5. Inspect for Issues

Check the browser_snapshot aria tree and screenshots for:

White flashes: Elements with hardcoded bg-white instead of bg-white dark:bg-slate-900
Invisible text: Text color that matches the dark background (e.g. black text on dark bg)
Missing borders: Borders using light-only colors that disappear on dark backgrounds
Contrast violations: Text that's too low-contrast against the dark background (need 4.5:1)
Hardcoded colors: Any #ffffff, #000000, white, black in inline styles
Images: Logos or icons that don't have dark mode variants
Shadows: Box shadows that are invisible on dark backgrounds
Form inputs: Input fields that keep white backgrounds in dark mode

6. Report

Dark Mode Test:
  Light mode: OK
  Dark mode issues found:
    - Header logo: white logo invisible on dark bg (needs dark variant)
    - Card borders: border-gray-200 invisible on dark bg → add dark:border-gray-700
    - Footer text: hardcoded #333 → use text-gray-900 dark:text-gray-100

Fix each issue and re-test.

同仓库更多 Skills

同仓库

accessibility-auditing

0xAidan/polymarket-bot-test

Use Cursor's browser aria snapshots to audit a page for accessibility issues — missing labels, broken tab order, contrast, and ARIA misuse.

2026-06-244

adding-analytics

0xAidan/polymarket-bot-test

Add PostHog analytics to a web application, including event tracking, page views, feature flags, and session replay.

2026-06-244

adding-api-docs

0xAidan/polymarket-bot-test

Generate OpenAPI/Swagger documentation for an API, including endpoint schemas, request/response types, and interactive docs UI.

2026-06-244

adding-auth

0xAidan/polymarket-bot-test

Add authentication to a web application using NextAuth.js (Auth.js), including OAuth providers, session management, and protected routes.

2026-06-244

adding-docker

0xAidan/polymarket-bot-test

Dockerize an application with a production-ready Dockerfile, docker-compose setup, and .dockerignore.

2026-06-244

adding-e2e-tests

0xAidan/polymarket-bot-test

Set up Playwright end-to-end testing in a project, including test configuration, example tests, and CI integration.

2026-06-244

name	dark-mode-testing
description	Toggle between light and dark mode in Cursor's browser, screenshot both states, and flag missing token mappings or contrast issues.
user-invocable	true

Dark Mode Testing

Verify that dark mode works correctly by toggling themes and comparing.

Workflow

1. Open the App

Navigate to the target page using browser_navigate.

2. Screenshot Light Mode

Take a screenshot of the page in its default (light) state using browser_take_screenshot.

3. Toggle Dark Mode

Toggle dark mode using one of these methods (try in order):

Class toggle: Execute JS to add dark class to <html>:

document.documentElement.classList.toggle('dark')

Attribute toggle: Set data-theme="dark":

document.documentElement.setAttribute('data-theme', 'dark')

Media query: Use browser to emulate prefers-color-scheme: dark
UI toggle: Find the theme toggle button in browser_snapshot and click it

4. Screenshot Dark Mode

Take another screenshot after toggling.

5. Inspect for Issues

Check the browser_snapshot aria tree and screenshots for:

White flashes: Elements with hardcoded bg-white instead of bg-white dark:bg-slate-900
Invisible text: Text color that matches the dark background (e.g. black text on dark bg)
Missing borders: Borders using light-only colors that disappear on dark backgrounds
Contrast violations: Text that's too low-contrast against the dark background (need 4.5:1)
Hardcoded colors: Any #ffffff, #000000, white, black in inline styles
Images: Logos or icons that don't have dark mode variants
Shadows: Box shadows that are invisible on dark backgrounds
Form inputs: Input fields that keep white backgrounds in dark mode

6. Report

Dark Mode Test:
  Light mode: OK
  Dark mode issues found:
    - Header logo: white logo invisible on dark bg (needs dark variant)
    - Card borders: border-gray-200 invisible on dark bg → add dark:border-gray-700
    - Footer text: hardcoded #333 → use text-gray-900 dark:text-gray-100

Fix each issue and re-test.