From 728f80fb5504ebbd3c6e47bc56154e5fad632a56 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/4] 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 ead15f6..52562ea 100644
--- a/src/examples/styles.ts
+++ b/src/examples/styles.ts
@@ -409,6 +409,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 6b7806694aba28c4ee62dfdb4bc0fdb2541bfcf0 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/4] 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 52562ea..149586c 100644
--- a/src/examples/styles.ts
+++ b/src/examples/styles.ts
@@ -409,7 +409,7 @@ export const Styles = {
     },
   },
 
-  ThemeAwareness: {
+  Themes: {
     getThemeAndStyles: async () => {
       // Get the current theme
       const theme = await webflow.getTheme()

From 71ca422126ce8b89d614d1a82a0c30d8f4c3ad91 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/4] 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 149586c..ae6efaf 100644
--- a/src/examples/styles.ts
+++ b/src/examples/styles.ts
@@ -419,6 +419,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: {

From 35bf863e21d4f9c8d585ba9ef73806330db748a7 Mon Sep 17 00:00:00 2001
From: Tim McMackin <tim.mcmackin@webflow.com>
Date: Mon, 18 May 2026 09:18:55 -0400
Subject: [PATCH 4/4] Retcon display names

---
 src/examples/styles.ts | 60 +++++++++++++++++++++++-------------------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/examples/styles.ts b/src/examples/styles.ts
index ae6efaf..9e7553b 100644
--- a/src/examples/styles.ts
+++ b/src/examples/styles.ts
@@ -410,35 +410,41 @@ export const Styles = {
   },
 
   Themes: {
-    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)
+    getThemeAndStyles:  {
+      displayName: 'Get theme and styles',
+      code: 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)
+      },
     },
 
-    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)
+    subscribeCurrentTheme: {
+      displayName: 'Subscribe to theme changes',
+      code: 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)
+      },
     },
   },