Add subsite class to body

src/components/theme/SubsiteClass.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import cx from 'classnames';
+import { useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+
+import { BodyClass } from '@plone/volto/helpers';
+import { isSubsiteRoot } from 'volto-subsites/utils';
+
+const SubsiteClass = () => {
+  const subsite = useSelector(
+    (state) => state.content?.data?.['@components']?.subsite || {},
+  );
+  const location = useLocation();
+
+  return (
+    <BodyClass
+      className={cx('subsite', `subsite-${subsite.subsite_css_class?.token}`, {
+        'subsite-root': isSubsiteRoot(location.pathname, subsite),
+      })}
+    />
+  );
+};
+export default SubsiteClass;

src/index.js

@@ -4,6 +4,7 @@ import installCustomTitle from '@eeacms/volto-eea-website-theme/components/manag
 import CustomCSS from '@eeacms/volto-eea-website-theme/components/theme/CustomCSS/CustomCSS';
 import DraftBackground from '@eeacms/volto-eea-website-theme/components/theme/DraftBackground/DraftBackground';
 import { TokenWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TokenWidget';
+import SubsiteClass from './components/theme/SubsiteClass';
 import HomePageView from '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageView';
 import HomePageInverseView from '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageInverseView';
 import { Icon } from '@plone/volto/components';
@@ -81,6 +82,10 @@ const applyConfig = (config) => {
       match: '',
       component: DraftBackground,
     },
+    {
+      match: '',
+      component: SubsiteClass,
+    },
   ];
 
   if (config.settings.slate) {