fix(theme): bring back root classname helper and fix docs (#1633)

gravity-ui · Jun 10, 2024 · ba08c66 · ba08c66
1 parent 6a70f17
commit ba08c66
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -48,8 +48,7 @@ import '@gravity-ui/uikit/styles/styles.css';
 // ...
 ```
 
-UIKit supports different themes: light, dark and their contrast variants. The theme must be applied. To do that either
-wrap your app in `ThemeProvider`:
+UIKit supports different themes: light, dark and their contrast variants. Your app must be rendered inside `ThemeProvider`:
 
 ```js
 import {createRoot} from 'react-dom/client';
@@ -63,32 +62,21 @@ root.render(
 );
 ```
 
-or add specific CSS-classes to the root node:
+It is possible to generate initial root CSS-classes during SSR to avoid theme flashing:
 
-```html
-<!-- index.html -->
+```js
+import {getRootClassName} from '@gravity-ui/uikit/server';
+
+const theme = 'dark';
+const rootClassName = getRootClassName({theme});
+
+const html = `
 <html>
   <body>
-    <div id="root" class="g-root g-root_theme_light"></div>
+    <div id="root" class="${rootClassName}"></div>
   </body>
 </html>
-```
-
-it is possible to generate initial CSS-classes during SSR:
-
-```js
-import {getInitialRootClassName} from '@gravity-ui/uikit';
-
-const theme = 'light';
-const rootClassName = getInitialRootClassName({theme});
-```
-
-```js
-// index.js
-import {createRoot} from 'react-dom/client';
-
-const root = createRoot(document.getElementById('root'));
-root.render(<App />);
+`;
 ```
 
 Also, there is a SCSS [mixins](styles/mixins.scss) file with useful helpers to use in your app.

diff --git a/package.json b/package.json
@@ -39,6 +39,11 @@
             "require": "./build/cjs/unstable.js",
             "import": "./build/esm/unstable.js"
         },
+        "./server": {
+            "types": "./build/esm/server.d.ts",
+            "require": "./build/cjs/server.js",
+            "import": "./build/esm/server.js"
+        },
         "./styles/*": "./styles/*"
     },
     "main": "./build/cjs/index.js",
@@ -60,6 +65,9 @@
             ],
             "unstable": [
                 "./build/esm/unstable.d.ts"
+            ],
+            "server": [
+                "./build/esm/server.d.ts"
             ]
         }
     },

diff --git a/src/components/theme/dom-helpers.ts b/src/components/theme/dom-helpers.ts
@@ -66,3 +66,16 @@ export function updateBodyDirection(direction: Direction) {
         bodyEl.setAttribute('dir', direction);
     }
 }
+
+export const supportsMatchMedia =
+    typeof window !== 'undefined' && typeof window.matchMedia === 'function';
+
+export const getDarkMediaMatch = () => window.matchMedia('(prefers-color-scheme: dark)');
+
+export function getSystemTheme() {
+    if (supportsMatchMedia) {
+        return getDarkMediaMatch().matches ? 'dark' : 'light';
+    } else {
+        return 'light';
+    }
+}
diff --git a/src/components/theme/getDarkMediaMatch.ts b/src/components/theme/getDarkMediaMatch.ts
diff --git a/src/components/theme/getRootClassName.ts b/src/components/theme/getRootClassName.ts
@@ -0,0 +1,14 @@
+import {block} from '../utils/cn';
+
+import {ROOT_CLASSNAME} from './constants';
+import type {RealTheme} from './types';
+
+const b = block(ROOT_CLASSNAME);
+
+interface RootMods {
+    theme?: RealTheme;
+}
+
+export function getRootClassName({theme}: RootMods = {}, className?: string) {
+    return b({theme}, className);
+}
diff --git a/src/components/theme/getSystemTheme.ts b/src/components/theme/getSystemTheme.ts
diff --git a/src/components/theme/useSystemTheme.ts b/src/components/theme/useSystemTheme.ts
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import {getDarkMediaMatch, supportsMatchMedia} from './getDarkMediaMatch';
-import {getSystemTheme} from './getSystemTheme';
+import {getDarkMediaMatch, getSystemTheme, supportsMatchMedia} from './dom-helpers';
 import type {ThemeType} from './types';
 
 function addListener(

diff --git a/src/server.ts b/src/server.ts
@@ -0,0 +1 @@
+export {getRootClassName} from './components/theme/getRootClassName';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export {getRootClassName} from './components/theme/getRootClassName';