gravity-ui · Raubzeug · Jan 12, 2024 · Jan 12, 2024
diff --git a/README.md b/README.md
@@ -67,6 +67,8 @@ interface RenderParams<Data, Plugins> {
 
   // content of body tag
   bodyContent?: {
+    // initial application theme if @gravity-ui/uikit is used
+    theme?: string;
     // class name for body tag
     className?: string;
     // body content before div tag with id root
@@ -252,6 +254,7 @@ interface RenderContent {
   inlineScripts: string[];
   inlineStyleSheets: string[];
   bodyContent: {
+    theme?: string;
     className: string[];
     beforeRoot: string[];
     root?: string;

diff --git a/src/render.test.ts b/src/render.test.ts
@@ -21,3 +21,28 @@ test('should render root content', () => {
         /<div id="root">\s*content\s*<\/div>/,
     );
 });
+
+test('should render body classes', () => {
+    expect(
+        createRenderFunction()({
+            title: 'Foobar',
+            bodyContent: {root: 'content', className: 'test'},
+        }),
+    ).toMatch(/<body class="test">\s*<div id="root">\s*content\s*<\/div>\s*<\/body>/);
+    expect(
+        createRenderFunction()({
+            title: 'Foobar',
+            bodyContent: {root: 'content', theme: 'light'},
+        }),
+    ).toMatch(
+        /<body class="g-root g-root_theme_light">\s*<div id="root">\s*content\s*<\/div>\s*<\/body>/,
+    );
+    expect(
+        createRenderFunction()({
+            title: 'Foobar',
+            bodyContent: {root: 'content', className: 'test', theme: 'light'},
+        }),
+    ).toMatch(
+        /<body class="g-root g-root_theme_light test">\s*<div id="root">\s*content\s*<\/div>\s*<\/body>/,
+    );
+});
diff --git a/src/render.ts b/src/render.ts
@@ -2,6 +2,17 @@ import htmlescape from 'htmlescape';
 import {attrs, getRenderHelpers, hasProperty} from './utils.js';
 import type {Icon, Meta, RenderParams, Plugin, RenderContent} from './types.js';
 
+function getRootClassName(theme?: string) {
+    if (!theme) {
+        return [];
+    }
+    const classes = ['g-root'];
+    if (theme) {
+        classes.push(`g-root_theme_${theme}`);
+    }
+    return classes;
+}
+
 const defaultIcon: Icon = {
     type: 'image/png',
     sizes: '16x16',
@@ -37,8 +48,12 @@ export function generateRenderContent<Plugins extends Plugin[], Data>(
     inlineScripts.unshift(`window.__DATA__ = ${htmlescape(params.data || {})};`);
 
     const content = params.bodyContent ?? {};
+    const {theme, className} = content;
+    const bodyClasses = Array.from(
+        new Set([...getRootClassName(theme), ...(className ? className.split(' ') : [])]),
+    );
     const bodyContent = {
-        className: content.className ? [content.className] : [],
+        className: bodyClasses,
         root: content.root,
         beforeRoot: content.beforeRoot ? [content.beforeRoot] : [],
         afterRoot: content.afterRoot ? [content.afterRoot] : [],

diff --git a/src/types.ts b/src/types.ts
@@ -59,7 +59,7 @@
    renderMeta(meta: Meta): string;
    renderLink(link: Link): string;
 }
 export interface Plugin<Options = any, Name extends string = string> {
    name: Name;
    apply: (params: {
        options: Options | undefined;
@@ -80,6 +80,7 @@
     inlineScripts?: string[];
     inlineStyleSheets?: string[];
     bodyContent?: {
+        theme?: string;
         className?: string;
         beforeRoot?: string;
         root?: string;
@@ -96,7 +97,7 @@
    ? {[K in Name & string]: Options}
    : {};

 type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void
    ? I
    : never;