### Start Development Server

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/4.contributing.md

Start the development server for the Nuxt Color Mode module. This will launch the playground at http://localhost:3000.

```bash
pnpm dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/4.contributing.md

Install project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Switch to Custom Color Modes with Buttons

Source: https://context7.com/nuxt-modules/color-mode/llms.txt

Example of how to switch to custom color modes like 'sepia' or 'contrast' using buttons and the `useColorMode` composable.

```vue
<template>
  <div>
    <button @click="colorMode.preference = 'sepia'">Sepia</button>
    <button @click="colorMode.preference = 'contrast'">High Contrast</button>
  </div>
</template>

<script setup lang="ts">
const colorMode = useColorMode()
</script>

<style>
.sepia body    { background: #f1e7d0; color: #433422; }
.contrast body { background: #000; color: #ff0; }
</style>
```

--------------------------------

### Tailwind CSS v4 Themed Content Example

Source: https://context7.com/nuxt-modules/color-mode/llms.txt

Example of applying Tailwind CSS classes for different color modes, including custom modes like 'sepia'.

```vue
<template>
  <div class="bg-white dark:bg-gray-900 sepia:bg-amber-50 transition-colors">
    <h1 class="text-gray-900 dark:text-white sepia:text-amber-900">
      Hello world
    </h1>
  </div>
</template>
```

--------------------------------

### Add Nuxt Module

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/1.getting-started/2.installation.md

Use npx to add the color-mode module to your Nuxt project. This command handles dependency installation.

```bash
npx nuxt module add color-mode
```

--------------------------------

### CSS for Data Attribute Theming

Source: https://context7.com/nuxt-modules/color-mode/llms.txt

Example CSS rules that work with the `data-theme` attribute set by the color mode module, compatible with systems like daisyUI.

```css
/* Works with daisyUI or any data-attribute-based theme system */
[data-theme='dark'] body { background: #1d232a; }
[data-theme='light'] body { background: #ffffff; }
```

--------------------------------

### Tailwind CSS v4 Example Usage with Custom Variants

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/2.usage/1.basic.md

Illustrates how to apply Tailwind CSS classes that utilize custom variants for dark and sepia modes, demonstrating dynamic background and text color changes.

```html
<div class="bg-white dark:bg-gray-900 sepia:bg-amber-50">
  <h1 class="text-gray-900 dark:text-white sepia:text-amber-900">
    Hello world
  </h1>
</div>
```

--------------------------------

### Cookie Attributes Configuration

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/2.usage/3.configuration.md

Override cookie attributes for persistence when using 'cookie' storage. This example customizes 'SameSite' and 'Secure' attributes.

```typescript
export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    storage: 'cookie',
    cookieAttrs: {
      'max-age': '31536000',
      'path': '/',
      'SameSite': 'Lax',
      'Secure': '',
    }
  }
})
```

--------------------------------

### Register Nuxt Color Mode Module

Source: https://context7.com/nuxt-modules/color-mode/llms.txt

Register the installed module in your nuxt.config.ts file to enable its functionality.

```typescript
export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
})
```

--------------------------------

### Run Test Suite

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/4.contributing.md

Execute the test suite for the project using pnpm.

```bash
pnpm test
```

--------------------------------

### Clone Repository

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/4.contributing.md

Clone the Nuxt Color Mode repository to your local machine.

```bash
git clone https://github.com/nuxt-modules/color-mode.git
cd color-mode
```

--------------------------------

### Vue Template and Script for Color Mode

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/2.usage/1.basic.md

Demonstrates how to use the `useColorMode` composable in a Vue template to display the current color mode and allow users to select their preference. It also shows basic console logging of the preference.

```html
<template>
  <div>
    <h1>Color mode: {{ $colorMode.value }}</h1>
    <select v-model="$colorMode.preference">
      <option value="system">System</option>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="sepia">Sepia</option>
    </select>
  </div>
</template>

<script setup>
const colorMode = useColorMode()

console.log(colorMode.preference)
</script>

