Allow changing the 3D Editor's background color

Task-number: QDS-6585
Change-Id: Ibcac69d3792b521b29dfbdce2d49557d36de99a9
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>

24 files changed, 369 insertions, 44 deletions

diff --git a/share/qtcreator/qml/qmlpuppet/commands/createscenecommand.h b/share/qtcreator/qml/qmlpuppet/commands/createscenecommand.h
index 1eb6ba5018..c69d478875 100644
--- a/share/qtcreator/qml/qmlpuppet/commands/createscenecommand.h
+++ b/share/qtcreator/qml/qmlpuppet/commands/createscenecommand.h
@@ -28,6 +28,8 @@
 #include <QSize>
 #include <QUrl>
 #include <QVector>
+#include <QList>
+#include <QColor>
 #include <qmetatype.h>
 
 #include "instancecontainer.h"
@@ -58,7 +60,8 @@ public:
                                 const QString &language,
                                 QSize captureImageMinimumSize,
                                 QSize captureImageMaximumSize,
-                                qint32 stateInstanceId)
+                                qint32 stateInstanceId,
+                                const QList<QColor> &edit3dBackgroundColor)
         : instances(instanceContainer)
         , reparentInstances(reparentContainer)
         , ids(idVector)
@@ -74,6 +77,7 @@ public:
         , captureImageMinimumSize(captureImageMinimumSize)
         , captureImageMaximumSize(captureImageMaximumSize)
         , stateInstanceId{stateInstanceId}
+        , edit3dBackgroundColor{edit3dBackgroundColor}
     {}
 
     friend QDataStream &operator<<(QDataStream &out, const CreateSceneCommand &command)
@@ -93,6 +97,7 @@ public:
         out << command.stateInstanceId;
         out << command.captureImageMinimumSize;
         out << command.captureImageMaximumSize;
+        out << command.edit3dBackgroundColor;
 
         return out;
     }
@@ -114,6 +119,7 @@ public:
         in >> command.stateInstanceId;
         in >> command.captureImageMinimumSize;
         in >> command.captureImageMaximumSize;
+        in >> command.edit3dBackgroundColor;
 
         return in;
     }
@@ -134,6 +140,7 @@ public:
     QSize captureImageMinimumSize;
     QSize captureImageMaximumSize;
     qint32 stateInstanceId = 0;
+    QList<QColor> edit3dBackgroundColor;
 };
 
 QDebug operator<<(QDebug debug, const CreateSceneCommand &command);
diff --git a/share/qtcreator/qml/qmlpuppet/commands/view3dactioncommand.cpp b/share/qtcreator/qml/qmlpuppet/commands/view3dactioncommand.cpp
index 211fe6d54b..c32f7b0ffe 100644
--- a/share/qtcreator/qml/qmlpuppet/commands/view3dactioncommand.cpp
+++ b/share/qtcreator/qml/qmlpuppet/commands/view3dactioncommand.cpp
@@ -30,24 +30,27 @@
 
 namespace QmlDesigner {
 
-View3DActionCommand::View3DActionCommand(Type type, bool enable)
+View3DActionCommand::View3DActionCommand(Type type, const QVariant &value)
     : m_type(type)
-    , m_enabled(enable)
-    , m_position(0)
+    , m_value(value)
 {
 }
 
 View3DActionCommand::View3DActionCommand(int pos)
     : m_type(ParticlesSeek)
-    , m_enabled(true)
-    , m_position(pos)
+    , m_value(pos)
 {
 
 }
 
 bool View3DActionCommand::isEnabled() const
 {
-    return m_enabled;
+    return m_value.toBool();
+}
+
+QVariant View3DActionCommand::value() const
+{
+    return m_value;
 }
 
 View3DActionCommand::Type View3DActionCommand::type() const
@@ -57,29 +60,32 @@ View3DActionCommand::Type View3DActionCommand::type() const
 
 int View3DActionCommand::position() const
 {
-    return m_position;
+    bool ok = false;
+    int result = m_value.toInt(&ok);
+    if (!ok) {
+        qWarning() << "View3DActionCommand: returning a position that is not int; command type = "
+                   << m_type;
+    }
+
+    return result;
 }
 
 QDataStream &operator<<(QDataStream &out, const View3DActionCommand &command)
 {
-    out << qint32(command.isEnabled());
+    out << command.value();
     out << qint32(command.type());
-    out << qint32(command.position());
 
     return out;
 }
 
 QDataStream &operator>>(QDataStream &in, View3DActionCommand &command)
 {
-    qint32 enabled;
+    QVariant value;
     qint32 type;
-    qint32 pos;
-    in >> enabled;
+    in >> value;
     in >> type;
-    in >> pos;
-    command.m_enabled = bool(enabled);
+    command.m_value = value;
     command.m_type = View3DActionCommand::Type(type);
-    command.m_position = pos;
 
     return in;
 }
@@ -88,7 +94,7 @@ QDebug operator<<(QDebug debug, const View3DActionCommand &command)
 {
     return debug.nospace() << "View3DActionCommand(type: "
                            << command.m_type << ","
-                           << command.m_enabled << ")";
+                           << command.m_value << ")\n";
 }
 
 } // namespace QmlDesigner
