diff --git a/kcmkwin/kwindecoration/declarative-plugin/plugin.cpp b/kcmkwin/kwindecoration/declarative-plugin/plugin.cpp
--- a/kcmkwin/kwindecoration/declarative-plugin/plugin.cpp
+++ b/kcmkwin/kwindecoration/declarative-plugin/plugin.cpp
@@ -43,6 +43,7 @@
     qmlRegisterType<KDecoration2::Preview::PreviewItem>(uri, 1, 0, "Decoration");
     qmlRegisterType<KDecoration2::Preview::PreviewButtonItem>(uri, 1, 0, "Button");
     qmlRegisterType<KDecoration2::Preview::ButtonsModel>(uri, 1, 0, "ButtonsModel");
+    qmlRegisterType<KDecoration2::Preview::DecorationPalette>(uri, 1, 0, "DecorationPalete");
     qmlRegisterType<KDecoration2::Preview::PreviewClient>();
     qmlRegisterType<KDecoration2::Decoration>();
     qmlRegisterType<KDecoration2::DecorationShadow>();
diff --git a/kcmkwin/kwindecoration/declarative-plugin/previewbutton.h b/kcmkwin/kwindecoration/declarative-plugin/previewbutton.h
--- a/kcmkwin/kwindecoration/declarative-plugin/previewbutton.h
+++ b/kcmkwin/kwindecoration/declarative-plugin/previewbutton.h
@@ -40,7 +40,6 @@
     Q_PROPERTY(KDecoration2::Preview::PreviewBridge *bridge READ bridge WRITE setBridge NOTIFY bridgeChanged)
     Q_PROPERTY(KDecoration2::Preview::Settings *settings READ settings WRITE setSettings NOTIFY settingsChanged)
     Q_PROPERTY(int type READ typeAsInt WRITE setType NOTIFY typeChanged)
-    Q_PROPERTY(QColor color READ color WRITE setColor)
 
 public:
     explicit PreviewButtonItem(QQuickItem *parent = nullptr);
@@ -58,9 +57,6 @@
     void setType(KDecoration2::DecorationButtonType type);
     void setType(int type);
 
-    const QColor &color() const { return m_color; }
-    void setColor(const QColor color);
-
 Q_SIGNALS:
     void bridgeChanged();
     void typeChanged();
@@ -72,13 +68,11 @@
 private:
     void createButton();
     void syncGeometry();
-    QColor m_color;
     QPointer<KDecoration2::Preview::PreviewBridge> m_bridge;
     QPointer<KDecoration2::Preview::Settings> m_settings;
     KDecoration2::Decoration *m_decoration = nullptr;
     KDecoration2::DecorationButton *m_button = nullptr;
     KDecoration2::DecorationButtonType m_type = KDecoration2::DecorationButtonType::Custom;
-
 };
 
 } // Preview
diff --git a/kcmkwin/kwindecoration/declarative-plugin/previewbutton.cpp b/kcmkwin/kwindecoration/declarative-plugin/previewbutton.cpp
--- a/kcmkwin/kwindecoration/declarative-plugin/previewbutton.cpp
+++ b/kcmkwin/kwindecoration/declarative-plugin/previewbutton.cpp
@@ -109,11 +109,12 @@
     auto client = m_bridge->lastCreatedClient();
     client->setMinimizable(true);
     client->setMaximizable(true);
-    client->setActive(false);
+    client->setActive(true);
     client->setProvidesContextHelp(true);
     m_decoration->setSettings(m_settings->settings());
     m_decoration->init();
     m_button = m_bridge->createButton(m_decoration, m_type);
+
     connect(this, &PreviewButtonItem::widthChanged, this, &PreviewButtonItem::syncGeometry);
     connect(this, &PreviewButtonItem::heightChanged, this, &PreviewButtonItem::syncGeometry);
     syncGeometry();
@@ -134,15 +135,6 @@
     }
     QRect size { 0, 0, (int)width(), (int)height() };
     m_button->paint(painter, size);
-    painter->setCompositionMode(QPainter::CompositionMode_SourceAtop);
-    painter->fillRect(size, m_color);
-}
-
-void PreviewButtonItem::setColor(const QColor color)
-{
-    m_color = color;
-    m_color.setAlpha(127);
-    update();
 }
 
 }
diff --git a/kcmkwin/kwindecoration/declarative-plugin/previewsettings.h b/kcmkwin/kwindecoration/declarative-plugin/previewsettings.h
--- a/kcmkwin/kwindecoration/declarative-plugin/previewsettings.h
+++ b/kcmkwin/kwindecoration/declarative-plugin/previewsettings.h
@@ -24,6 +24,7 @@
 #include <KDecoration2/DecorationSettings>
 #include <QObject>
 #include <QAbstractListModel>
+#include <QColor>
 
 namespace KDecoration2
 {
@@ -157,6 +158,31 @@
     int m_borderSize = 3;
 };
 
