Chakra UI v3 className="dark" не переопределяет цветовой режим ⇐ Javascript

[Anonymous]

Документация по пользовательскому интерфейсу Chakra, https://chakra-ui.com/docs/styling/dark-mode, гласит следующее:

Чтобы принудительно включить темный режим, установите темное имя класса для любого родительского элемента или корневого элемента вашего приложения.

Код: Выделить всё

Hello

Однако, насколько я могу судить, это вообще не работает. Вот что у меня получилось с помощью Next JS:
Импортировал фрагмент цветового режима

Код: Выделить всё

npm i @chakra-ui/cli snippet add color-mode --save

Обернул свой макет в ChakraProvider, который включает ColorModeProvider:
Provider:

Код: Выделить всё

'use client'

import { ChakraProvider } from '@chakra-ui/react';
import System from '../global/System';
import { ColorModeProvider } from './color-mode';

export function Provider( props ) {
return (



);
}

Система выглядит так:

Код: Выделить всё

import { createSystem, defaultConfig, defineConfig } from '@chakra-ui/react';

const config = defineConfig({
globalCss: {
body: {
color: { base: 'gray.800', _dark: 'gray.200' },
},
},

});

export default createSystem( defaultConfig, config );

И, наконец, мой макет имеет следующее:

Код: Выделить всё

import { ColorModeButton } from '@/client/components/ui/color-mode';
import { Provider } from '@/client/components/ui/provider';
import { Box, Text } from '@chakra-ui/react';

export default function() {
return (




Default
Light
Dark





);
};

Все три компонента «Текст» отображают текст одинакового цвета. ColorModeButton при нажатии также меняет текст всех трех текстовых полей, тогда как я ожидал бы, что он изменит только текст «по умолчанию».
Если я устанавливаю для поставщика для принудительной темы светлый или темный цвет, ожидаемая тема применяется ко всем трем компонентам текста. ColorModeButton больше ничего не делает в этом случае, что, по моему мнению, и ожидалось.
Несмотря на то, что говорится в документации, я не уверен, что это работает, или для этого требуется какая-то неясная, недокументированная конфигурация.

Подробнее здесь: https://stackoverflow.com/questions/797 ... color-mode