POC

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte

@@ -1,6 +1,11 @@
 <script>
   import Panel from "components/design/Panel.svelte"
-  import { store, selectedComponent, selectedScreen } from "builderStore"
+  import {
+    store,
+    selectedComponent,
+    selectedScreen,
+    themeStore,
+  } from "builderStore"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
@@ -21,6 +26,21 @@
     $selectedScreen,
     $store.selectedComponentId
   )
+
+  // frontend Constant Themes
+  $: globalBindings = [
+    ...bindings,
+    {
+      type: "context",
+      runtimeBinding: `[device].[theme]`, //app.settings?
+      readableBinding: `App.Theme`,
+      category: "Settings",
+      icon: "Settings",
+      display: { type: "string", name: "Theme" },
+    },
+  ]
+  $: console.log(globalBindings)
+
   $: componentBindings = getComponentBindableProperties(
     $selectedScreen,
     $store.selectedComponentId
@@ -61,24 +81,28 @@
         <ComponentSettingsSection
           {componentInstance}
           {componentDefinition}
-          {bindings}
+          bindings={globalBindings}
           {componentBindings}
           {isScreen}
         />
       {/if}
       {#if section == "styles"}
-        <DesignSection {componentInstance} {componentDefinition} {bindings} />
+        <DesignSection
+          {componentInstance}
+          {componentDefinition}
+          bindings={globalBindings}
+        />
         <CustomStylesSection
           {componentInstance}
           {componentDefinition}
-          {bindings}
+          bindings={globalBindings}
         />
       {/if}
       {#if section == "conditions"}
         <ConditionalUISection
           {componentInstance}
           {componentDefinition}
-          {bindings}
+          bindings={globalBindings}
         />
       {/if}
     </Panel>

packages/client/src/components/context/DeviceBindingsProvider.svelte

@@ -1,6 +1,7 @@
 <script>
   import Provider from "./Provider.svelte"
   import { onMount, onDestroy } from "svelte"
+  import { themeStore } from "stores"
 
   let width = window.innerWidth
   let height = window.innerHeight
@@ -13,11 +14,16 @@
     }
   })
 
+  $: theme = $themeStore.theme
+  $: baseTheme = $themeStore.baseTheme
+
   $: data = {
     mobile: width && width < tabletBreakpoint,
     tablet: width && width >= tabletBreakpoint && width < desktopBreakpoint,
     width,
     height,
+    theme,
+    baseTheme,
   }
 
   onMount(() => {