<style>
body {
  background-color: #fff;
  color: rgba(0,0,0,0.8);
}
.dark body {
  background-color: #091a28;
  color: #ebf4f1;
}
.sepia body {
  background-color: #f1e7d0;
  color: #433422;
}
</style>
```

--------------------------------

### ModuleOptions TypeScript Interface for Configuration

Source: https://context7.com/nuxt-modules/color-mode/llms.txt

The `ModuleOptions` interface provides type definitions for advanced configuration of the Nuxt Color Mode module.

```typescript
import type { ModuleOptions } from '@nuxtjs/color-mode'

const colorModeConfig: ModuleOptions = {
  preference: 'system',
  fallback: 'light',
  globalName: '__NUXT_COLOR_MODE__',
  componentName: 'ColorScheme',
  classPrefix: '',
  classSuffix: '',
  dataValue: '',
  storageKey: 'nuxt-color-mode',
  storage: 'localStorage',   // 'localStorage' | 'sessionStorage' | 'cookie'
  cookieAttrs: undefined,
  disableTransition: false,
}
```

--------------------------------

### Use `useColorMode` Composable

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/3.advanced/2.migration.md

The recommended way to access color mode information in v3 is by using the `useColorMode` composable. It provides access to `preference` and `value` properties.

```vue
<script setup>
const colorMode = useColorMode()

// Access properties
console.log(colorMode.preference)
console.log(colorMode.value)
</script>
```

--------------------------------

### Configure Cookie Storage for SSR Theme Persistence

Source: https://context7.com/nuxt-modules/color-mode/llms.txt

Switch color mode storage to 'cookie' in `nuxt.config.ts` so the server can read the preference on every request and pre-render the correct theme, eliminating the flash-of-wrong-theme.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    storage: 'cookie',
    storageKey: 'nuxt-color-mode',
    cookieAttrs: {
      'max-age': '31536000', // 1 year
      'path': '/',
      'SameSite': 'Lax',
      'Secure': '',          // only send over HTTPS
    },
  },
})
```

--------------------------------

### Configure Nuxt Color Mode Options

Source: https://context7.com/nuxt-modules/color-mode/llms.txt

Customize the behavior of the color mode module by setting options in nuxt.config.ts. This includes setting preferences, fallback modes, storage options, and class prefixes.

```typescript
export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    // Default preference: 'system' auto-detects from OS
    preference: 'system',

    // Fallback when no system preference is detectable (SSR / generate)
    fallback: 'light',

    // Global window variable name used by the inline script
    globalName: '__NUXT_COLOR_MODE__',

    // Name of the auto-registered <ColorScheme> component
    componentName: 'ColorScheme',

    // Optional prefix/suffix for the HTML class, e.g. classPrefix='theme-' → 'theme-dark'
    classPrefix: '',
    classSuffix: '',

    // Optional data attribute: dataValue: 'theme' → <html data-theme="dark">
    dataValue: 'theme',

    // Persistence: 'localStorage' | 'sessionStorage' | 'cookie'
    storage: 'localStorage',
    storageKey: 'nuxt-color-mode',

    // Cookie attributes (only used when storage === 'cookie')
    cookieAttrs: {
      'max-age': '31536000',
      'path': '/',
      'SameSite': 'Lax',
    },

    // Suppress CSS transitions during theme switch
    disableTransition: false,
  },
})
```

--------------------------------

### Update Color Mode Type Imports

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/3.advanced/2.migration.md

If you were importing color mode configuration types, note that the type name has been changed from `ColorModeConfig` to `ModuleOptions` in v3.

```typescript
// Before
import type { ColorModeConfig } from '@nuxtjs/color-mode'

// After
import type { ModuleOptions } from '@nuxtjs/color-mode'
```

--------------------------------

### Force Color Mode Per Page with definePageMeta

Source: https://context7.com/nuxt-modules/color-mode/llms.txt

Lock any individual page to a specific mode regardless of user preference by setting the `colorMode` property in `definePageMeta`. This is useful for incrementally rolling out dark mode.

```vue
<!-- pages/admin/dashboard.vue — always light -->
<template>
  <div>
    <h1>Admin Dashboard (always light)</h1>

    <!-- Hide the picker when mode is forced -->
    <ColorModePicker v-if="!$colorMode.forced" />
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  colorMode: 'light', // 'light' | 'dark' | any custom mode
})
</script>
```

--------------------------------

### Prevent SSR Flash with ColorScheme Component

