Merge pull request #11617 from Budibase/lab-theme-binding

App Theme binding added

packages/builder/src/builderStore/dataBinding.js

@@ -504,22 +504,33 @@ const getDeviceBindings = () => {
   let bindings = []
   if (get(store).clientFeatures?.deviceAwareness) {
     const safeDevice = makePropSafe("device")
-    bindings.push({
-      type: "context",
-      runtimeBinding: `${safeDevice}.${makePropSafe("mobile")}`,
-      readableBinding: `Device.Mobile`,
-      category: "Device",
-      icon: "DevicePhone",
-      display: { type: "boolean", name: "mobile" },
-    })
-    bindings.push({
-      type: "context",
-      runtimeBinding: `${safeDevice}.${makePropSafe("tablet")}`,
-      readableBinding: `Device.Tablet`,
-      category: "Device",
-      icon: "DevicePhone",
-      display: { type: "boolean", name: "tablet" },
-    })
+
+    bindings = [
+      {
+        type: "context",
+        runtimeBinding: `${safeDevice}.${makePropSafe("mobile")}`,
+        readableBinding: `Device.Mobile`,
+        category: "Device",
+        icon: "DevicePhone",
+        display: { type: "boolean", name: "mobile" },
+      },
+      {
+        type: "context",
+        runtimeBinding: `${safeDevice}.${makePropSafe("tablet")}`,
+        readableBinding: `Device.Tablet`,
+        category: "Device",
+        icon: "DevicePhone",
+        display: { type: "boolean", name: "tablet" },
+      },
+      {
+        type: "context",
+        runtimeBinding: `${safeDevice}.${makePropSafe("theme")}`,
+        readableBinding: `App.Theme`,
+        category: "Device",
+        icon: "DevicePhone",
+        display: { type: "string", name: "App Theme" },
+      },
+    ]
   }
   return bindings
 }

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

@@ -21,6 +21,7 @@
     $selectedScreen,
     $store.selectedComponentId
   )
+
   $: componentBindings = getComponentBindableProperties(
     $selectedScreen,
     $store.selectedComponentId

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,14 @@
     }
   })
 
+  $: theme = $themeStore.theme
+
   $: data = {
     mobile: width && width < tabletBreakpoint,
     tablet: width && width >= tabletBreakpoint && width < desktopBreakpoint,
     width,
     height,
+    theme,
   }
 
   onMount(() => {