From 412a8a00b3d5e364cee44d84924f1e85483f8ce3 Mon Sep 17 00:00:00 2001
From: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>
Date: Mon, 16 Sep 2024 16:15:29 +0300
Subject: [PATCH] docs(platforms_and_themes.md): extend appearance override
 info (#7584)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

h2. Описание

см. https://github.com/VKCOM/VKUI/issues/7577#issuecomment-2349355164

h2. Release notes

h2. Документация
- Дополнен блок о переопределение темы через `AppearanceProvider` информацией о тонкостях работы некоторых компонентов.
---
 styleguide/pages/platforms_and_themes.md | 28 ++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/styleguide/pages/platforms_and_themes.md b/styleguide/pages/platforms_and_themes.md
index 322e355f53..fce0c9236a 100644
--- a/styleguide/pages/platforms_and_themes.md
+++ b/styleguide/pages/platforms_and_themes.md
@@ -109,6 +109,34 @@ const appearance = useAppearance();
 <Div>{appearance === 'light' ? 'Out of the blue' : 'And into the black'}</Div>;
 ```
 
+> Стоит иметь ввиду, что некоторые компоненты делегируют цвет фона родителю выше, например, это
+> компонент [Cell](#/Cell) и его производные.
+>
+> На примере [SimpleCell](#/SimpleCell) рассмотрим решение проблемы через допустимое определение
+> фона посредством `className` или `style`:
+>
+> ```jsx static
+> <Group header={<Header>Настройка тем</Header>}>
+>   <SimpleCell before={<Icon20PalleteOutline />}>Системная тема</SimpleCell>
+>   <AppearanceProvider value="dark">
+>     <SimpleCell
+>       before={<Icon20MoonOutline />}
+>       style={{ backgroundColor: 'var(--vkui--color_background_content)' }}
+>     >
+>       Тёмная тема
+>     </SimpleCell>
+>   </AppearanceProvider>
+>   <AppearanceProvider value="light">
+>     <SimpleCell
+>       before={<Icon20SunOutline />}
+>       style={{ backgroundColor: 'var(--vkui--color_background_content)' }}
+>     >
+>       Светлая тема
+>     </SimpleCell>
+>   </AppearanceProvider>
+> </Group>
+> ```
+
 <br/>
 
 ### [@vkontakte/vkui-tokens](https://github.com/VKCOM/vkui-tokens)