diff --git a/addons/website/static/src/js/widgets/theme.js b/addons/website/static/src/js/widgets/theme.js
index 43fe42588e1..0a3571080a2 100644
--- a/addons/website/static/src/js/widgets/theme.js
+++ b/addons/website/static/src/js/widgets/theme.js
@@ -325,17 +325,25 @@ var ThemeCustomizeDialog = Dialog.extend({
                         var xmlid = $item.data('xmlid');
 
                         var renderingOptions = _.extend({
-                            string: $item.attr('string') || data.names[xmlid.split(',')[0].trim()],
+                            string: $item.attr('string') || xmlid && data.names[xmlid.split(',')[0].trim()],
                             icon: $item.data('icon'),
                             font: $item.data('font'),
                         }, $item.data());
 
+                        var checked;
+                        if (widgetName === 'auto') {
+                            var propValue = self.style.getPropertyValue('--' + $item.data('variable')).trim();
+                            checked = (propValue === $item.attr('data-value'));
+                        } else {
+                            checked = (xmlid === undefined || xmlid && !_.difference(self._getXMLIDs($item), data.enabled).length);
+                        }
+
                         // Build the options template
                         $element = $(core.qweb.render('website.theme_customize_modal_option', _.extend({
                             alone: alone,
-                            name: xmlid === undefined ? _.uniqueId('option-') : optionsName,
+                            name: xmlid === undefined && widgetName !== 'auto' ? _.uniqueId('option-') : optionsName,
                             id: $item.attr('id') || _.uniqueId('o_theme_customize_input_id_'),
-                            checked: xmlid === undefined || xmlid && (!_.difference(self._getXMLIDs($item), data.enabled).length),
+                            checked: checked,
                             widget: widgetName,
                         }, renderingOptions)));
                         $element.find('input')
@@ -508,6 +516,16 @@ var ThemeCustomizeDialog = Dialog.extend({
             return self._quickEdit($(inputData));
         }));
 
+        // Handle auto changes
+        var $autoWidgetOptions = $options.has('.o_theme_customize_auto');
+        if ($autoWidgetOptions.length > 1) {
+            $autoWidgetOptions = $autoWidgetOptions.has('input:checked');
+        }
+        var $autosData = $autoWidgetOptions.find('.o_theme_customize_auto');
+        defs = defs.concat(_.map($autosData, function (autoData) {
+            return self._setAuto($(autoData));
+        }));
+
         return Promise.all(defs);
     },
     /**
@@ -519,7 +537,7 @@ var ThemeCustomizeDialog = Dialog.extend({
         var value = parseFloat(text) || '';
         var unit = text.match(/([^\s\d]+)$/)[1];
 
-        var def = new Promise(function (resolve, reject) {
+        return new Promise(function (resolve, reject) {
             var qEdit = new QuickEdit(self, value, unit);
             qEdit.on('QuickEdit:save', self, function (ev) {
                 ev.stopPropagation();
@@ -531,15 +549,28 @@ var ThemeCustomizeDialog = Dialog.extend({
                 }
 
                 var values = {};
-                values[$inputData.data('value')] = value;
+                values[$inputData.data('variable')] = value;
                 self._makeSCSSCusto('/website/static/src/scss/options/user_values.scss', values)
                     .then(resolve)
                     .guardedCatch(resolve);
             });
             qEdit.appendTo($inputData.closest('.o_theme_customize_option'));
         });
+    },
+    /**
+     * @private
+     */
+    _setAuto: function ($autoData) {
+        var self = this;
+        var values = {};
+        var isChecked = $autoData.siblings('.o_theme_customize_option_input').prop('checked');
+        values[$autoData.data('variable')] = isChecked ? $autoData.data('value') : 'null';
 
-        return def;
+        return new Promise(function (resolve, reject) {
+            self._makeSCSSCusto('/website/static/src/scss/options/user_values.scss', values)
+                .then(resolve)
+                .guardedCatch(resolve);
+        });
     },
     /**
      * @private
@@ -665,7 +696,7 @@ var ThemeCustomizeDialog = Dialog.extend({
         });
         _.each(this.$('.o_theme_customize_input'), function (el) {
             var $el = $(el);
-            var value = self.style.getPropertyValue('--' + $el.data('value')).trim();
+            var value = self.style.getPropertyValue('--' + $el.data('variable')).trim();
 
             // Convert rem values to px values
             if (_.str.endsWith(value, 'rem')) {
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index f2e1465a788..59216fee115 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -37,11 +37,11 @@
         <div class="form-row justify-content-between o_options_container"/>
     </div>
     <t t-name="website.theme_customize_modal_option">
-        <div t-attf-class="o_theme_customize_option my-1 flex-grow-0 #{font ? 'o_theme_customize_option_font_' + font : ''} #{widget ? 'o_theme_customize_with_widget' : ''}">
+        <div t-attf-class="o_theme_customize_option my-1 flex-grow-0 #{font ? 'o_theme_customize_option_font_' + font : ''} #{widget and widget != 'auto' ? 'o_theme_customize_with_widget' : ''}">
             <img t-if="icon" t-att-src="icon"/>
 
             <t t-set="label" t-value="font ? '' : string"/>
-            <t t-if="alone and !widget" t-call="website.components.switch"/>
+            <t t-if="alone and (!widget or widget == 'auto')" t-call="website.components.switch"/>
             <label t-else="">
                 <input t-att-id="id" t-att-name="name" type="radio" t-att-checked="checked ? 'checked' : undefined"/>
                 <span><t t-esc="label"/></span>
@@ -59,13 +59,18 @@
             t-att-data-color-type="colorType"/>
     </t>
     <t t-name="website.theme_customize_widget_input">
-        <div t-attf-class="o_theme_customize_input o_theme_customize_input_#{value}"
-            t-att-data-value="value"
+        <div class="o_theme_customize_input"
+            t-att-data-variable="variable"
             t-att-data-unit="unit">
             <i class="fa fa-edit"/>
             <span/>
         </div>
     </t>
+    <t t-name="website.theme_customize_widget_auto">
+        <div class="o_theme_customize_auto"
+            t-att-data-variable="variable"
+            t-att-data-value="value"/>
+    </t>
     <t t-name="website.theme_customize_active_input">
         <div class="input-group input-group-sm align-items-center o_theme_customize_active_input">
             <input type="text" class="form-control" t-att-value="widget.value"/>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 6b2d5eca73d..621bec6e99e 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -527,11 +527,11 @@
             <list string="Main Layout">
                 <checkbox><opt data-xmlid="website.affix_top_menu" data-reload="/"/></checkbox>
                 <checkbox><opt data-xmlid="portal.portal_show_sign_in" data-reload="/"/></checkbox>
-                <opt data-widget="input" data-unit="rem" data-value="header-font-size" string="Font Size"/>
+                <opt data-widget="input" data-unit="rem" data-variable="header-font-size" string="Font Size"/>
             </list>
             <list string="Logo">
                 <checkbox><opt data-xmlid="website.layout_logo_show" data-reload="/"/></checkbox>
-                <opt data-widget="input" data-unit="rem" data-value="logo-height" string="Logo Height"/>
+                <opt data-widget="input" data-unit="rem" data-variable="logo-height" string="Logo Height"/>
             </list>
         </content>