Initial commit for the project settings feature

packages/volto-light-theme/src/components/Theming/Theming.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import config from '@plone/volto/registry';
+
+const Theming = ({ content }) => {
+  const theme = content.theme || true;
+  const color1 = content.color1 || 'red';
+  const color2 = content.color2;
+  const color3 = content.color3;
+  const color4 = content.color4;
+
+  return (
+    <>
+      {theme ? (
+        <>
+          {/* <BodyClass className={isSubsite ? 'is-subsite' : null}></BodyClass> */}
+          <BodyClass className={theme ? `theme--${theme}` : null}></BodyClass>
+
+          {theme && (
+            <Helmet>
+              <style>{`
+                :root {
+                  --custom-theme-color1: ${color1};
+                  --custom-theme-color2: ${color2};
+                  --custom-theme-color3: ${color3};
+                  --custom-theme-color4: ${color4};
+              }
+              `}</style>
+            </Helmet>
+          )}
+        </>
+      ) : null}
+    </>
+  );
+};
+
+export default Theming;

packages/volto-light-theme/src/config/slots.tsx

@@ -0,0 +1,12 @@
+import type { ConfigType } from '@plone/registry';
+import Theming from '../components/Theming/Theming';
+
+export default function install(config: ConfigType) {
+  config.registerSlotComponent({
+    slot: 'aboveContent',
+    name: 'Theming',
+    component: Theming,
+  });
+
+  return config;
+}

packages/volto-light-theme/src/index.jsx

@@ -37,6 +37,7 @@ import { tocBlockSchemaEnhancer } from './components/Blocks/Toc/schema';
 import { mapsBlockSchemaEnhancer } from './components/Blocks/Maps/schema';
 import { sliderBlockSchemaEnhancer } from './components/Blocks/Slider/schema';
 import EventMetadataView from './components/Blocks/EventMetadata/View';
+import installSlots from './config/slots';
 
 const BG_COLORS = [
   { name: 'transparent', label: 'Transparent' },
@@ -55,6 +56,8 @@ defineMessages({
 });
 
 const applyConfig = (config) => {
+  installSlots(config);
+
   config.settings.enableAutoBlockGroupingByBackgroundColor = true;
   config.settings.navDepth = 3;
   config.settings.enableFatMenu = true;