diff --git a/src/platform/web/ThemeBuilder.ts b/src/platform/web/ThemeBuilder.ts
index b6f75be4..8035fe84 100644
--- a/src/platform/web/ThemeBuilder.ts
+++ b/src/platform/web/ThemeBuilder.ts
@@ -19,6 +19,7 @@ import {ColorSchemePreference} from "./ThemeLoader";
 import {IconColorizer} from "./IconColorizer";
 import {DerivedVariables} from "./DerivedVariables";
 import {ThemeManifest} from "../types/theme";
+import {ILogItem} from "../../logging/types";
 
 export class ThemeBuilder {
     private _idToManifest: Map<string, {manifest: ThemeManifest, location: string}>;
@@ -33,60 +34,64 @@ export class ThemeBuilder {
         this._platform = platform;
     }
 
-    async populateDerivedTheme(manifest: ThemeManifest) {
-        const { manifest: baseManifest, location } = this._idToManifest.get(manifest.extends!)!;
-        const { cssLocation, derivedVariables, icons } = this._getsourceData(baseManifest, location);
-        const themeName = manifest.name;
-        if (!themeName) {
-            throw new Error(`Theme name not found in manifest!`);
-        }
-        let defaultDarkVariant: any = {}, defaultLightVariant: any = {};
-        for (const [variant, variantDetails] of Object.entries(manifest.values?.variants!) as [string, any][]) {
-            try {
-                const themeId = `${manifest.id}-${variant}`;
-                const { name: variantName, default: isDefault, dark, variables } = variantDetails;
-                const resolvedVariables = new DerivedVariables(variables, derivedVariables, dark).toVariables();
-                Object.assign(variables, resolvedVariables);
-                const iconVariables = await new IconColorizer(this._platform, icons, variables, location).toVariables();
-                Object.assign(variables, resolvedVariables, iconVariables);
-                const themeDisplayName = `${themeName} ${variantName}`;
-                if (isDefault) {
-                    const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant;
-                    Object.assign(defaultVariant, { variantName, id: themeId, cssLocation, variables });
+    async populateDerivedTheme(manifest: ThemeManifest, log: ILogItem) {
+        await log.wrap("ThemeBuilder.populateThemeMap", async (l) => {
+            const {manifest: baseManifest, location} = this._idToManifest.get(manifest.extends!)!;
+            const {cssLocation, derivedVariables, icons} = this._getSourceData(baseManifest, location, log);
+            const themeName = manifest.name;
+            if (!themeName) {
+                throw new Error(`Theme name not found in manifest!`);
+            }
+            let defaultDarkVariant: any = {}, defaultLightVariant: any = {};
+            for (const [variant, variantDetails] of Object.entries(manifest.values?.variants!) as [string, any][]) {
+                try {
+                    const themeId = `${manifest.id}-${variant}`;
+                    const { name: variantName, default: isDefault, dark, variables } = variantDetails;
+                    const resolvedVariables = new DerivedVariables(variables, derivedVariables, dark).toVariables();
+                    Object.assign(variables, resolvedVariables);
+                    const iconVariables = await new IconColorizer(this._platform, icons, variables, location).toVariables();
+                    Object.assign(variables, resolvedVariables, iconVariables);
+                    const themeDisplayName = `${themeName} ${variantName}`;
+                    if (isDefault) {
+                        const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant;
+                        Object.assign(defaultVariant, { variantName, id: themeId, cssLocation, variables });
+                        continue;
+                    }
+                    this._themeMapping[themeDisplayName] = { cssLocation, id: themeId, variables: variables, };
+                }
+                catch (e) {
+                    console.error(e);
                     continue;
                 }
-                this._themeMapping[themeDisplayName] = { cssLocation, id: themeId, variables: variables, };
             }
-            catch (e) {
-                console.error(e);
-                continue;
+            if (defaultDarkVariant.id && defaultLightVariant.id) {
+                const defaultVariant = this._preferredColorScheme === ColorSchemePreference.Dark ? defaultDarkVariant : defaultLightVariant;
+                this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant, default: defaultVariant };
             }
-        }
-        if (defaultDarkVariant.id && defaultLightVariant.id) {
-            const defaultVariant = this._preferredColorScheme === ColorSchemePreference.Dark ? defaultDarkVariant : defaultLightVariant;
-            this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant, default: defaultVariant };
-        }
-        else {
-            const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant;
-            this._themeMapping[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation };
-        }
+            else {
+                const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant;
+                this._themeMapping[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation };
+            }
+        });
     }
 
-    private _getsourceData(manifest: ThemeManifest, location: string) {
-        const runtimeCSSLocation = manifest.source?.["runtime-asset"];
-        if (!runtimeCSSLocation) {
-            throw new Error(`Run-time asset not found in source section for theme at ${location}`);
-        }
-        const cssLocation = new URL(runtimeCSSLocation, new URL(location, window.location.origin)).href;
-        const derivedVariables = manifest.source?.["derived-variables"];
-        if (!derivedVariables) {
-            throw new Error(`Derived variables not found in source section for theme at ${location}`);
-        }
-        const icons = manifest.source?.["icon"];
-        if (!icons) {
-            throw new Error(`Icon mapping not found in source section for theme at ${location}`);
-        }
-        return { cssLocation, derivedVariables, icons };
+    private _getSourceData(manifest: ThemeManifest, location: string, log:ILogItem) {
+        return log.wrap("getSourceData", () => {
+            const runtimeCSSLocation = manifest.source?.["runtime-asset"];
+            if (!runtimeCSSLocation) {
+                throw new Error(`Run-time asset not found in source section for theme at ${location}`);
+            }
+            const cssLocation = new URL(runtimeCSSLocation, new URL(location, window.location.origin)).href;
+            const derivedVariables = manifest.source?.["derived-variables"];
+            if (!derivedVariables) {
+                throw new Error(`Derived variables not found in source section for theme at ${location}`);
+            }
+            const icons = manifest.source?.["icon"];
+            if (!icons) {
+                throw new Error(`Icon mapping not found in source section for theme at ${location}`);
+            }
+            return { cssLocation, derivedVariables, icons };
+         });
     }
 
     get themeMapping() {
diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts
index c04d8e8c..da5f9658 100644
--- a/src/platform/web/ThemeLoader.ts
+++ b/src/platform/web/ThemeLoader.ts
@@ -64,7 +64,7 @@ export class ThemeLoader {
                 const { body } = results[i];
                 try {
                     if (body.extends) {
-                        await this._themeBuilder.populateDerivedTheme(body);
+                        await this._themeBuilder.populateDerivedTheme(body, log);
                     }
                     else {
                         this._populateThemeMap(body, manifestLocations[i], log);
@@ -183,6 +183,7 @@ export class ThemeLoader {
             }
             this._platform.replaceStylesheet(cssLocation);
             if (variables) {
+                log?.log({l: "Derived Theme", variables});
                 this._themeBuilder.injectCSSVariables(variables);
             }
             else {