Source: https://context7.com/nuxt-modules/color-mode/llms.txt

Wrap mode-dependent UI in `<ColorScheme>` to render a placeholder server-side and reveal real content only after hydration. Use the `placeholder` prop for custom placeholder markup.

```vue
<template>
  <ColorScheme placeholder="Loading theme…" tag="span">
    <!-- Only rendered client-side after hydration -->
    Color mode: <b>{{ $colorMode.preference }}</b>
    <span v-if="$colorMode.preference === 'system'">
      (system resolved to <i>{{ $colorMode.value }}</i>)
    </span>
  </ColorScheme>

  <!-- Alternative: named slot for custom placeholder markup -->
  <ColorScheme tag="div">
    <p>Theme-sensitive content here</p>
    <template #placeholder>
      <p>Loading…</p>
    </template>
  </ColorScheme>
</template>
```

--------------------------------

### Force Light Mode on a Page

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/2.usage/2.force-mode.md

Set the `colorMode` property to 'light' within `definePageMeta` to force the page into light mode. This is useful for pages that are not yet ready for dark mode.

```html
<template>
  <h1>This page is forced with light mode</h1>
</template>

<script setup>
definePageMeta({
  colorMode: 'light',
})
</script>
```

--------------------------------

### Configure Nuxt Color Mode Module

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/1.getting-started/2.installation.md

Add the '@nuxtjs/color-mode' module to the modules array in your nuxt.config.ts file to enable it.

```typescript
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/color-mode'
  ]
})
```

--------------------------------

### Configure Data Attribute Theming with dataValue

Source: https://context7.com/nuxt-modules/color-mode/llms.txt

Set `dataValue` in `nuxt.config.ts` to write the current mode as a `data-*` attribute on `<html>`, enabling CSS libraries like daisyUI that rely on `data-theme` rather than classes.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    dataValue: 'theme', // outputs <html data-theme="dark">
  },
})
```

--------------------------------

### Update CSS Classes for Color Mode

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/3.advanced/2.migration.md

In v4, the default class suffix has been removed. Update your CSS to use '.dark' and '.light' instead of '.dark-mode' and '.light-mode'.

```diff
- .dark-mode { }
- .light-mode { }
+ .dark { }
+ .light { }
```

--------------------------------

### Define Page-Level Color Mode in v3

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/3.advanced/2.migration.md

When migrating to v3, define the color mode at the page level using `definePageMeta`. This replaces the previous component option method for Nuxt 3+.

```diff
<template>
  <h1>This page is forced with light mode</h1>
</template>

- <script>
- export default {
-   colorMode: 'light',
- }
+ <script setup>
+ definePageMeta({
+   colorMode: 'light',
+ })
</script>
```

--------------------------------

### Avoid Flash with ColorScheme Component

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/3.advanced/1.caveats.md

Use the ColorScheme component to guard rendering paths that depend on the color mode preference, especially when the preference is set to 'system'. This prevents a visual flash by rendering a placeholder until the client-side detection is complete.

```vue
<template>
  <ColorScheme placeholder="..." tag="span">
    Color mode: <b>{{ $colorMode.preference }}</b>
    <span v-if="$colorMode.preference === 'system'">
      (<i>{{ $colorMode.value }}</i> mode detected)
    </span>
  </ColorScheme>
</template>
```

--------------------------------

### Use $colorMode Template Helper in Vue

Source: https://context7.com/nuxt-modules/color-mode/llms.txt

Utilize the $colorMode template helper for direct access to the color mode instance within your Vue templates, enabling theme selection via dropdowns and displaying current preferences.

```vue
<template>
  <div>
    <select v-model="$colorMode.preference">
      <option value="system">System</option>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
    </select>

    <p>
      Preference: <b>{{ $colorMode.preference }}</b>
      <span v-if="$colorMode.preference === 'system'">
        — detected: <i>{{ $colorMode.value }}</i>
      </span>
    </p>
  </div>
</template>
```

--------------------------------

### Tailwind CSS v3 Configuration for Dark Mode

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/2.usage/1.basic.md

Sets up Tailwind CSS v3 to use the 'selector' mode for dark mode, which is compatible with the `.dark` class added by the color mode module. This configuration should be placed in your `tailwind.config.js` file.

```js
export default {
  darkMode: 'selector',
}
```

--------------------------------

### Tailwind CSS v4 Custom Variants for Dark and Sepia Modes

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/2.usage/1.basic.md

Extends the Tailwind CSS v4 configuration to include custom variants for both dark and sepia color modes, allowing for specific styling based on these preferences.

```css
@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant sepia (&:where(.sepia, .sepia *));
```

--------------------------------

### Default Color Mode Configuration

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/2.usage/3.configuration.md

Set the default color mode preference, fallback, and other module options in your nuxt.config.ts. The default preference is 'system', which detects system preferences.

```typescript
export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    preference: 'system', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    globalName: '__NUXT_COLOR_MODE__',
    componentName: 'ColorScheme',
    classPrefix: '',
    classSuffix: '',
    storage: 'localStorage', // or 'sessionStorage' or 'cookie'
    storageKey: 'nuxt-color-mode',
    cookieAttrs: { 'max-age': '31536000', path: '/' }
  }
})
```

--------------------------------

### Update Color Mode Preference in v4

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/3.advanced/2.migration.md

In v4, you can no longer directly set `colorMode.value`. Use `colorMode.preference` instead to change the color mode. The `value` property is now read-only.

```diff
<script setup>
const colorMode = useColorMode()

- colorMode.value = 'dark'
+ colorMode.preference = 'dark'
</script>
```

--------------------------------

### Remove `hid` Option in v4

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/3.advanced/2.migration.md

The `hid` configuration option has been removed in v4. If you were using it, simply remove it from your nuxt.config.ts.

```diff
export default defineNuxtConfig({
  colorMode: {
-   hid: 'nuxt-color-mode-script',
    preference: 'system',
  }
})
```

--------------------------------

### Disable CSS Transitions for Instant Theme Switch

Source: https://context7.com/nuxt-modules/color-mode/llms.txt

Configure `disableTransition: true` in `nuxt.config.ts` to suppress all CSS transitions for one paint cycle when changing themes, preventing animated artifacts.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    disableTransition: true,
  },
})
```

--------------------------------

### Use useColorMode() Composable in Vue

Source: https://context7.com/nuxt-modules/color-mode/llms.txt

Access and control the color mode state within your Vue components using the useColorMode() composable. This allows you to display the current mode, detect OS preferences, and allow users to switch themes.

```vue
<template>
  <div>
    <h1>Resolved mode: {{ colorMode.value }}</h1>
    <p v-if="colorMode.preference === 'system'">
      OS preference detected: <strong>{{ colorMode.value }}</strong>
    </p>
    <p v-if="colorMode.forced">Color mode is forced on this page.</p>

    <!-- Theme picker -->
    <button
      v-for="mode in ['system', 'light', 'dark', 'sepia']"
      :key="mode"
      :aria-pressed="colorMode.preference === mode"
      @click="colorMode.preference = mode"
    >
      {{ mode }}
    </button>
  </div>
</template>

<script setup lang="ts">
const colorMode = useColorMode()
// colorMode.preference  — writable, persisted to storage
// colorMode.value       — read-only resolved value ('light' | 'dark' | ...)
// colorMode.unknown     — true during SSR when preference is not yet resolved
// colorMode.forced      — true when the current page forces a specific mode
</script>

<style>
body { background: #fff; color: #111; }
.dark body { background: #091a28; color: #ebf4f1; }
.sepia body { background: #f1e7d0; color: #433422; }
</style>
```

--------------------------------

### Configure Class Suffix in Nuxt 3

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/3.advanced/2.migration.md

When migrating to v4, if you relied on the default '-mode' class suffix, explicitly set it in your nuxt.config.ts. Otherwise, update your CSS classes to remove the suffix.

```typescript
export default defineNuxtConfig({
  colorMode: {
    classSuffix: '-mode'
  }
})
```

--------------------------------

### Tailwind CSS v4 Custom Variant for Dark Mode

Source: https://github.com/nuxt-modules/color-mode/blob/main/docs/content/2.usage/1.basic.md

Configures Tailwind CSS v4 to use a custom variant for dark mode, targeting elements with the `.dark` class. This is necessary to override the default `prefers-color-scheme` media query.

```css
@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.