@salutejs/sdds-themes 0.27.0-dev.0 → 0.27.0

package/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;
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/sdds-themes",
-  "version": "0.27.0-dev.0",
+  "version": "0.27.0",
   "description": "Sdds-themes package",
   "author": "Salute Frontend Team <salute.developers@gmail.com>",
   "license": "MIT",
@@ -42,5 +42,5 @@
     "Vasiliy Loginevskiy"
   ],
   "sideEffects": false,
-  "gitHead": "fa06606a1d550a393806ded8b8b345605e214e81"
+  "gitHead": "d002b408031d4d154a5626691240fc19ec3e7a6d"
 }