From c70d442a11c35a542642b89f012094bad6d65f42 Mon Sep 17 00:00:00 2001
From: Vadim Kudriavtsev <x.kydrik.x@gmail.com>
Date: Tue, 29 Oct 2024 12:56:03 +0300
Subject: [PATCH] feat: change theme docs

---
 packages/themes/plasma-themes/README.md | 137 +++++++++++++++++++++++
 packages/themes/sdds-themes/README.md   | 139 ++++++++++++++++++++++-
 scaffold/template-docs/docs/intro.mdx   | 136 +++++++++++++++++++++++
 website/plasma-b2c-docs/docs/intro.mdx  | 138 +++++++++++++++++++++++
 website/plasma-web-docs/docs/intro.mdx  | 140 +++++++++++++++++++++++-
 website/sdds-cs-docs/docs/intro.mdx     | 137 +++++++++++++++++++++++
 website/sdds-dfa-docs/docs/intro.mdx    | 137 +++++++++++++++++++++++
 website/sdds-insol-docs/docs/intro.mdx  | 138 +++++++++++++++++++++++
 website/sdds-serv-docs/docs/intro.mdx   | 137 +++++++++++++++++++++++
 9 files changed, 1237 insertions(+), 2 deletions(-)

diff --git a/packages/themes/plasma-themes/README.md b/packages/themes/plasma-themes/README.md
index 5afe5b48a5..8f076fc9fc 100644
--- a/packages/themes/plasma-themes/README.md
+++ b/packages/themes/plasma-themes/README.md
@@ -162,3 +162,140 @@ const App = () => {
 
 export default App;
 ```
+
+## Смена тем
+
+Пример на `styled-components`:
+
+```jsx
+import React, { useState } from 'react';
+import { createGlobalStyle } from 'styled-components';
+
+import { Switch } from '@salutejs/plasma-b2c';
+import { plasma_b2c__light, plasma_b2c__dark } from '@salutejs/plasma-themes';
+
+import './style.css';
+
+const LightTheme = createGlobalStyle(plasma_b2c__light);
+const DarkTheme = createGlobalStyle(plasma_b2c__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            {theme === 'light' ? <LightTheme /> : <DarkTheme />}
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => {
+                        setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                    }}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `emotion`:
+
+```jsx
+import React, { useState } from 'react';
+
+import { Global, css } from '@emotion/react';
+import { Switch } from '@salutejs/plasma-b2c';
+import { plasma_b2c__light, plasma_b2c__dark } from '@salutejs/plasma-themes';
+
+import './style.css';
+
+const lightThemeStyle = css(plasma_b2c__light);
+const darkThemeStyle = css(plasma_b2c__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            <Global styles={theme === 'light' ? lightThemeStyle : darkThemeStyle} />
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => setTheme((theme) => (theme === 'light' ? 'dark' : 'light'))}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `css-modules`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/plasma-b2c';
+import webThemes from '@salutejs/plasma-themes/css/plasma_b2c.module.css';
+
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = webThemes[theme];
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
+
+Пример на `css`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/plasma-b2c';
+
+// добавьте импорт в css файл
+// @import '@salutejs/plasma-themes/css/plasma_b2c.module.css';
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = theme;
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
diff --git a/packages/themes/sdds-themes/README.md b/packages/themes/sdds-themes/README.md
index b8d1d55d44..72a1586925 100644
--- a/packages/themes/sdds-themes/README.md
+++ b/packages/themes/sdds-themes/README.md
@@ -10,7 +10,7 @@
 | `sdds_dfa`       | `@salutejs/sdds-dfa`       | [SB Sans Display](https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css), [SB Sans Text](https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css) |
 | `sdds_cs`        | `@salutejs/sdds-cs`        | [SB Sans Display](https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css), [SB Sans Text](https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css) |
 | `sdds_finportal` | `@salutejs/sdds-finportal` | [SB Sans Display](https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css), [SB Sans Text](https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css) |
-| `sdds_insol` | `@salutejs/sdds-insol` | [SB Sans Display](https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css), [SB Sans Text](https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css) |
+| `sdds_insol`     | `@salutejs/sdds-insol`     | [SB Sans Display](https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css), [SB Sans Text](https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css) |
 
 ## Установка и подключение
 
@@ -196,3 +196,140 @@ const App = () => {
 
 export default App;
 ```
+
+## Смена тем
+
+Пример на `styled-components`:
+
+```jsx
+import React, { useState } from 'react';
+import { createGlobalStyle } from 'styled-components';
+
+import { Switch } from '@salutejs/sdds-serv';
+import { sdds_serv__light, sdds_serv__dark } from '@salutejs/sdds-themes';
+
+import './style.css';
+
+const LightTheme = createGlobalStyle(sdds_serv__light);
+const DarkTheme = createGlobalStyle(sdds_serv__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            {theme === 'light' ? <LightTheme /> : <DarkTheme />}
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => {
+                        setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                    }}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `emotion`:
+
+```jsx
+import React, { useState } from 'react';
+
+import { Global, css } from '@emotion/react';
+import { Switch } from '@salutejs/sdds-serv';
+import { sdds_serv__light, sdds_serv__dark } from '@salutejs/sdds-themes';
+
+import './style.css';
+
+const lightThemeStyle = css(sdds_serv__light);
+const darkThemeStyle = css(sdds_serv__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            <Global styles={theme === 'light' ? lightThemeStyle : darkThemeStyle} />
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => setTheme((theme) => (theme === 'light' ? 'dark' : 'light'))}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `css-modules`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/sdds-serv';
+import webThemes from '@salutejs/sdds-themes/css/sdds_serv.module.css';
+
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = webThemes[theme];
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
+
+Пример на `css`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/sdds-serv';
+
+// добавьте импорт в css файл
+// @import '@salutejs/sdds-themes/css/sdds_serv.module.css';
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = theme;
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
diff --git a/scaffold/template-docs/docs/intro.mdx b/scaffold/template-docs/docs/intro.mdx
index dab0e13923..a47cdbec45 100644
--- a/scaffold/template-docs/docs/intro.mdx
+++ b/scaffold/template-docs/docs/intro.mdx
@@ -150,6 +150,142 @@ const App = () => {
 export default App;
 ```
 
+## Смена тем
+
+Пример на `styled-components`:
+
+```jsx
+import React, { useState } from 'react';
+import { createGlobalStyle } from 'styled-components';
+
+import { Switch } from '@salutejs/{{ name }}';
+import { {{ theme }}__light, {{ theme }}__dark } from '@salutejs/{{ vertical }}';
+
+import './style.css';
+
+const LightTheme = createGlobalStyle({{ theme }}__light);
+const DarkTheme = createGlobalStyle({{ theme }}__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            {theme === 'light' ? <LightTheme /> : <DarkTheme />}
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => {
+                        setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                    }}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `emotion`:
+
+```jsx
+import React, { useState } from 'react';
+
+import { Global, css } from '@emotion/react';
+import { Switch } from '@salutejs/{{ name }}';
+import { {{ theme }}__light, {{ theme }}__dark } from '@salutejs/{{ vertical }}';
+
+import './style.css';
+
+const lightThemeStyle = css({{ theme }}__light);
+const darkThemeStyle = css({{ theme }}__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            <Global styles={theme === 'light' ? lightThemeStyle : darkThemeStyle} />
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => setTheme((theme) => (theme === 'light' ? 'dark' : 'light'))}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `css-modules`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/{{ name }}';
+import webThemes from '@salutejs/{{ vertical }}/css/{{ theme }}.module.css';
+
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = webThemes[theme];
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
+
+Пример на `css`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+import { Switch } from '@salutejs/{{ name }}';
+
+// добавьте импорт в css файл
+// @import '@salutejs/{{ vertical }}/css/{{ theme }}.module.css';
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = theme;
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
+
 ### Корень приложения
 
 В корне приложения вызовите компонент глобальных стилей `GlobalStyle`:
diff --git a/website/plasma-b2c-docs/docs/intro.mdx b/website/plasma-b2c-docs/docs/intro.mdx
index 568b25a0ff..a74186307c 100644
--- a/website/plasma-b2c-docs/docs/intro.mdx
+++ b/website/plasma-b2c-docs/docs/intro.mdx
@@ -148,6 +148,144 @@ const App = () => {
 export default App;
 ```
 
+
+## Смена тем
+
+Пример на `styled-components`:
+
+```jsx
+import React, { useState } from 'react';
+import { createGlobalStyle } from 'styled-components';
+
+import { Switch } from '@salutejs/plasma-b2c';
+import { plasma_b2c__light, plasma_b2c__dark } from '@salutejs/plasma-themes';
+
+import './style.css';
+
+const LightTheme = createGlobalStyle(plasma_b2c__light);
+const DarkTheme = createGlobalStyle(plasma_b2c__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            {theme === 'light' ? <LightTheme /> : <DarkTheme />}
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => {
+                        setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                    }}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `emotion`:
+
+```jsx
+import React, { useState } from 'react';
+
+import { Global, css } from '@emotion/react';
+import { Switch } from '@salutejs/plasma-b2c';
+import { plasma_b2c__light, plasma_b2c__dark } from '@salutejs/plasma-themes';
+
+import './style.css';
+
+const lightThemeStyle = css(plasma_b2c__light);
+const darkThemeStyle = css(plasma_b2c__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            <Global styles={theme === 'light' ? lightThemeStyle : darkThemeStyle} />
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => setTheme((theme) => (theme === 'light' ? 'dark' : 'light'))}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `css-modules`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/plasma-b2c';
+import webThemes from '@salutejs/plasma-themes/css/plasma_b2c.module.css';
+
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = webThemes[theme];
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
+
+Пример на `css`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/plasma-b2c';
+
+// добавьте импорт в css файл
+// @import '@salutejs/plasma-themes/css/plasma_b2c.module.css';
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = theme;
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
+
 ### Корень приложения
 
 В корне приложения вызовите компонент глобальных стилей `GlobalStyle`:
diff --git a/website/plasma-web-docs/docs/intro.mdx b/website/plasma-web-docs/docs/intro.mdx
index 91abaa7247..686786b872 100644
--- a/website/plasma-web-docs/docs/intro.mdx
+++ b/website/plasma-web-docs/docs/intro.mdx
@@ -148,6 +148,144 @@ const App = () => {
 export default App;
 ```
 
+
+## Смена тем
+
+Пример на `styled-components`:
+
+```jsx
+import React, { useState } from 'react';
+import { createGlobalStyle } from 'styled-components';
+
+import { Switch } from '@salutejs/plasma-web';
+import { plasma_web__light, plasma_web__dark } from '@salutejs/plasma-themes';
+
+import './style.css';
+
+const LightTheme = createGlobalStyle(plasma_web__light);
+const DarkTheme = createGlobalStyle(plasma_web__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            {theme === 'light' ? <LightTheme /> : <DarkTheme />}
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => {
+                        setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                    }}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `emotion`:
+
+```jsx
+import React, { useState } from 'react';
+
+import { Global, css } from '@emotion/react';
+import { Switch } from '@salutejs/plasma-web';
+import { plasma_web__light, plasma_web__dark } from '@salutejs/plasma-themes';
+
+import './style.css';
+
+const lightThemeStyle = css(plasma_web__light);
+const darkThemeStyle = css(plasma_web__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            <Global styles={theme === 'light' ? lightThemeStyle : darkThemeStyle} />
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => setTheme((theme) => (theme === 'light' ? 'dark' : 'light'))}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `css-modules`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/plasma-web';
+import webThemes from '@salutejs/plasma-themes/css/plasma_web.module.css';
+
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = webThemes[theme];
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
+
+Пример на `css`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/plasma-web';
+
+// добавьте импорт в css файл
+// @import '@salutejs/plasma-themes/css/plasma_web.module.css';
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = theme;
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
+
 ### Корень приложения
 
 В корне приложения вызовите компонент глобальных стилей `GlobalStyle`:
@@ -327,4 +465,4 @@ export default function App() {
         </AppStyled>
     );
 }
-```
\ No newline at end of file
+```
diff --git a/website/sdds-cs-docs/docs/intro.mdx b/website/sdds-cs-docs/docs/intro.mdx
index db69a9279a..b8b189333d 100644
--- a/website/sdds-cs-docs/docs/intro.mdx
+++ b/website/sdds-cs-docs/docs/intro.mdx
@@ -150,6 +150,143 @@ const App = () => {
 export default App;
 ```
 
+## Смена тем
+
+Пример на `styled-components`:
+
+```jsx
+import React, { useState } from 'react';
+import { createGlobalStyle } from 'styled-components';
+
+import { Switch } from '@salutejs/sdds-cs';
+import { sdds_cs__light, sdds_cs__dark } from '@salutejs/sdds-themes';
+
+import './style.css';
+
+const LightTheme = createGlobalStyle(sdds_cs__light);
+const DarkTheme = createGlobalStyle(sdds_cs__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            {theme === 'light' ? <LightTheme /> : <DarkTheme />}
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => {
+                        setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                    }}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `emotion`:
+
+```jsx
+import React, { useState } from 'react';
+
+import { Global, css } from '@emotion/react';
+import { Switch } from '@salutejs/sdds-cs';
+import { sdds_cs__light, sdds_cs__dark } from '@salutejs/sdds-themes';
+
+import './style.css';
+
+const lightThemeStyle = css(sdds_cs__light);
+const darkThemeStyle = css(sdds_cs__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            <Global styles={theme === 'light' ? lightThemeStyle : darkThemeStyle} />
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => setTheme((theme) => (theme === 'light' ? 'dark' : 'light'))}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `css-modules`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/sdds-cs';
+import webThemes from '@salutejs/sdds-themes/css/sdds_cs.module.css';
+
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = webThemes[theme];
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
+
+Пример на `css`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/sdds-cs';
+
+// добавьте импорт в css файл
+// @import '@salutejs/sdds-themes/css/sdds_cs.module.css';
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = theme;
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
+
 ### Корень приложения
 
 В корне приложения вызовите компонент глобальных стилей `GlobalStyle`:
diff --git a/website/sdds-dfa-docs/docs/intro.mdx b/website/sdds-dfa-docs/docs/intro.mdx
index 82151625b0..e522edd639 100644
--- a/website/sdds-dfa-docs/docs/intro.mdx
+++ b/website/sdds-dfa-docs/docs/intro.mdx
@@ -144,6 +144,143 @@ const App = () => {
 export default App;
 ```
 
+## Смена тем
+
+Пример на `styled-components`:
+
+```jsx
+import React, { useState } from 'react';
+import { createGlobalStyle } from 'styled-components';
+
+import { Switch } from '@salutejs/sdds-dfa';
+import { sdds_dfa__light, sdds_dfa__dark } from '@salutejs/sdds-themes';
+
+import './style.css';
+
+const LightTheme = createGlobalStyle(sdds_dfa__light);
+const DarkTheme = createGlobalStyle(sdds_dfa__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            {theme === 'light' ? <LightTheme /> : <DarkTheme />}
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => {
+                        setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                    }}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `emotion`:
+
+```jsx
+import React, { useState } from 'react';
+
+import { Global, css } from '@emotion/react';
+import { Switch } from '@salutejs/sdds-dfa';
+import { sdds_dfa__light, sdds_dfa__dark } from '@salutejs/sdds-themes';
+
+import './style.css';
+
+const lightThemeStyle = css(sdds_dfa__light);
+const darkThemeStyle = css(sdds_dfa__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            <Global styles={theme === 'light' ? lightThemeStyle : darkThemeStyle} />
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => setTheme((theme) => (theme === 'light' ? 'dark' : 'light'))}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `css-modules`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/sdds-dfa';
+import webThemes from '@salutejs/sdds-themes/css/sdds_dfa.module.css';
+
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = webThemes[theme];
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
+
+Пример на `css`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/sdds-dfa';
+
+// добавьте импорт в css файл
+// @import '@salutejs/sdds-themes/css/sdds_dfa.module.css';
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = theme;
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
+
 ### Корень приложения
 
 В корне приложения вызовите компонент глобальных стилей `GlobalStyle`:
diff --git a/website/sdds-insol-docs/docs/intro.mdx b/website/sdds-insol-docs/docs/intro.mdx
index 557f2f6dbb..deba84ea59 100644
--- a/website/sdds-insol-docs/docs/intro.mdx
+++ b/website/sdds-insol-docs/docs/intro.mdx
@@ -150,6 +150,144 @@ const App = () => {
 export default App;
 ```
 
+
+## Смена тем
+
+Пример на `styled-components`:
+
+```jsx
+import React, { useState } from 'react';
+import { createGlobalStyle } from 'styled-components';
+
+import { Switch } from '@salutejs/sdds-insol';
+import { sdds_insol__light, sdds_insol__dark } from '@salutejs/sdds-themes';
+
+import './style.css';
+
+const LightTheme = createGlobalStyle(sdds_insol__light);
+const DarkTheme = createGlobalStyle(sdds_insol__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            {theme === 'light' ? <LightTheme /> : <DarkTheme />}
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => {
+                        setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                    }}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `emotion`:
+
+```jsx
+import React, { useState } from 'react';
+
+import { Global, css } from '@emotion/react';
+import { Switch } from '@salutejs/sdds-insol';
+import { sdds_insol__light, sdds_insol__dark } from '@salutejs/sdds-themes';
+
+import './style.css';
+
+const lightThemeStyle = css(sdds_insol__light);
+const darkThemeStyle = css(sdds_insol__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            <Global styles={theme === 'light' ? lightThemeStyle : darkThemeStyle} />
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => setTheme((theme) => (theme === 'light' ? 'dark' : 'light'))}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `css-modules`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/sdds-insol';
+import webThemes from '@salutejs/sdds-themes/css/sdds_insol.module.css';
+
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = webThemes[theme];
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
+
+Пример на `css`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/sdds-insol';
+
+// добавьте импорт в css файл
+// @import '@salutejs/sdds-themes/css/sdds_insol.module.css';
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = theme;
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
+
 ### Корень приложения
 
 В корне приложения вызовите компонент глобальных стилей `GlobalStyle`:
diff --git a/website/sdds-serv-docs/docs/intro.mdx b/website/sdds-serv-docs/docs/intro.mdx
index aaea1d85a6..97fdfb2b22 100644
--- a/website/sdds-serv-docs/docs/intro.mdx
+++ b/website/sdds-serv-docs/docs/intro.mdx
@@ -150,6 +150,143 @@ const App = () => {
 export default App;
 ```
 
+## Смена тем
+
+Пример на `styled-components`:
+
+```jsx
+import React, { useState } from 'react';
+import { createGlobalStyle } from 'styled-components';
+
+import { Switch } from '@salutejs/sdds-serv';
+import { sdds_serv__light, sdds_serv__dark } from '@salutejs/sdds-themes';
+
+import './style.css';
+
+const LightTheme = createGlobalStyle(sdds_serv__light);
+const DarkTheme = createGlobalStyle(sdds_serv__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            {theme === 'light' ? <LightTheme /> : <DarkTheme />}
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => {
+                        setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                    }}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `emotion`:
+
+```jsx
+import React, { useState } from 'react';
+
+import { Global, css } from '@emotion/react';
+import { Switch } from '@salutejs/sdds-serv';
+import { sdds_serv__light, sdds_serv__dark } from '@salutejs/sdds-themes';
+
+import './style.css';
+
+const lightThemeStyle = css(sdds_serv__light);
+const darkThemeStyle = css(sdds_serv__dark);
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    return (
+        <>
+            <Global styles={theme === 'light' ? lightThemeStyle : darkThemeStyle} />
+
+            <div className="wrapper">
+                <Switch
+                    label="dark theme: "
+                    onChange={() => setTheme((theme) => (theme === 'light' ? 'dark' : 'light'))}
+                />
+            </div>
+        </>
+    );
+};
+
+export default App;
+```
+
+Пример на `css-modules`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/sdds-serv';
+import webThemes from '@salutejs/sdds-themes/css/sdds_serv.module.css';
+
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = webThemes[theme];
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
+
+Пример на `css`:
+
+```jsx
+import React, { useLayoutEffect, useState } from 'react';
+
+import { Switch } from '@salutejs/sdds-serv';
+
+// добавьте импорт в css файл
+// @import '@salutejs/sdds-themes/css/sdds_serv.module.css';
+import './style.css';
+
+const App = () => {
+    const [theme, setTheme] = useState('light');
+
+    useLayoutEffect(() => {
+        document.documentElement.className = theme;
+    }, [theme]);
+
+    return (
+        <div className="wrapper">
+            <Switch
+                label="dark theme: "
+                onChange={() => {
+                    setTheme((theme) => (theme === 'light' ? 'dark' : 'light'));
+                }}
+            />
+        </div>
+    );
+};
+
+export default App;
+```
+
 ### Корень приложения
 
 В корне приложения вызовите компонент глобальных стилей `GlobalStyle`: