diff --git a/vue/configurator/src/components/Configurator.vue b/vue/configurator/src/components/Configurator.vue
index 1aff76f..0a5cdc5 100644
--- a/vue/configurator/src/components/Configurator.vue
+++ b/vue/configurator/src/components/Configurator.vue
@@ -40,6 +40,25 @@
         :key="widgetIndex"
       >
         <h1>{{ widget.name }} Options</h1>
+        <el-row>
+          <el-col :span="6">Widget Theme</el-col>
+          <el-col :span="12">
+            <el-select
+              v-if="widget.widgetTheme"
+              v-model="widget.widgetTheme.value"
+              class="m-2"
+              placeholder="None"
+              size="small"
+            >
+              <el-option
+                v-for="item in widget.widgetTheme.options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-col>
+        </el-row>
         <el-row v-for="(prop, key) in widget.props" :key="key">
           <el-col :span="6">{{ prop.name }}</el-col>
           <el-col :span="12">
@@ -112,6 +131,7 @@
           v-if="widget.dataWidget"
           :id="`widget-${widgetIndex}`"
           :data-widget="widget.dataWidget"
+          :class="widget.widgetTheme ? widget.widgetTheme.value : ''"
         ></div>
         <!-- NOTE: don't load the other widgets since we're assuming mutation observer pattern -->
       </div>
diff --git a/vue/configurator/src/components/lib/WidgetProps.ts b/vue/configurator/src/components/lib/WidgetProps.ts
index b7c214c..ffa3416 100644
--- a/vue/configurator/src/components/lib/WidgetProps.ts
+++ b/vue/configurator/src/components/lib/WidgetProps.ts
@@ -9,6 +9,11 @@ interface WidgetPropOptions {
   label: string;
 }
 