diff --git a/share/qtcreator/qml/qmlpuppet/commands/view3dactioncommand.h b/share/qtcreator/qml/qmlpuppet/commands/view3dactioncommand.h
index cb34c253f9..cc3611df76 100644
--- a/share/qtcreator/qml/qmlpuppet/commands/view3dactioncommand.h
+++ b/share/qtcreator/qml/qmlpuppet/commands/view3dactioncommand.h
@@ -26,6 +26,7 @@
 #pragma once
 
 #include <QMetaType>
+#include <QVariant>
 
 namespace QmlDesigner {
 
@@ -55,20 +56,22 @@ public:
                 ParticlesPlay,
                 ParticlesRestart,
                 ParticlesSeek,
+                SelectBackgroundColor,
+                ResetBackgroundColor,
               };
 
-    explicit View3DActionCommand(Type type, bool enable);
+    explicit View3DActionCommand(Type type, const QVariant &value);
 
     View3DActionCommand() = default;
 
     bool isEnabled() const;
+    QVariant value() const;
     Type type() const;
     int position() const;
 
 private:
     Type m_type = Empty;
-    bool m_enabled = false;
-    int m_position = 0;
+    QVariant m_value;
 
 protected:
     View3DActionCommand(int pos);
diff --git a/share/qtcreator/qml/qmlpuppet/interfaces/nodeinstanceserverinterface.cpp b/share/qtcreator/qml/qmlpuppet/interfaces/nodeinstanceserverinterface.cpp
index 413906267a..a8b3c31940 100644
--- a/share/qtcreator/qml/qmlpuppet/interfaces/nodeinstanceserverinterface.cpp
+++ b/share/qtcreator/qml/qmlpuppet/interfaces/nodeinstanceserverinterface.cpp
@@ -142,6 +142,7 @@ void NodeInstanceServerInterface::registerCommands()
     registerCommand<View3DActionCommand>("View3DActionCommand");
     registerCommand<RequestModelNodePreviewImageCommand>("RequestModelNodePreviewImageCommand");
     registerCommand<QPair<int, int>>("QPairIntInt");
