> For the complete documentation index, see [llms.txt](https://docs.vechainkit.vechain.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vechainkit.vechain.org/troubleshooting/styling-issues/chakra-v3-host.md).

# Chakra v3 host: useToken returns a snapshot

If your app is on Chakra UI v3 and you pipe its theme tokens into the Kit's `theme` prop, you may see the Kit's modal stuck on light or dark colors no matter how you toggle the host theme. The Kit isn't broken — Chakra v3's `useToken` is returning a literal color snapshot, not a CSS variable reference.

### Symptom

* `next-themes` (or any class-based theming) toggles `html.class="dark"` correctly
* The host's own surfaces re-render (CSS variables resolve to the new mode)
* But the Kit's modal, card, sticky header, and other surfaces are stuck on whatever color was active when the page first hydrated
* Only Kit components that read `useVeChainKitConfig().darkMode` directly (e.g. the VeWorld button) update after a toggle

### Root cause

Chakra UI v3's `useToken` returns the **resolved value** at call time, not the CSS variable reference:

```js
// node_modules/@chakra-ui/react/dist/esm/styled-system/system.js
const tokenFn = (path, fallback) => tokenMap.get(path)?.value || fallback;
tokenFn.var = (path, fallback) => tokenMap.get(path)?.variable || fallback;
```

A wrapper like:

```tsx
// ❌ Snapshots the resolved color at render time
const [bgPrimary] = useToken('colors', ['bg.primary'])
// bgPrimary === '#1B1D1F'    when Chakra evaluated bg.primary in dark scope
// bgPrimary === 'white'      when it evaluated in light scope
```

is darkMode-frozen by the time the value reaches the Kit. The Kit receives a literal color and has no way to know it was meant to be reactive.

### Fix

Pass the **CSS variable reference** to the Kit so the underlying color stays governed by `html.class`. Two equivalent options:

#### Option A — use Chakra v3's `sys.token.var(...)` resolver

```tsx
import { useChakraContext } from '@chakra-ui/react'

const sys = useChakraContext()
const tokVar = (path: string) => sys.token.var(`colors.${path}`) as string

const bgPrimary       = tokVar('bg.primary')
const primaryDefault  = tokVar('actions.primary.default')
const primaryText     = tokVar('actions.primary.text')
const primaryHover    = tokVar('actions.primary.hover')
const secondaryDefault = tokVar('card.subtle')
const secondaryHover  = tokVar('card.hover')
const borderSecondary = tokVar('border.secondary')

// bgPrimary === 'var(--vbd-colors-bg-primary)'
```

#### Option B — hardcode the CSS variable

If your `cssVarsPrefix` is fixed:

```tsx
const bgPrimary = 'var(--vbd-colors-bg-primary)'
const primaryDefault = 'var(--vbd-colors-actions-primary-default)'
// …etc
```

Either way, the Kit's CSS variables now point at your host's variables, and the underlying color flips at paint time whenever `html.class` flips. No re-render needed.

### How to verify

Open the connect or account modal in light mode, then in DevTools inspect:

```
--chakra-colors-vechain-kit-modal      ← should equal var(--your-prefix-...) or a CSS variable
--your-prefix-colors-bg-primary        ← should switch between values on theme toggle
```

If `--chakra-colors-vechain-kit-modal` resolves to a hex literal like `#1B1D1F` when the host is in light mode, your wrapper is still using `useToken(...).value`. Switch to `sys.token.var(...)`.

### Reference reproduction

The `examples/next-chakra-v3` workspace in [vechain/vechain-kit](https://github.com/vechain/vechain-kit) mirrors this exact host stack (Next.js + React 18 + Chakra v3 + next-themes) and demonstrates the correct wrapper pattern.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.vechainkit.vechain.org/troubleshooting/styling-issues/chakra-v3-host.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.