From 9e6f2b6af11cdade6a87846cc9494d04f26fe227 Mon Sep 17 00:00:00 2001
From: Tim McMackin <tim.mcmackin@webflow.com>
Date: Mon, 13 Apr 2026 12:27:11 -0400
Subject: [PATCH 1/3] DEVREL-2790: Single example for theme APIs

---
 src/examples/styles.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/examples/styles.ts b/src/examples/styles.ts
index 5f51e6d..234db1d 100644
--- a/src/examples/styles.ts
+++ b/src/examples/styles.ts
@@ -341,6 +341,18 @@ export const Styles = {
     },
   },
 
+  ThemeAwareness: {
+    getThemeAndStyles: async () => {
+      // Get the current theme
+      const theme = await webflow.getTheme()
+      console.log('Current theme:', theme)
+
+      // Get the resolved design tokens for the current theme
+      const themeStyles = await webflow.getThemeStyles(theme)
+      console.log('Theme styles:', themeStyles)
+    },
+  },
+
   VariableModes: {
     // Variable Modes
 

From 86e9cf8fd50a0acca3c9bd10ddc2bd8262ffc6ba Mon Sep 17 00:00:00 2001
From: Tim McMackin <tim.mcmackin@webflow.com>
Date: Mon, 13 Apr 2026 12:29:32 -0400
Subject: [PATCH 2/3] Heading is Themes

---
 src/examples/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/examples/styles.ts b/src/examples/styles.ts
index 234db1d..8eb0b51 100644
--- a/src/examples/styles.ts
+++ b/src/examples/styles.ts
@@ -341,7 +341,7 @@ export const Styles = {
     },
   },
 
-  ThemeAwareness: {
+  Themes: {
     getThemeAndStyles: async () => {
       // Get the current theme
       const theme = await webflow.getTheme()

From e55c6a28493cea096ad10d613ea8de216807c5ec Mon Sep 17 00:00:00 2001
From: Tim McMackin <tim.mcmackin@webflow.com>
Date: Mon, 13 Apr 2026 12:32:30 -0400
Subject: [PATCH 3/3] Subscription example

---
 src/examples/styles.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/examples/styles.ts b/src/examples/styles.ts
index 8eb0b51..9eb251e 100644
--- a/src/examples/styles.ts
+++ b/src/examples/styles.ts
@@ -351,6 +351,27 @@ export const Styles = {
       const themeStyles = await webflow.getThemeStyles(theme)
       console.log('Theme styles:', themeStyles)
     },
+
+    subscribeCurrentTheme: async () => {
+      // Set initial theme
+      const theme = await webflow.getTheme()
+      const styles = await webflow.getThemeStyles(theme)
+      console.log('Initial theme:', theme)
+      console.log('Initial theme styles:', styles)
+
+      // Subscribe to theme changes
+      const unsubscribe = webflow.subscribe(
+        'currenttheme',
+        async (newTheme) => {
+          const newStyles = await webflow.getThemeStyles(newTheme)
+          console.log('Theme changed:', newTheme)
+          console.log('New theme styles:', newStyles)
+        },
+      )
+
+      // Stop listening after 10 seconds
+      setTimeout(unsubscribe, 10000)
+    },
   },
 
   VariableModes: {