diff --git a/share/qtcreator/qmldesigner/welcomepage/TwitterButton.qml b/share/qtcreator/qmldesigner/welcomepage/TwitterButton.qml
index a7d93168264..061db8938a8 100644
--- a/share/qtcreator/qmldesigner/welcomepage/TwitterButton.qml
+++ b/share/qtcreator/qmldesigner/welcomepage/TwitterButton.qml
@@ -24,7 +24,7 @@
 ****************************************************************************/
 
 import QtQuick 2.15
-import QtQuick.Controls 2.12
+import QtQuick.Templates 2.15
 import WelcomeScreen 1.0
 import StudioTheme 1.0 as StudioTheme
 
@@ -66,7 +66,7 @@ Item {
     states: [
         State {
             name: "darkNormal"
-            when: StudioTheme.Values.style === 0 && !mouseArea.containsMouse
+            when: !StudioTheme.Values.isLightTheme && !mouseArea.containsMouse
                   && !mouseArea.pressed
 
             PropertyChanges {
@@ -86,7 +86,7 @@ Item {
         },
         State {
             name: "lightNormal"
-            when: StudioTheme.Values.style !== 0 && !mouseArea.containsMouse
+            when: StudioTheme.Values.isLightTheme && !mouseArea.containsMouse
                   && !mouseArea.pressed
 
             PropertyChanges {
@@ -106,8 +106,8 @@ Item {
         },
         State {
             name: "hover"
-            when: (StudioTheme.Values.style === 0
-                   || StudioTheme.Values.style !== 0) && mouseArea.containsMouse
+            when: (!StudioTheme.Values.isLightTheme
+                   || StudioTheme.Values.isLightTheme) && mouseArea.containsMouse
                   && !mouseArea.pressed
 
             PropertyChanges {
@@ -132,8 +132,8 @@ Item {
         },
         State {
             name: "pressed"
-            when: (StudioTheme.Values.style === 0
-                   || StudioTheme.Values.style !== 0)
+            when: (StudioTheme.Values.isLightTheme
+                   || !StudioTheme.Values.isLightTheme)
                   && (mouseArea.containsMouse || !mouseArea.containsMouse)
                   && mouseArea.pressed
 
diff --git a/share/qtcreator/qmldesigner/welcomepage/YoutubeButton.qml b/share/qtcreator/qmldesigner/welcomepage/YoutubeButton.qml
index 062ea104078..987aea86b1c 100644
--- a/share/qtcreator/qmldesigner/welcomepage/YoutubeButton.qml
+++ b/share/qtcreator/qmldesigner/welcomepage/YoutubeButton.qml
@@ -24,7 +24,7 @@
 ****************************************************************************/
 
 import QtQuick 2.15
-import QtQuick.Controls 2.12
+import QtQuick.Templates 2.15
 import WelcomeScreen 1.0
 import StudioTheme 1.0 as StudioTheme
 
@@ -74,7 +74,7 @@ Item {
     states: [
         State {
             name: "darkNormal"
-            when: StudioTheme.Values.style === 0 && !mouseArea.containsMouse
+            when: !StudioTheme.Values.isLightTheme && !mouseArea.containsMouse
                   && !mouseArea.pressed
 
             PropertyChanges {
@@ -99,7 +99,7 @@ Item {
         },
         State {
             name: "lightNormal"
-            when: StudioTheme.Values.style !== 0 && !mouseArea.containsMouse
+            when: StudioTheme.Values.isLightTheme && !mouseArea.containsMouse
                   && !mouseArea.pressed
 
             PropertyChanges {
@@ -124,7 +124,7 @@ Item {
         },
         State {
             name: "darkHover"
-            when: StudioTheme.Values.style === 0 && mouseArea.containsMouse
+            when: !StudioTheme.Values.isLightTheme && mouseArea.containsMouse
                   && !mouseArea.pressed
 
             PropertyChanges {
@@ -153,7 +153,7 @@ Item {
         },
         State {
             name: "lightHover"
-            when: StudioTheme.Values.style !== 0 && mouseArea.containsMouse
+            when: StudioTheme.Values.isLightTheme && mouseArea.containsMouse
                   && !mouseArea.pressed
 
             PropertyChanges {
@@ -183,7 +183,7 @@ Item {
         },
         State {
             name: "darkPressed"
-            when: StudioTheme.Values.style === 0
+            when: !StudioTheme.Values.isLightTheme
                   && (mouseArea.containsMouse || !mouseArea.containsMouse)
                   && mouseArea.pressed
 
@@ -215,7 +215,7 @@ Item {
         },
         State {
             name: "lightPressed"
-            when: StudioTheme.Values.style !== 0
+            when: StudioTheme.Values.isLightTheme
                   && (mouseArea.containsMouse || !mouseArea.containsMouse)
                   && mouseArea.pressed