---
title: Dark Mode Auto Scope
description: "**`cooked_dark_mode_auto_scope`** Set the CSS selector Cooked uses when **Dark Mode** is **Auto** (`Cooked → Settings → Design`). Cooked prefixes its dark styles with this selector so they follow your theme’s frontend toggle. Default: `[data-theme=\"dark\"]`. Only applies when Auto is selected.…"
url: "https://docs.cooked.pro/docs/dark-mode-auto-scope/"
updated: "2026-08-02"
category: Developers
---

# Dark Mode Auto Scope

**`cooked_dark_mode_auto_scope`**
Set the CSS selector Cooked uses when **Dark Mode** is **Auto** (`Cooked → Settings → Design`). Cooked prefixes its dark styles with this selector so they follow your theme’s frontend toggle. Default: `[data-theme="dark"]`. Only applies when Auto is selected.

**Example:**

```
add_filter( 'cooked_dark_mode_auto_scope', 'custom_cooked_dark_mode_auto_scope' );

function custom_cooked_dark_mode_auto_scope( $scope ) {
    // Match your theme’s dark-mode ancestor (class, attribute, etc.)
    return 'body.dark-mode';

    // Return false to disable Auto dark CSS output
    // return false;
}
```

Return a non-empty string to scope dark styles, or `false` / `''` to emit none.