+    registerCommand<QList<QColor>>("QColorList");
     registerCommand<ChangeLanguageCommand>("ChangeLanguageCommand");
     registerCommand<ChangePreviewImageSizeCommand>("ChangePreviewImageSizeCommand");
     registerCommand<CapturedDataCommand>("CapturedDataCommand");
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/EditView3D.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/EditView3D.qml
index cb9ece58b2..9a95ca34b9 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/EditView3D.qml
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/qt5/EditView3D.qml
@@ -45,6 +45,8 @@ Item {
     property bool usePerspective: true
     property bool globalOrientation: false
     property alias contentItem: contentItem
+    property color backgroundGradientColorStart: "#222222"
+    property color backgroundGradientColorEnd: "#999999"
 
     enum SelectionMode { Item, Group }
     enum TransformMode { Move, Rotate, Scale }
@@ -212,6 +214,15 @@ Item {
             cameraControl.alignView(selectedNodes);
     }
 
+    function updateViewStates(viewStates)
+    {
+        if ("selectBackgroundColor" in viewStates) {
+            var color = viewStates.selectBackgroundColor
+            backgroundGradientColorStart = color[0];
+            backgroundGradientColorEnd = color[1];
+        }
+    }
+
     // If resetToDefault is true, tool states not specifically set to anything will be reset to
     // their default state.
     function updateToolStates(toolStates, resetToDefault)
@@ -730,8 +741,8 @@ Item {
             anchors.fill: parent
 
             gradient: Gradient {
-                GradientStop { position: 1.0; color: "#222222" }
-                GradientStop { position: 0.0; color: "#999999" }
+                GradientStop { position: 1.0; color: backgroundGradientColorStart }
+                GradientStop { position: 0.0; color: backgroundGradientColorEnd }
             }
 
             MouseArea {
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/EditView3D.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/EditView3D.qml
index 3431a1ce3c..228154a9a4 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/EditView3D.qml
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/qt6/EditView3D.qml
@@ -46,6 +46,8 @@ Item {
     property bool usePerspective: true
     property bool globalOrientation: false
     property alias contentItem: contentItem
+    property color backgroundGradientColorStart: "#222222"
+    property color backgroundGradientColorEnd: "#999999"
 
     enum SelectionMode { Item, Group }
     enum TransformMode { Move, Rotate, Scale }
@@ -206,6 +208,15 @@ Item {
             cameraControl.alignView(selectedNodes);
     }
 
+    function updateViewStates(viewStates)
+    {
+        if ("selectBackgroundColor" in viewStates) {
+            var color = viewStates.selectBackgroundColor
+            backgroundGradientColorStart = color[0];
+            backgroundGradientColorEnd = color[1];
+        }
+    }
+
     // If resetToDefault is true, tool states not specifically set to anything will be reset to
     // their default state.
     function updateToolStates(toolStates, resetToDefault)
@@ -875,8 +886,8 @@ Item {
             anchors.fill: parent
 
             gradient: Gradient {
-                GradientStop { position: 1.0; color: "#222222" }
-                GradientStop { position: 0.0; color: "#999999" }
+                GradientStop { position: 1.0; color: backgroundGradientColorStart }
+                GradientStop { position: 0.0; color: backgroundGradientColorEnd }
             }
 
             MouseArea {
diff --git a/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.cpp b/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.cpp
index 975a6ded6b..4b369bb1c5 100644
--- a/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.cpp
+++ b/share/qtcreator/qml/qmlpuppet/qml2puppet/instances/qt5informationnodeinstanceserver.cpp
@@ -1954,6 +1954,12 @@ void Qt5InformationNodeInstanceServer::createScene(const CreateSceneCommand &com
 #ifdef IMPORT_QUICK3D_ASSETS
     QTimer::singleShot(0, this, &Qt5InformationNodeInstanceServer::resolveImportSupport);
 #endif
+
+    if (!command.edit3dBackgroundColor.isEmpty()) {
+        View3DActionCommand backgroundColorCommand(View3DActionCommand::SelectBackgroundColor,
+                                                   QVariant::fromValue(command.edit3dBackgroundColor));
+        view3DAction(backgroundColorCommand);
+    }
 }
 
 void Qt5InformationNodeInstanceServer::sendChildrenChangedCommand(const QList<ServerNodeInstance> &childList)
@@ -2169,18 +2175,19 @@ void Qt5InformationNodeInstanceServer::view3DAction(const View3DActionCommand &c
     if (!m_editView3DSetupDone)
         return;
 
-    QVariantMap updatedState;
+    QVariantMap updatedToolState;
+    QVariantMap updatedViewState;
     int renderCount = 1;
 
     switch (command.type()) {
     case View3DActionCommand::MoveTool:
-        updatedState.insert("transformMode", 0);
+        updatedToolState.insert("transformMode", 0);
         break;
     case View3DActionCommand::RotateTool:
-        updatedState.insert("transformMode", 1);
+        updatedToolState.insert("transformMode", 1);
         break;
     case View3DActionCommand::ScaleTool:
-        updatedState.insert("transformMode", 2);
+        updatedToolState.insert("transformMode", 2);
         break;
     case View3DActionCommand::FitToView:
         QMetaObject::invokeMethod(m_editView3DData.rootItem, "fitToView");
@@ -2192,38 +2199,42 @@ void Qt5InformationNodeInstanceServer::view3DAction(const View3DActionCommand &c
         QMetaObject::invokeMethod(m_editView3DData.rootItem, "alignViewToCamera");
         break;
     case View3DActionCommand::SelectionModeToggle:
-        updatedState.insert("selectionMode", command.isEnabled() ? 1 : 0);
+        updatedToolState.insert("selectionMode", command.isEnabled() ? 1 : 0);
         break;
     case View3DActionCommand::CameraToggle:
-        updatedState.insert("usePerspective", command.isEnabled());
+        updatedToolState.insert("usePerspective", command.isEnabled());
         // It can take a couple frames to properly update icon gizmo positions
         renderCount = 2;
         break;
     case View3DActionCommand::OrientationToggle:
-        updatedState.insert("globalOrientation", command.isEnabled());
+        updatedToolState.insert("globalOrientation", command.isEnabled());
         break;
     case View3DActionCommand::EditLightToggle:
-        updatedState.insert("showEditLight", command.isEnabled());
+        updatedToolState.insert("showEditLight", command.isEnabled());
         break;
     case View3DActionCommand::ShowGrid:
-        updatedState.insert("showGrid", command.isEnabled());
+        updatedToolState.insert("showGrid", command.isEnabled());
         break;
     case View3DActionCommand::ShowSelectionBox:
-        updatedState.insert("showSelectionBox", command.isEnabled());
+        updatedToolState.insert("showSelectionBox", command.isEnabled());
         break;
     case View3DActionCommand::ShowIconGizmo:
-        updatedState.insert("showIconGizmo", command.isEnabled());
+        updatedToolState.insert("showIconGizmo", command.isEnabled());
         break;
     case View3DActionCommand::ShowCameraFrustum:
-        updatedState.insert("showCameraFrustum", command.isEnabled());
+        updatedToolState.insert("showCameraFrustum", command.isEnabled());
+        break;
+    case View3DActionCommand::SelectBackgroundColor: {
+        updatedViewState.insert("selectBackgroundColor", command.value());
         break;
+    }
 #ifdef QUICK3D_PARTICLES_MODULE
     case View3DActionCommand::ShowParticleEmitter:
-        updatedState.insert("showParticleEmitter", command.isEnabled());
+        updatedToolState.insert("showParticleEmitter", command.isEnabled());
         break;
     case View3DActionCommand::ParticlesPlay:
         m_particleAnimationPlaying = command.isEnabled();
-        updatedState.insert("particlePlay", command.isEnabled());
+        updatedToolState.insert("particlePlay", command.isEnabled());
         if (m_particleAnimationPlaying) {
             m_particleAnimationDriver->play();
             m_particleAnimationDriver->setSeekerEnabled(false);
@@ -2249,12 +2260,17 @@ void Qt5InformationNodeInstanceServer::view3DAction(const View3DActionCommand &c
         break;
     }
 
-    if (!updatedState.isEmpty()) {
+    if (!updatedToolState.isEmpty()) {
         QMetaObject::invokeMethod(m_editView3DData.rootItem, "updateToolStates",
-                                  Q_ARG(QVariant, updatedState),
+                                  Q_ARG(QVariant, updatedToolState),
                                   Q_ARG(QVariant, QVariant::fromValue(false)));
     }
 
+    if (!updatedViewState.isEmpty()) {
+        QMetaObject::invokeMethod(m_editView3DData.rootItem, "updateViewStates",
+                                  Q_ARG(QVariant, updatedViewState));
+    }
+
     render3DEditView(renderCount);
 }
 
diff --git a/src/plugins/qmldesigner/CMakeLists.txt b/src/plugins/qmldesigner/CMakeLists.txt
index 6a13cfd221..9f2c3e091c 100644
--- a/src/plugins/qmldesigner/CMakeLists.txt
+++ b/src/plugins/qmldesigner/CMakeLists.txt
@@ -162,6 +162,7 @@ extend_qtc_plugin(QmlDesigner
   edit3dcanvas.cpp edit3dcanvas.h
   edit3dactions.cpp edit3dactions.h
   edit3dvisibilitytogglesmenu.cpp edit3dvisibilitytogglesmenu.h
+  backgroundcolorselection.cpp backgroundcolorselection.h
   edit3d.qrc
 )
 
diff --git a/src/plugins/qmldesigner/components/edit3d/backgroundcolorselection.cpp b/src/plugins/qmldesigner/components/edit3d/backgroundcolorselection.cpp
new file mode 100644
index 0000000000..c947d8e155
--- /dev/null
+++ b/src/plugins/qmldesigner/components/edit3d/backgroundcolorselection.cpp
@@ -0,0 +1,103 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+#include "backgroundcolorselection.h"
+
+#include <nodeinstanceview.h>
+#include <utils/qtcassert.h>
+#include <view3dactioncommand.h>
+#include <qmldesignerplugin.h>
+
+using namespace QmlDesigner;
+
+namespace {
+QList<QColor> readBackgroundColorConfiguration()
+{
+    QVariant var = QmlDesigner::DesignerSettings::getValue(
+        QmlDesigner::DesignerSettingsKey::EDIT3DVIEW_BACKGROUND_COLOR);
+
+    if (!var.isValid())
+        return {};
+
+    auto colorNameList = var.value<QList<QString>>();
+    QTC_ASSERT(colorNameList.size() == 2, return {});
+
+    return {colorNameList[0], colorNameList[1]};
+}
+
+void setBackgroundColorConfiguration(const QList<QColor> &colorConfig)
+{
+    auto view = QmlDesignerPlugin::instance()->viewManager().nodeInstanceView();
+    View3DActionCommand cmd(View3DActionCommand::SelectBackgroundColor,
+                            QVariant::fromValue(colorConfig));
+    view->view3DAction(cmd);
+}
+
+void saveBackgroundColorConfiguration(const QList<QColor> &colorConfig)
+{
+    QList<QString> colorsSaved = {colorConfig[0].name(), colorConfig[1].name()};
+    QmlDesigner::DesignerSettings::setValue(
+        QmlDesigner::DesignerSettingsKey::EDIT3DVIEW_BACKGROUND_COLOR,
+        QVariant::fromValue(colorsSaved));
+}
+
+} // namespace
+
+QPointer<QColorDialog> BackgroundColorSelection::createDialog(QWidget *parent)
+{
+    auto dialog = new QColorDialog(parent);
+
+    dialog->setModal(true);
+    dialog->setAttribute(Qt::WA_DeleteOnClose);
+
+    const QList<QColor> oldColorConfig = readBackgroundColorConfiguration();
+
+    dialog->show();
+
+    QObject::connect(dialog, &QColorDialog::currentColorChanged, dialog, [](const QColor &color) {
+        setBackgroundColorConfiguration({color, color});
+    });
+
+    QObject::connect(dialog, &QColorDialog::colorSelected, dialog, [](const QColor &color) {
+        saveBackgroundColorConfiguration({color, color});
+    });
+
+    if (!oldColorConfig.isEmpty()) {
+        QObject::connect(dialog, &QColorDialog::rejected, dialog, [oldColorConfig]() {
+            setBackgroundColorConfiguration(oldColorConfig);
+        });
+    }
+
+    return dialog;
+}
+
+void BackgroundColorSelection::showBackgroundColorSelectionWidget(QWidget *parent)
+{
+    if (m_dialog)
+        return;
+
+    m_dialog = BackgroundColorSelection::createDialog(parent);
+    QTC_ASSERT(m_dialog, return);
+}
diff --git a/src/plugins/qmldesigner/components/edit3d/backgroundcolorselection.h b/src/plugins/qmldesigner/components/edit3d/backgroundcolorselection.h
new file mode 100644
index 0000000000..d90693f03c
--- /dev/null
+++ b/src/plugins/qmldesigner/components/edit3d/backgroundcolorselection.h
@@ -0,0 +1,47 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+#pragma once
+
+#include <QColorDialog>
+
+namespace QmlDesigner {
+class BackgroundColorSelection : public QObject
+{
+    Q_OBJECT
+
+public:
+    explicit BackgroundColorSelection(QObject *parent = nullptr)
+        : QObject{parent}
+    {}
+
+    static void showBackgroundColorSelectionWidget(QWidget *parent);
+
+private:
+    static QPointer<QColorDialog> createDialog(QWidget *parent);
+    inline static QPointer<QColorDialog> m_dialog;
+};
+
+} // namespace QmlDesigner
diff --git a/src/plugins/qmldesigner/components/edit3d/edit3d.qrc b/src/plugins/qmldesigner/components/edit3d/edit3d.qrc
index bf042b645b..5784ac0e44 100644
--- a/src/plugins/qmldesigner/components/edit3d/edit3d.qrc
+++ b/src/plugins/qmldesigner/components/edit3d/edit3d.qrc
@@ -44,5 +44,7 @@
         <file>images/align_camera_on@2x.png</file>
         <file>images/align_view_on.png</file>
         <file>images/align_view_on@2x.png</file>
+        <file>images/color_palette.png</file>
+        <file>images/color_palette@2x.png</file>
     </qresource>
 </RCC>
diff --git a/src/plugins/qmldesigner/components/edit3d/edit3dactions.cpp b/src/plugins/qmldesigner/components/edit3d/edit3dactions.cpp
index c5240a0cbd..76343584c9 100644
--- a/src/plugins/qmldesigner/components/edit3d/edit3dactions.cpp
+++ b/src/plugins/qmldesigner/components/edit3d/edit3dactions.cpp
@@ -48,9 +48,10 @@ Edit3DActionTemplate::Edit3DActionTemplate(const QString &description,
 
 void Edit3DActionTemplate::actionTriggered(bool b)
 {
-    if (m_type != View3DActionCommand::Empty) {
-        QmlDesignerPlugin::instance()->viewManager().nodeInstanceView()
-                ->view3DAction(View3DActionCommand(m_type, b));
+    if (m_type != View3DActionCommand::Empty && m_type != View3DActionCommand::SelectBackgroundColor) {
+        auto view = QmlDesignerPlugin::instance()->viewManager().nodeInstanceView();
+        View3DActionCommand cmd(m_type, b);
+        view->view3DAction(cmd);
     }
 
     if (m_action)
diff --git a/src/plugins/qmldesigner/components/edit3d/edit3dview.cpp b/src/plugins/qmldesigner/components/edit3d/edit3dview.cpp
index 6102ce475e..28b6cc93cc 100644
--- a/src/plugins/qmldesigner/components/edit3d/edit3dview.cpp
+++ b/src/plugins/qmldesigner/components/edit3d/edit3dview.cpp
@@ -42,6 +42,8 @@
 #include <utils/qtcassert.h>
 #include <utils/utilsicons.h>
 
+#include <backgroundcolorselection.h>
+
 #include <QDebug>
 #include <QToolButton>
 
@@ -336,6 +338,32 @@ void Edit3DView::createEdit3DActions()
                 QKeySequence(Qt::Key_G), true, true, {}, {}, nullptr,
                 QCoreApplication::translate("ShowGridAction", "Toggle the visibility of the helper grid."));
 
+    SelectionContextOperation showBackgroundColorSelection = [this](const SelectionContext &) {
+        BackgroundColorSelection::showBackgroundColorSelectionWidget(edit3DWidget());
+    };
+
+    m_backgroundColorSelectionAction = new Edit3DAction(
+        QmlDesigner::Constants::EDIT3D_EDIT_SELECT_BACKGROUND_COLOR, View3DActionCommand::SelectBackgroundColor,
+        QCoreApplication::translate("SelectBackgroundColorAction", "Select Background color"),
+        {}, false, false, {}, {}, showBackgroundColorSelection,
+        QCoreApplication::translate("SelectBackgroundColorAction", "Choose a color for the background."));
+
+    m_resetBackgroundColorAction = new Edit3DAction(
+        QmlDesigner::Constants::EDIT3D_EDIT_RESET_BACKGROUND_COLOR, View3DActionCommand::ResetBackgroundColor,
+        QCoreApplication::translate("ResetBackgroundColorAction", "Reset Background color"),
+        {}, false, false, {}, {}, [](const SelectionContext &) {
+            QList<QColor> colors = {QRgb(0x222222), QRgb(0x999999)};
+            auto view = QmlDesignerPlugin::instance()->viewManager().nodeInstanceView();
+            View3DActionCommand cmd(View3DActionCommand::SelectBackgroundColor, QVariant::fromValue(colors));
+            view->view3DAction(cmd);
+
+            QList<QString> colorsToSave = {colors[0].name(), colors[1].name()};
+            QmlDesigner::DesignerSettings::setValue(
+                QmlDesigner::DesignerSettingsKey::EDIT3DVIEW_BACKGROUND_COLOR,
+                QVariant::fromValue(colorsToSave));
+        },
+        QCoreApplication::translate("ResetBackgroundColorAction", "Reset Background color to the default value."));
+
     m_showSelectionBoxAction = new Edit3DAction(
                 QmlDesigner::Constants::EDIT3D_EDIT_SHOW_SELECTION_BOX, View3DActionCommand::ShowSelectionBox,
                 QCoreApplication::translate("ShowSelectionBoxAction", "Show Selection Boxes"),
@@ -438,6 +466,29 @@ void Edit3DView::createEdit3DActions()
                 QKeySequence(), false, false, Utils::Icons::EYE_OPEN_TOOLBAR.icon(),
                 {}, visibilityTogglesTrigger);
 
+    SelectionContextOperation backgroundColorActionsTrigger = [this](const SelectionContext &) {
+        if (!edit3DWidget()->backgroundColorMenu())
+            return;
+
+        QPoint pos;
+        const auto &actionWidgets = m_backgrondColorMenuAction->action()->associatedWidgets();
+        for (auto actionWidget : actionWidgets) {
+            if (auto button = qobject_cast<QToolButton *>(actionWidget)) {
+                pos = button->mapToGlobal(QPoint(0, 0));
+                break;
+            }
+        }
+
+        edit3DWidget()->showBackgroundColorMenu(!edit3DWidget()->backgroundColorMenu()->isVisible(),
+                                                pos);
+    };
+
+    m_backgrondColorMenuAction = new Edit3DAction(
+        QmlDesigner::Constants::EDIT3D_BACKGROUND_COLOR_ACTIONS, View3DActionCommand::Empty,
+        QCoreApplication::translate("BackgroundColorMenuActions", "Background Color Actions"),
+        QKeySequence(), false, false, Icons::COLOR_PALETTE.icon(),
+        {}, backgroundColorActionsTrigger);
+
     m_leftActions << m_selectionModeAction;
     m_leftActions << nullptr; // Null indicates separator
     m_leftActions << nullptr; // Second null after separator indicates an exclusive group
@@ -455,6 +506,8 @@ void Edit3DView::createEdit3DActions()
     m_leftActions << m_alignViewAction;
     m_leftActions << nullptr;
     m_leftActions << m_visibilityTogglesAction;
+    m_leftActions << nullptr;
+    m_leftActions << m_backgrondColorMenuAction;
 
     m_rightActions << m_particleViewModeAction;
     m_rightActions << m_particlesPlayAction;
@@ -467,6 +520,9 @@ void Edit3DView::createEdit3DActions()
     m_visibilityToggleActions << m_showIconGizmoAction;
     m_visibilityToggleActions << m_showCameraFrustumAction;
     m_visibilityToggleActions << m_showParticleEmitterAction;
+
+    m_backgroundColorActions << m_backgroundColorSelectionAction;
+    m_backgroundColorActions << m_resetBackgroundColorAction;
 }
 
 QVector<Edit3DAction *> Edit3DView::leftActions() const
@@ -484,6 +540,11 @@ QVector<Edit3DAction *> Edit3DView::visibilityToggleActions() const
     return m_visibilityToggleActions;
 }
 
+QVector<Edit3DAction *> Edit3DView::backgroundColorActions() const
+{
+    return m_backgroundColorActions;
+}
+
 void Edit3DView::addQuick3DImport()
 {
     DesignDocument *document = QmlDesignerPlugin::instance()->currentDesignDocument();
diff --git a/src/plugins/qmldesigner/components/edit3d/edit3dview.h b/src/plugins/qmldesigner/components/edit3d/edit3dview.h
index 40e2170873..e5cb2aba51 100644
--- a/src/plugins/qmldesigner/components/edit3d/edit3dview.h
+++ b/src/plugins/qmldesigner/components/edit3d/edit3dview.h
@@ -74,6 +74,7 @@ public:
     QVector<Edit3DAction *> leftActions() const;
     QVector<Edit3DAction *> rightActions() const;
     QVector<Edit3DAction *> visibilityToggleActions() const;
+    QVector<Edit3DAction *> backgroundColorActions() const;
     void setSeeker(SeekerSlider *slider);
 
     void addQuick3DImport();
@@ -88,6 +89,7 @@ private:
     QVector<Edit3DAction *> m_leftActions;
     QVector<Edit3DAction *> m_rightActions;
     QVector<Edit3DAction *> m_visibilityToggleActions;
+    QVector<Edit3DAction *> m_backgroundColorActions;
     Edit3DAction *m_selectionModeAction = nullptr;
     Edit3DAction *m_moveToolAction = nullptr;
     Edit3DAction *m_rotateToolAction = nullptr;
@@ -99,6 +101,8 @@ private:
     Edit3DAction *m_orientationModeAction = nullptr;
     Edit3DAction *m_editLightAction = nullptr;
     Edit3DAction *m_showGridAction = nullptr;
+    Edit3DAction *m_backgroundColorSelectionAction = nullptr;
+    Edit3DAction *m_resetBackgroundColorAction = nullptr;
     Edit3DAction *m_showSelectionBoxAction = nullptr;
     Edit3DAction *m_showIconGizmoAction = nullptr;
     Edit3DAction *m_showCameraFrustumAction = nullptr;
@@ -108,6 +112,7 @@ private:
     Edit3DAction *m_particlesPlayAction = nullptr;
     Edit3DAction *m_particlesRestartAction = nullptr;
     Edit3DAction *m_visibilityTogglesAction = nullptr;
+    Edit3DAction *m_backgrondColorMenuAction = nullptr;
     SeekerSlider *m_seeker = nullptr;
     int particlemode;
     ModelCache<QImage> m_canvasCache;
diff --git a/src/plugins/qmldesigner/components/edit3d/edit3dwidget.cpp b/src/plugins/qmldesigner/components/edit3d/edit3dwidget.cpp
index 72cb0ec21c..6f685123cf 100644
--- a/src/plugins/qmldesigner/components/edit3d/edit3dwidget.cpp
+++ b/src/plugins/qmldesigner/components/edit3d/edit3dwidget.cpp
@@ -141,6 +141,9 @@ Edit3DWidget::Edit3DWidget(Edit3DView *view) :
     m_visibilityTogglesMenu = new Edit3DVisibilityTogglesMenu(this);
     handleActions(view->visibilityToggleActions(), m_visibilityTogglesMenu, false);
 
+    m_backgroundColorMenu = new Edit3DVisibilityTogglesMenu(this);
+    handleActions(view->backgroundColorActions(), m_backgroundColorMenu, false);
+
     view->setSeeker(seeker);
     seeker->setToolTip(QLatin1String("Seek particle system time when paused."));
 
@@ -201,6 +204,21 @@ void Edit3DWidget::showVisibilityTogglesMenu(bool show, const QPoint &pos)
         m_visibilityTogglesMenu->close();
 }
 
+QMenu *Edit3DWidget::backgroundColorMenu() const
+{
+    return m_backgroundColorMenu.data();
+}
+
+void Edit3DWidget::showBackgroundColorMenu(bool show, const QPoint &pos)
+{
+    if (m_backgroundColorMenu.isNull())
+        return;
+    if (show)
+        m_backgroundColorMenu->popup(pos);
+    else
+        m_backgroundColorMenu->close();
+}
+
 void Edit3DWidget::linkActivated(const QString &link)
 {
     Q_UNUSED(link)
diff --git a/src/plugins/qmldesigner/components/edit3d/edit3dwidget.h b/src/plugins/qmldesigner/components/edit3d/edit3dwidget.h
index 5a4ed48e28..7d40fd5471 100644
--- a/src/plugins/qmldesigner/components/edit3d/edit3dwidget.h
+++ b/src/plugins/qmldesigner/components/edit3d/edit3dwidget.h
@@ -51,6 +51,9 @@ public:
     QMenu *visibilityTogglesMenu() const;
     void showVisibilityTogglesMenu(bool show, const QPoint &pos);
 
+    QMenu *backgroundColorMenu() const;
+    void showBackgroundColorMenu(bool show, const QPoint &pos);
+
 protected:
     void dragEnterEvent(QDragEnterEvent *dragEnterEvent) override;
     void dropEvent(QDropEvent *dropEvent) override;
@@ -65,6 +68,7 @@ private:
     QPointer<ToolBox> m_toolBox;
     Core::IContext *m_context = nullptr;
     QPointer<QMenu> m_visibilityTogglesMenu;
+    QPointer<QMenu> m_backgroundColorMenu;
 };
 
 } // namespace QmlDesigner
diff --git a/src/plugins/qmldesigner/components/edit3d/images/color_palette.png b/src/plugins/qmldesigner/components/edit3d/images/color_palette.png
new file mode 100644
index 0000000000..8d5035b365
--- /dev/null
+++ b/src/plugins/qmldesigner/components/edit3d/images/color_palette.png
diff --git a/src/plugins/qmldesigner/components/edit3d/images/color_palette@2x.png b/src/plugins/qmldesigner/components/edit3d/images/color_palette@2x.png
new file mode 100644
index 0000000000..4eebbce313
--- /dev/null
+++ b/src/plugins/qmldesigner/components/edit3d/images/color_palette@2x.png
diff --git a/src/plugins/qmldesigner/designercore/instances/nodeinstanceview.cpp b/src/plugins/qmldesigner/designercore/instances/nodeinstanceview.cpp
index 99c6b6f79c..73d15136db 100644
--- a/src/plugins/qmldesigner/designercore/instances/nodeinstanceview.cpp
+++ b/src/plugins/qmldesigner/designercore/instances/nodeinstanceview.cpp
@@ -982,6 +982,17 @@ QList<ModelNode> filterNodesForSkipItems(const QList<ModelNode> &nodeList)
     return filteredNodeList;
 }
 
+QList<QColor> readBackgroundColorConfiguration(const QVariant &var)
+{
+    if (!var.isValid())
+        return {};
+
+    auto colorNameList = var.value<QList<QString>>();
+    QTC_ASSERT(colorNameList.size() == 2, return {});
+
+    return {colorNameList[0], colorNameList[1]};
+}
+
 CreateSceneCommand NodeInstanceView::createCreateSceneCommand()
 {
     QList<ModelNode> nodeList = allModelNodes();
@@ -1136,6 +1147,13 @@ CreateSceneCommand NodeInstanceView::createCreateSceneCommand()
     if (stateNode.isValid() && stateNode.metaInfo().isSubclassOf("QtQuick.State", 1, 0))
         stateInstanceId = stateNode.internalId();
 
+    auto value = QmlDesigner::DesignerSettings::getValue(
+        QmlDesigner::DesignerSettingsKey::EDIT3DVIEW_BACKGROUND_COLOR);
+
+    QList<QColor> edit3dBackgroundColor;
+    if (value.isValid())
+        edit3dBackgroundColor = readBackgroundColorConfiguration(value);
+
     return CreateSceneCommand(
         instanceContainerList,
         reparentContainerList,
@@ -1156,7 +1174,8 @@ CreateSceneCommand NodeInstanceView::createCreateSceneCommand()
         lastUsedLanguage,
         m_captureImageMinimumSize,
         m_captureImageMaximumSize,
-        stateInstanceId);
+        stateInstanceId,
+        edit3dBackgroundColor);
 }
 
 ClearSceneCommand NodeInstanceView::createClearSceneCommand() const
diff --git a/src/plugins/qmldesigner/designersettings.cpp b/src/plugins/qmldesigner/designersettings.cpp
index aad91e06b4..9c1aec1b36 100644
--- a/src/plugins/qmldesigner/designersettings.cpp
+++ b/src/plugins/qmldesigner/designersettings.cpp
@@ -80,6 +80,7 @@ void DesignerSettings::fromSettings(QSettings *settings)
     restoreValue(settings, DesignerSettingsKey::ALWAYS_DESIGN_MODE, true);
     restoreValue(settings, DesignerSettingsKey::DISABLE_ITEM_LIBRARY_UPDATE_TIMER, false);
     restoreValue(settings, DesignerSettingsKey::ASK_BEFORE_DELETING_ASSET, true);
+    restoreValue(settings, DesignerSettingsKey::EDIT3DVIEW_BACKGROUND_COLOR, QList<QString>{"#222222", "#999999"});
 
     settings->endGroup();
     settings->endGroup();
diff --git a/src/plugins/qmldesigner/designersettings.h b/src/plugins/qmldesigner/designersettings.h
index e3fd4470da..8c249fc65e 100644
--- a/src/plugins/qmldesigner/designersettings.h
+++ b/src/plugins/qmldesigner/designersettings.h
@@ -49,6 +49,7 @@ const char WARNING_FOR_QML_FILES_INSTEAD_OF_UIQML_FILES[] = "WarnAboutQmlFilesIn
 const char WARNING_FOR_DESIGNER_FEATURES_IN_EDITOR[] = "WarnAboutQtQuickDesignerFeaturesInCodeEditor";
 const char SHOW_DEBUGVIEW[] = "ShowQtQuickDesignerDebugView";
 const char ENABLE_DEBUGVIEW[] = "EnableQtQuickDesignerDebugView";
+const char EDIT3DVIEW_BACKGROUND_COLOR[] = "Edit3DViewBackgroundColor";
 const char ALWAYS_SAVE_IN_CRUMBLEBAR[] = "AlwaysSaveInCrumbleBar";
 const char USE_DEFAULT_PUPPET[] = "UseDefaultQml2Puppet";
 const char PUPPET_TOPLEVEL_BUILD_DIRECTORY[] = "PuppetToplevelBuildDirectory";
diff --git a/src/plugins/qmldesigner/qmldesignerconstants.h b/src/plugins/qmldesigner/qmldesignerconstants.h
index efefc381a1..8dc2b94749 100644
--- a/src/plugins/qmldesigner/qmldesignerconstants.h
+++ b/src/plugins/qmldesigner/qmldesignerconstants.h
@@ -65,6 +65,8 @@ const char EDIT3D_EDIT_CAMERA[]    = "QmlDesigner.Editor3D.EditCameraToggle";
 const char EDIT3D_ORIENTATION[]    = "QmlDesigner.Editor3D.OrientationToggle";
 const char EDIT3D_EDIT_LIGHT[]     = "QmlDesigner.Editor3D.EditLightToggle";
 const char EDIT3D_EDIT_SHOW_GRID[] = "QmlDesigner.Editor3D.ToggleGrid";
+const char EDIT3D_EDIT_SELECT_BACKGROUND_COLOR[] = "QmlDesigner.Editor3D.SelectBackgroundColor";
+const char EDIT3D_EDIT_RESET_BACKGROUND_COLOR[] = "QmlDesigner.Editor3D.ResetBackgroundColor";
 const char EDIT3D_EDIT_SHOW_SELECTION_BOX[] = "QmlDesigner.Editor3D.ToggleSelectionBox";
 const char EDIT3D_EDIT_SHOW_ICON_GIZMO[] = "QmlDesigner.Editor3D.ToggleIconGizmo";
 const char EDIT3D_EDIT_SHOW_CAMERA_FRUSTUM[] = "QmlDesigner.Editor3D.ToggleCameraFrustum";
@@ -74,6 +76,7 @@ const char EDIT3D_PARTICLE_MODE[]     = "QmlDesigner.Editor3D.ParticleViewModeTo
 const char EDIT3D_PARTICLES_PLAY[]    = "QmlDesigner.Editor3D.ParticlesPlay";
 const char EDIT3D_PARTICLES_RESTART[] = "QmlDesigner.Editor3D.ParticlesRestart";
 const char EDIT3D_VISIBILITY_TOGGLES[] = "QmlDesigner.Editor3D.VisibilityToggles";
+const char EDIT3D_BACKGROUND_COLOR_ACTIONS[] = "QmlDesigner.Editor3D.BackgroundColorActions";
 
 
 const char QML_DESIGNER_SUBFOLDER[] = "/designer/";
diff --git a/src/plugins/qmldesigner/qmldesignericons.h b/src/plugins/qmldesigner/qmldesignericons.h
index 75ec4ab2d3..437e420a48 100644
--- a/src/plugins/qmldesigner/qmldesignericons.h
+++ b/src/plugins/qmldesigner/qmldesignericons.h
@@ -91,6 +91,8 @@ const Utils::Icon EDIT3D_ALIGN_CAMERA_ON({
         {":/edit3d/images/align_camera_on.png", Utils::Theme::IconsBaseColor}});
 const Utils::Icon EDIT3D_ALIGN_VIEW_ON({
         {":/edit3d/images/align_view_on.png", Utils::Theme::IconsBaseColor}});
+const Utils::Icon COLOR_PALETTE({
+        {":/edit3d/images/color_palette.png", Utils::Theme::IconsBaseColor}});
 
 } // Icons
 } // QmlDesigner
diff --git a/src/plugins/qmldesigner/qmldesignerplugin.qbs b/src/plugins/qmldesigner/qmldesignerplugin.qbs
index 1326701ef7..2d0055b8c9 100644
--- a/src/plugins/qmldesigner/qmldesignerplugin.qbs
+++ b/src/plugins/qmldesigner/qmldesignerplugin.qbs
@@ -526,6 +526,8 @@ Project {
                 "debugview/debugviewwidget.ui",
                 "edit3d/edit3dview.cpp",
                 "edit3d/edit3dview.h",
+                "edit3d/backgroundcolorselection.cpp",
+                "edit3d/backgroundcolorselection.h",
                 "edit3d/edit3dwidget.cpp",
                 "edit3d/edit3dwidget.h",
                 "edit3d/edit3dcanvas.cpp",