Skip to main content
Glama

check_dark_mode_patterns

Checks CSS for dark mode anti-patterns in web components using Shadow DOM, identifying theme-scoped selectors that fail to style shadow internals and recommending CSS custom properties for theming.

Instructions

Detects dark mode styling anti-patterns specific to web components with Shadow DOM. Catches: (1) theme-scoped selectors (.dark, [data-theme], @media prefers-color-scheme) setting standard CSS properties on web component hosts — these won't reach shadow DOM internals, (2) descendant selectors inside theme scopes trying to pierce shadow boundaries. Suggests using CSS custom properties to communicate theme changes through shadow DOM. Run this on any CSS that implements dark mode or theming for web components.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
cssTextYesThe CSS code to check for dark mode anti-patterns.
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description elaborates on what the tool checks (two specific anti-patterns) and suggests using CSS custom properties as a solution. This goes beyond a generic statement, though it doesn't cover output format or performance.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is concise (4 sentences), front-loaded with the main purpose, and every sentence adds value. No waste or redundancy.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's simplicity (one parameter, no output schema) and rich examples in the description, it is fully adequate for an agent to understand and invoke the tool correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The sole parameter cssText has a schema description that covers its meaning. The tool description repeats that it's CSS code but adds no new semantics, so the baseline of 3 is appropriate given 100% schema coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool detects dark mode styling anti-patterns specific to web components with Shadow DOM, with specific examples of what it catches. This makes its purpose unambiguous and distinct from sibling tools like check_css_scope or check_css_vars.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explicitly says 'Run this on any CSS that implements dark mode or theming for web components,' providing clear usage context. It lacks explicit when-not-to-use or alternative tool mentions, but the guidance is sufficient for typical use.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/bookedsolidtech/helixir'

If you have feedback or need assistance with the MCP directory API, please join our Discord server