+interface WidgetThemeDefinition {
+  value: string;
+  options: WidgetPropOptions[];
+}
+
 export interface WidgetPropDefinition {
   name: string;
   type: WidgetPropType;
@@ -23,6 +28,7 @@ export interface WidgetDefinition {
   name: string;
   props: { [key: string]: WidgetPropDefinition };
   dataWidget?: string;
+  widgetTheme?: WidgetThemeDefinition;
   javascript: string;
   css: string;
 }
diff --git a/vue/configurator/src/views/ConnectView.vue b/vue/configurator/src/views/ConnectView.vue
index f2543e2..348764f 100644
--- a/vue/configurator/src/views/ConnectView.vue
+++ b/vue/configurator/src/views/ConnectView.vue
@@ -26,6 +26,25 @@ export default class ConnectView extends Vue {
             ...Widgets.connect,
             name: "Connect Widget",
             dataWidget: "m-connect",
+            /* Schemed Utility class definitons for light/dark
+            https://docs.manifold.xyz/v/manifold-for-developers/resources/widgets/manifold-css-variables/scheme-utility-classes */
+            widgetTheme: {
+              value: "",
+              options: [
+                {
+                  value: "manifold-scheme-dark",
+                  label: "Dark",
+                },
+                {
+                  value: "manifold-scheme-light",
+                  label: "Light",
+                },
+                {
+                  value: "",
+                  label: "OS Preference",
+                },
+              ],
+            },
             props: {
               "data-app-name": {
                 name: "App Name",
diff --git a/vue/configurator/src/views/IdentityView.vue b/vue/configurator/src/views/IdentityView.vue
index ed7d46d..c03b959 100644
--- a/vue/configurator/src/views/IdentityView.vue
+++ b/vue/configurator/src/views/IdentityView.vue
@@ -26,6 +26,25 @@ export default class IdentityView extends Vue {
             ...Widgets.identity,
             name: "Wallet Identity Widget",
             dataWidget: "m-wallet-identity",
+            /* Schemed Utility class definitons for light/dark
+            https://docs.manifold.xyz/v/manifold-for-developers/resources/widgets/manifold-css-variables/scheme-utility-classes */
+            widgetTheme: {
+              value: "",
+              options: [
+                {
+                  value: "manifold-scheme-dark",
+                  label: "Dark",
+                },
+                {
+                  value: "manifold-scheme-light",
+                  label: "Light",
+                },
+                {
+                  value: "",
+                  label: "OS Preference",
+                },
+              ],
+            },
             props: {
               "data-wallet": {
                 name: "Wallet address -- required",
diff --git a/vue/configurator/src/views/MarketplaceView.vue b/vue/configurator/src/views/MarketplaceView.vue
index da24da9..e6efa9c 100644
--- a/vue/configurator/src/views/MarketplaceView.vue
+++ b/vue/configurator/src/views/MarketplaceView.vue
@@ -65,6 +65,25 @@ export default class MarketplaceView extends Vue {
             ...Widgets.connect,
             name: "Connect Widget",
             dataWidget: "m-connect",
+            /* Schemed Utility class definitons for light/dark
+            https://docs.manifold.xyz/v/manifold-for-developers/resources/widgets/manifold-css-variables/scheme-utility-classes */
+            widgetTheme: {
+              value: "",
+              options: [
+                {
+                  value: "manifold-scheme-dark",
+                  label: "Dark",
+                },
+                {
+                  value: "manifold-scheme-light",
+                  label: "Light",
+                },
+                {
+                  value: "",
+                  label: "OS Preference",
+                },
+              ],
+            },
             props: {
               "data-delay-auth": {
                 name: "Delay Authentication",
@@ -83,6 +102,25 @@ export default class MarketplaceView extends Vue {
           {
             ...Widgets.marketplace,
             name: "Marketplace Widget",
+            /* Schemed Utility class definitons for light/dark
+            https://docs.manifold.xyz/v/manifold-for-developers/resources/widgets/manifold-css-variables/scheme-utility-classes */
+            widgetTheme: {
+              value: "",
+              options: [
+                {
+                  value: "manifold-scheme-dark",
+                  label: "Dark",
+                },
+                {
+                  value: "manifold-scheme-light",
+                  label: "Light",
+                },
+                {
+                  value: "",
+                  label: "OS Preference",
+                },
+              ],
+            },
             props: {
               "data-widget": {
                 name: "Widget Type",
@@ -172,7 +210,7 @@ export default class MarketplaceView extends Vue {
   right: 40px;
   height: auto;
   width: 180px;
-  border: 2px solid var(--manifold-color-connect--text);
+  border: 2px solid var(--manifold-color-connect--background);
   border-radius: 30px;
   background-color: transparent;
   @media screen and (max-width: 520px) {
@@ -182,24 +220,20 @@ export default class MarketplaceView extends Vue {
     width: 130px;
   }
 }
-#m-connection .m-connection-wallet span {
-  color: var(--manifold-color-connect--text) !important;
-}
+
 #m-connection button {
   display: block !important;
   width: 100% !important;
   height: 60px !important;
-  color: var(--manifold-color-connect--text) !important;
   text-transform: uppercase !important;
   font-size: 11px !important;
   border-radius: 0 !important;
   border: none !important;
-  background: var(--manifold-color-connect--background) !important;
   transition: color 0.3s ease, border 0.3s ease, background 0.3s ease !important;
 }
 #m-connection button:hover {
-  background: var(--manifold-color-connect--hover) !important;
-  color: black !important;
+  background: var(--manifold-theme--color--primary) !important;
+  color: var(--manifold-theme--color--secondary) !important;
 }
 #m-connection div {
   display: block !important;
diff --git a/vue/configurator/src/views/RestrictedTokenView.vue b/vue/configurator/src/views/RestrictedTokenView.vue
index 76145fe..5973e99 100644
--- a/vue/configurator/src/views/RestrictedTokenView.vue
+++ b/vue/configurator/src/views/RestrictedTokenView.vue
@@ -26,6 +26,25 @@ export default class IdentityView extends Vue {
             ...Widgets.restrictedToken,
             name: "Restricted Token Widget",
             dataWidget: "m-restricted-token",
+            /* Schemed Utility class definitons for light/dark
+            https://docs.manifold.xyz/v/manifold-for-developers/resources/widgets/manifold-css-variables/scheme-utility-classes */
+            widgetTheme: {
+              value: "",
+              options: [
+                {
+                  value: "manifold-scheme-dark",
+                  label: "Dark",
+                },
+                {
+                  value: "manifold-scheme-light",
+                  label: "Light",
+                },
+                {
+                  value: "",
+                  label: "OS Preference",
+                },
+              ],
+            },
             props: {
               "data-address": {
                 name: "Contract address -- required",