feat: change theme docs

salute-developers · Nov 2, 2024 · c70d442 · c70d442
1 parent bc66066
commit c70d442
Show file tree

Hide file tree

Showing 9 changed files with 1,237 additions and 2 deletions.
diff --git 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
@@ -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;
+```