---
url: "https://vueda.dev/v3/reference/api/js/stores/storeDarkMode/functions/storeDarkMode.md"
title: "storeDarkMode"
---

# storeDarkMode

## Overview

The store for the current dark mode state, and persisting it.

Usage:
```js
  import { storeDarkMode } from "@vueda";
  const darkMode = storeDarkMode();

  darkMode.isDark; // reactive boolean for dark mode, true if dark mode is enabled

  darkMode.init(); // get dark mode from local storage or prefers
  darkMode.toggle(); // toggle dark mode
```

## Signature

`storeDarkMode(pinia, hot)`

### Parameters

| Name | Type | Required | Description |
| --- | --- | --- | --- |
| <span id="param-pinia">pinia</span> | `Pinia` | no | Pinia instance to retrieve the store |
| <span id="param-hot">hot</span> | `StoreGeneric` | no | dev only hot module replacement |

### Returns

`Store`

## Properties

### $id {#id}

Id of the store. Used by map helpers.

Type: `"darkMode"`

Source: `node_modules/.pnpm/pinia@3.0.4_typescript@5.9.3_vue@3.5.43_typescript@5.9.3_/node_modules/pinia/dist/pinia.d.ts:654`

### isDark {#isDark}

Whether dark mode is on.

Type: `boolean`

Source: `client/lib/stores/storeDarkMode.js:38`

## Methods

- [init](/v3/reference/api/js/stores/storeDarkMode/methods/init.md) - Sets `isDark` from localStorage.
- [toggle](/v3/reference/api/js/stores/storeDarkMode/methods/toggle.md) - Flips `isDark` and saves the new value to localStorage.

## Source

`client/lib/stores/storeDarkMode.js:31`