+class DecorationPalette : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(KDecoration2::Preview::PreviewBridge *bridge READ bridge WRITE setBridge NOTIFY bridgeChanged)
+    Q_PROPERTY(QColor titleBarColor READ titleBarColor NOTIFY titleBarColorChanged)
+    Q_PROPERTY(QColor foregroundColor READ foregroundColor NOTIFY foregroundColorChanged)
+public:
+    explicit DecorationPalette(QObject *parent = nullptr);
+    ~DecorationPalette() override = default;
+
+    PreviewBridge *bridge() const;
+    void setBridge(PreviewBridge *bridge);
+
+    QColor titleBarColor() const {return m_titleBarColor;}
+    QColor foregroundColor() const {return m_foregroundColor;}
+Q_SIGNALS:
+    void bridgeChanged();
+    void titleBarColorChanged();
+    void foregroundColorChanged();
+private:
+    QPointer<PreviewBridge> m_bridge;
+    QColor m_titleBarColor;
+    QColor m_foregroundColor;
+};
+
 }
 }
 
diff --git a/kcmkwin/kwindecoration/declarative-plugin/previewsettings.cpp b/kcmkwin/kwindecoration/declarative-plugin/previewsettings.cpp
--- a/kcmkwin/kwindecoration/declarative-plugin/previewsettings.cpp
+++ b/kcmkwin/kwindecoration/declarative-plugin/previewsettings.cpp
@@ -20,6 +20,7 @@
 #include "previewsettings.h"
 #include "previewbridge.h"
 #include "buttonsmodel.h"
+#include "previewclient.h"
 
 #include <KLocalizedString>
 
@@ -275,5 +276,39 @@
     emit borderSizesIndexChanged(m_borderSize);
 }
 
+
+DecorationPalette::DecorationPalette(QObject *parent)
+    :QObject(parent)
+{}
+
+PreviewBridge *DecorationPalette::bridge() const
+{
+    return m_bridge;
+}
+
+void DecorationPalette::setBridge(PreviewBridge *bridge)
+{
+    m_bridge = bridge;
+    auto deco = m_bridge->createDecoration(this);
+    if (!deco) {
+        return;
+    }
+    auto client = bridge->lastCreatedClient();
+    if (!client) {
+        return;
+    }
+    auto updateColours = [client, this]() {
+        m_foregroundColor = client->color(ColorGroup::Active, ColorRole::Foreground);
+        m_titleBarColor = client->color(ColorGroup::Active, ColorRole::TitleBar);
+        emit foregroundColorChanged();
+        emit titleBarColorChanged();
+    };
+    connect(client, &PreviewClient::paletteChanged, this, updateColours);
+    updateColours();
+}
+
+
+
+
 }
 }
diff --git a/kcmkwin/kwindecoration/package/contents/ui/ButtonGroup.qml b/kcmkwin/kwindecoration/package/contents/ui/ButtonGroup.qml
--- a/kcmkwin/kwindecoration/package/contents/ui/ButtonGroup.qml
+++ b/kcmkwin/kwindecoration/package/contents/ui/ButtonGroup.qml
@@ -46,7 +46,6 @@
             Drag.keys: [ "decoButtonRemove", view.key ]
             Drag.active: dragArea.drag.active
             Drag.onActiveChanged: view.dragging = Drag.active
-            color: palette.windowText
         }
         MouseArea {
             id: dragArea
diff --git a/kcmkwin/kwindecoration/package/contents/ui/Buttons.qml b/kcmkwin/kwindecoration/package/contents/ui/Buttons.qml
--- a/kcmkwin/kwindecoration/package/contents/ui/Buttons.qml
+++ b/kcmkwin/kwindecoration/package/contents/ui/Buttons.qml
@@ -39,6 +39,11 @@
         bridge: bridgeItem.bridge
     }
 
+    KDecoration.DecorationPalete {
+        id: decoPalette
+        bridge: bridgeItem.bridge
+    }
+
     Rectangle {
         Layout.fillWidth: true
         color: palette.base
@@ -55,10 +60,7 @@
                 Layout.fillWidth: true
                 height: buttonPreviewRow.height + 2 * titleBarSpacing
                 radius: units.smallSpacing
-                gradient: Gradient {
-                    GradientStop { position: 0.0; color: palette.midlight }
-                    GradientStop { position: 1.0; color: palette.window }
-                }
+                color: decoPalette.titleBarColor
 
                 RowLayout {
                     id: buttonPreviewRow
@@ -80,6 +82,7 @@
                         Layout.fillWidth: true
                         horizontalAlignment: Text.AlignHCenter
                         font.bold: true
+                        color: decoPalette.foregroundColor
                         text: i18n("Titlebar")
                     }
                     ButtonGroup {
@@ -164,10 +167,10 @@
                     Rectangle {
                         id: availableButtonFrame
                         anchors.horizontalCenter: parent.horizontalCenter
-                        color: palette.window
                         radius: units.smallSpacing
                         width: buttonIconSize + units.largeSpacing
                         height: buttonIconSize + units.largeSpacing
+                        color: decoPalette.titleBarColor
 
                         KDecoration.Button {
                             id: availableButton
@@ -179,7 +182,6 @@
                             height: buttonIconSize
                             Drag.keys: [ "decoButtonAdd" ]
                             Drag.active: dragArea.drag.active
-                            color: palette.windowText
                         }
                         MouseArea {
                             id: dragArea