diff --git a/src/commoncomponents/BaseContextMenu.qml b/src/commoncomponents/BaseContextMenu.qml
index 1b6006bd97da3af87171b6f2b67f888dec93912b..09b016af8156ea9464ff9965818495b2be67cec8 100644
--- a/src/commoncomponents/BaseContextMenu.qml
+++ b/src/commoncomponents/BaseContextMenu.qml
@@ -43,5 +43,6 @@ Menu {
 
         border.width: commonBorderWidth
         border.color: JamiTheme.tabbarBorderColor
+        color: JamiTheme.backgroundColor
     }
 }
diff --git a/src/commoncomponents/DeleteAccountDialog.qml b/src/commoncomponents/DeleteAccountDialog.qml
index 1d22d16b2698bbfd75e8182f2792922ef4e975fb..c7040cc3d79ab78b87c8255ac8bfca093078da34 100644
--- a/src/commoncomponents/DeleteAccountDialog.qml
+++ b/src/commoncomponents/DeleteAccountDialog.qml
@@ -56,6 +56,7 @@ BaseDialog {
 
         implicitWidth: JamiTheme.preferredDialogWidth
         implicitHeight: JamiTheme.preferredDialogHeight
+        color: JamiTheme.secondaryBackgroundColor
 
         ColumnLayout {
             anchors.centerIn: parent
@@ -68,6 +69,7 @@ BaseDialog {
                 Layout.alignment: Qt.AlignHCenter
                 Layout.preferredWidth: deleteAccountContentRect.width - JamiTheme.preferredMarginSize * 2
 
+                color: JamiTheme.textColor
                 text: JamiStrings.confirmDeleteQuestion
 
                 font.pointSize: JamiTheme.textFontSize
@@ -84,6 +86,7 @@ BaseDialog {
                 Layout.alignment: Qt.AlignHCenter
                 Layout.preferredWidth: deleteAccountContentRect.width - JamiTheme.preferredMarginSize * 2
 
+                color: JamiTheme.textColor
                 text: SettingsAdapter.getAccountBestName()
 
                 font.pointSize: JamiTheme.textFontSize
@@ -101,6 +104,7 @@ BaseDialog {
                 Layout.alignment: Qt.AlignHCenter
                 Layout.preferredWidth: deleteAccountContentRect.width - JamiTheme.preferredMarginSize * 2
 
+                color: JamiTheme.textColor
                 text: SettingsAdapter.getCurrentAccount_Profile_Info_Uri()
 
                 font.pointSize: JamiTheme.textFontSize
diff --git a/src/commoncomponents/ElidedTextLabel.qml b/src/commoncomponents/ElidedTextLabel.qml
index 9b1fd9e697a36d494c0db2b07dad56681df1271b..5c6648f66c955e8c50039ea1f37f4db21c0ee87f 100644
--- a/src/commoncomponents/ElidedTextLabel.qml
+++ b/src/commoncomponents/ElidedTextLabel.qml
@@ -36,7 +36,7 @@ Label {
 
     horizontalAlignment: Text.AlignLeft
     verticalAlignment: Text.AlignVCenter
-    color: "black"
+    color: JamiTheme.textColor
 
     TextMetrics {
         id: elided
diff --git a/src/commoncomponents/GeneralMenuItem.qml b/src/commoncomponents/GeneralMenuItem.qml
index bdaf57ba7cfd4317996d854481b327e31a0fbfc4..fa226d5701f5b01538fbec21b23325c229f111e9 100644
--- a/src/commoncomponents/GeneralMenuItem.qml
+++ b/src/commoncomponents/GeneralMenuItem.qml
@@ -31,6 +31,7 @@ MenuItem {
 
     property string itemName: ""
     property string iconSource: ""
+    property string iconColor: ""
     property int preferredWidth: 220
     property int preferredHeight: 48
 
@@ -60,6 +61,7 @@ MenuItem {
 
             width: (visible ? 24 : 0)
             height: (visible ? 24 : 0)
+            color: iconColor !== ""? iconColor : JamiTheme.textColor
 
             visible: false
             opacity: 0.7
@@ -77,6 +79,7 @@ MenuItem {
             height: 30
 
             text: itemName
+            color: JamiTheme.textColor
             wrapMode: Text.WordWrap
             font.pointSize: JamiTheme.textFontSize
             horizontalAlignment: Text.AlignLeft
@@ -92,7 +95,7 @@ MenuItem {
             },
             State {
                 name: "normal"; when: !hovered
-                PropertyChanges { target: background; color: "white" }
+                PropertyChanges { target: background; color: JamiTheme.backgroundColor }
             }
         ]
     }
@@ -117,7 +120,6 @@ MenuItem {
         implicitHeight: preferredHeight
 
         border.width: 0
-        color: menuItem.down ? JamiTheme.normalButtonColor : "white"
 
         CustomBorder {
             commonBorder: false
diff --git a/src/commoncomponents/InfoLineEdit.qml b/src/commoncomponents/InfoLineEdit.qml
index 915d26983a83aa7f5cc2e55419077a194a195624..f5ed6f2954f1caec15681bed1d5622b380fdf58a 100644
--- a/src/commoncomponents/InfoLineEdit.qml
+++ b/src/commoncomponents/InfoLineEdit.qml
@@ -30,6 +30,7 @@ TextField{
     }
 
     wrapMode: Text.Wrap
+    color: JamiTheme.textColor
     readOnly: false
     selectByMouse: true
     font.pointSize: JamiTheme.settingsFontSize
diff --git a/src/commoncomponents/ListViewJami.qml b/src/commoncomponents/ListViewJami.qml
index b7eb7a9805844e765b13ddd36cf3e8f94aedf246..c395ece66de6eefc0ef5b0e1fc1bd32fbaa2d6df 100644
--- a/src/commoncomponents/ListViewJami.qml
+++ b/src/commoncomponents/ListViewJami.qml
@@ -34,7 +34,7 @@ Rectangle {
     border.width: 1
     border.color: JamiTheme.hoverColor
 
-    color: JamiTheme.normalButtonColor
+    color: JamiTheme.backgroundColor
 
     ListView {
         id: listView
diff --git a/src/commoncomponents/MaterialLineEdit.qml b/src/commoncomponents/MaterialLineEdit.qml
index 8ba3d8e292337ec14f1ad11c32f59dc81296b268..085c5289376923839ce35e096035508dedab2247 100644
--- a/src/commoncomponents/MaterialLineEdit.qml
+++ b/src/commoncomponents/MaterialLineEdit.qml
@@ -37,8 +37,8 @@ TextField {
 
     property int borderColorMode: MaterialLineEdit.NORMAL
     property var iconSource: ""
-    property var backgroundColor: JamiTheme.rgb256(240,240,240)
-    property var borderColor: "#333"
+    property var backgroundColor: JamiTheme.editBackgroundColor
+    property var borderColor: JamiTheme.greyBorderColor
 
     signal imageClicked
 
@@ -51,11 +51,11 @@ TextField {
         switch(borderColorMode){
         case MaterialLineEdit.SEARCHING:
             iconSource = "qrc:/images/jami_rolling_spinner.gif"
-            borderColor = "#333"
+            borderColor = JamiTheme.greyBorderColor
             break
         case MaterialLineEdit.NORMAL:
             iconSource = ""
-            borderColor = "#333"
+            borderColor = JamiTheme.greyBorderColor
             break
         case MaterialLineEdit.RIGHT:
             iconSource = "qrc:/images/icons/round-check_circle-24px.svg"
@@ -76,6 +76,7 @@ TextField {
     font.kerning: true
     horizontalAlignment: Text.AlignLeft
     verticalAlignment: Text.AlignVCenter
+    color: JamiTheme.textColor
 
     Image {
         id: lineEditImage
diff --git a/src/commoncomponents/ModalPopup.qml b/src/commoncomponents/ModalPopup.qml
index 1e2617bcecb6874cece85ab4cb146a52e779e070..6d171a80c3120a3835bd4290b5156a9d3c0419d7 100644
--- a/src/commoncomponents/ModalPopup.qml
+++ b/src/commoncomponents/ModalPopup.qml
@@ -19,6 +19,7 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtGraphicalEffects 1.14
+import net.jami.Models 1.0
 
 Popup {
     id: root
@@ -67,7 +68,7 @@ Popup {
         verticalOffset: 3.0
         radius: container.radius * 2
         samples: 16
-        color: "#80000000"
+        color: JamiTheme.shadowColor
         source: container
     }
 
diff --git a/src/commoncomponents/PasswordDialog.qml b/src/commoncomponents/PasswordDialog.qml
index 72b9283fb0d91f93f574304c56217425c01f770b..48a47ee5233f89d9d19d0d182970f5621d2183ed 100644
--- a/src/commoncomponents/PasswordDialog.qml
+++ b/src/commoncomponents/PasswordDialog.qml
@@ -123,6 +123,7 @@ BaseDialog {
 
         implicitWidth: JamiTheme.preferredDialogWidth
         implicitHeight: JamiTheme.preferredDialogHeight
+        color: JamiTheme.secondaryBackgroundColor
 
         ColumnLayout {
             anchors.centerIn: parent
diff --git a/src/commoncomponents/PhotoboothView.qml b/src/commoncomponents/PhotoboothView.qml
index c375d4546d17cee2d7b2b2432e6cc0d3faec4233..21434e3d39862f36261ae78fec6612acd707e46d 100644
--- a/src/commoncomponents/PhotoboothView.qml
+++ b/src/commoncomponents/PhotoboothView.qml
@@ -177,7 +177,7 @@ ColumnLayout {
 
             anchors.fill: previewWidget
             visible: false
-            color: "#fff"
+            color: JamiTheme.whiteColor
 
             OpacityAnimator on opacity {
                 id: flashAnimation
@@ -209,6 +209,7 @@ ColumnLayout {
             text: ""
             font.pointSize: 10
             font.kerning: true
+            imageColor: JamiTheme.textColor
 
             toolTipText: JamiStrings.takePhoto
 
@@ -264,6 +265,7 @@ ColumnLayout {
             source: "qrc:/images/icons/round-folder-24px.svg"
 
             toolTipText: JamiStrings.importFromFile
+            imageColor: JamiTheme.textColor
 
             onClicked: {
                 importFromFileToAvatar_Dialog.open()
diff --git a/src/commoncomponents/PreferenceItemDelegate.qml b/src/commoncomponents/PreferenceItemDelegate.qml
index 1bccbce40e2ba9a81e2e649f1bb6cac1c787ae23..0a453456a716c603cf2189676e2df3c8a144b826 100644
--- a/src/commoncomponents/PreferenceItemDelegate.qml
+++ b/src/commoncomponents/PreferenceItemDelegate.qml
@@ -95,6 +95,7 @@ ItemDelegate {
             Layout.leftMargin: 8
 
             text: preferenceName
+            color: JamiTheme.textColor
             font.pointSize: JamiTheme.settingsFontSize
             ToolTip.visible: hovered
             ToolTip.text: preferenceSummary
@@ -110,6 +111,7 @@ ItemDelegate {
             Layout.rightMargin: 8
             Layout.preferredWidth: preferredSize
             Layout.preferredHeight: preferredSize
+            imageColor: JamiTheme.textColor
 
             source: "qrc:/images/icons/round-settings-24px.svg"
 
diff --git a/src/commoncomponents/ResponsiveImage.qml b/src/commoncomponents/ResponsiveImage.qml
index cda7796ea3ec186d4ce00f793b0614d26581e432..08d1eb7289a9dbe95b625c728bba1659053b2476 100644
--- a/src/commoncomponents/ResponsiveImage.qml
+++ b/src/commoncomponents/ResponsiveImage.qml
@@ -18,6 +18,7 @@
 
 import QtQuick 2.14
 import QtQuick.Controls 2.14
+import QtGraphicalEffects 1.14
 import QtQuick.Window 2.14
 
 Image {
@@ -31,6 +32,7 @@ Image {
 
     property string normalSource
     property string checkedSource
+    property string color: "transparent"
 
     property real pixelDensity: Screen.pixelDensity
     property bool isSvg: {
@@ -50,6 +52,14 @@ Image {
     antialiasing: false
     asynchronous: true
 
+    layer {
+        enabled: true
+        effect: ColorOverlay {
+            id: overlay
+            color: root.color
+        }
+    }
+
     function setSourceSize() {
         if (isSvg) {
             sourceSize.width = Math.max(24, width)
diff --git a/src/commoncomponents/SettingParaCombobox.qml b/src/commoncomponents/SettingParaCombobox.qml
index bc56ac5b9241b5f5a770d3852f72212ed13123f5..8c842f095f9168101e21b016b47f46352ef9a489 100644
--- a/src/commoncomponents/SettingParaCombobox.qml
+++ b/src/commoncomponents/SettingParaCombobox.qml
@@ -43,12 +43,15 @@ ComboBox {
                 var currentItem = root.delegateModel.items.get(index)
                 return  currentItem.model[root.textRole].toString()
             }
-            color: "black"
+            color: JamiTheme.textColor
             font: root.font
             elide: Text.ElideRight
             verticalAlignment: Text.AlignVCenter
         }
         highlighted: root.highlightedIndex === index
+        background: Rectangle {
+            color: highlighted? JamiTheme.selectedColor : JamiTheme.editBackgroundColor
+        }
     }
 
     indicator: Canvas {
@@ -72,7 +75,7 @@ ComboBox {
             context.lineTo(width, 0);
             context.lineTo(width / 2, height);
             context.closePath();
-            context.fillStyle = root.pressed ? JamiTheme.pressColor : "black";
+            context.fillStyle = root.pressed ? JamiTheme.pressColor : JamiTheme.textColor;
             context.fill();
         }
     }
@@ -83,15 +86,16 @@ ComboBox {
 
         text: root.displayText
         font: root.font
-        color: "black"
+        color: JamiTheme.textColor
         verticalAlignment: Text.AlignVCenter
         elide: Text.ElideRight
     }
 
     background: Rectangle {
+        color: JamiTheme.editBackgroundColor
         implicitWidth: 120
         implicitHeight: 40
-        border.color: "white"
+        border.color: JamiTheme.editBackgroundColor
         border.width: root.visualFocus ? 2 : 1
         radius: 2
     }
@@ -112,6 +116,7 @@ ComboBox {
         }
 
         background: Rectangle {
+            color: JamiTheme.editBackgroundColor
             border.color: "gray"
             radius: 2
         }
diff --git a/src/commoncomponents/js/contextmenugenerator.js b/src/commoncomponents/js/contextmenugenerator.js
index c1186e86cf37088a72ecc922c64bc1410b69a3e3..c68f6efbb7ae7ece88a7a75ffa6b7c1f5eec98e5 100644
--- a/src/commoncomponents/js/contextmenugenerator.js
+++ b/src/commoncomponents/js/contextmenugenerator.js
@@ -87,7 +87,8 @@ function addMenuSeparator(separatorHeight, separatorColor) {
 
 function addMenuItem(itemName,
                      iconSource,
-                     onClickedCallback) {
+                     onClickedCallback,
+                     iconColor="") {
     if (!baseContextMenuObject.count){
         // Add default separator at the top.
         addMenuSeparator(8, "transparent")
@@ -99,6 +100,7 @@ function addMenuItem(itemName,
         menuItemObject = menuItemComponent.createObject(null,
                          {itemName: itemName,
                           iconSource: iconSource,
+                          iconColor: iconColor,
                           leftBorderWidth: baseContextMenuObject.commonBorderWidth,
                           rightBorderWidth: baseContextMenuObject.commonBorderWidth})
     } else if (menuItemComponent.status === Component.Error)
@@ -107,7 +109,7 @@ function addMenuItem(itemName,
     if (menuItemObject !== null) {
         menuItemObject.clicked.connect(function () {baseContextMenuObject.close()})
         menuItemObject.clicked.connect(onClickedCallback)
-        menuItemObject.icon.color = "black"
+        menuItemObject.icon.color = "green"
 
         baseContextMenuObject.addItem(menuItemObject)
 
diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml
index 65e19e2389e4168129dfd1ce54a834f7bc628243..8b8c0a5cf0920e681c2b74716758b93c4383c4fd 100644
--- a/src/constant/JamiTheme.qml
+++ b/src/constant/JamiTheme.qml
@@ -22,86 +22,113 @@ pragma Singleton
 import QtQuick 2.14
 
 Item {
-    // Color strings
-    property string blackColor: "#000000"
-    property string whiteColor: "#ffffff"
-    property string transparentColor: "transparent"
-    property string primaryForegroundColor: blackColor
-    property string primaryBackgroundColor: whiteColor
-
-    property string pressedButtonColor: "#a0a0a0"
-    property string hoveredButtonColor: "#c7c7c7"
-    property string normalButtonColor: "#e0e0e0"
-
-    property string invertedPressedButtonColor: Qt.rgba(0, 0, 0, 0.5)
-    property string invertedHoveredButtonColor: Qt.rgba(0, 0, 0, 0.6)
-    property string invertedNormalButtonColor: Qt.rgba(0, 0, 0, 0.75)
-
-    property string hoverColor: "#c7c7c7"
-    property string pressColor: "#c0c0c0"
-
-    property string tabbarBorderColor: "#e3e3e3"
-    property string presenceGreen: "#4cd964"
-    property string notificationRed: "#ff3b30"
-    property string unPresenceOrange: "orange"
-    property string backgroundColor: lightGrey_
-    property string backgroundDarkColor: rgb256(220, 220, 220)
-
-    property string screenSelectionBorderGreen: "green"
-
-    property string acceptButtonGreen: "#4caf50"
-    property string acceptButtonHoverGreen: "#5db761"
-    property string acceptButtonPressedGreen: "#449d48"
-
-    property string declineButtonRed: "#f44336"
-    property string declineButtonHoverRed: "#f5554a"
-    property string declineButtonPressedRed: "#db3c30"
-
-    property string hangUpButtonTintedRed: "#ff0000"
-    property string buttonTintedBlue: "#00aaff"
-    property string buttonTintedBlueHovered: "#0e81c5"
-    property string buttonTintedBluePressed: "#273261"
-    property string buttonTintedGrey: "#999"
-    property string buttonTintedGreyHovered: "#777"
-    property string buttonTintedGreyPressed: "#777"
-    property string buttonTintedGreyInactive: "#bbb"
-    property string buttonTintedBlack: "#333"
-    property string buttonTintedBlackHovered: "#111"
-    property string buttonTintedBlackPressed: "#000"
-    property string buttonTintedRed: "red"
-    property string buttonTintedRedHovered: "#c00"
-    property string buttonTintedRedPressed: "#b00"
-
-    property string selectionBlue: "#109ede"
-    property string selectionGreen: "#21be2b"
-    property string rubberBandSelectionBlue: "steelblue"
-
-    property string closeButtonLighterBlack: "#4c4c4c"
-
-    property string contactSearchBarPlaceHolderTextFontColor: "#767676"
-    property string contactSearchBarPlaceHolderGreyBackground: "#dddddd"
-
-    property string draftRed: "#cf5300"
-
-    property string sipInputButtonBackgroundColor: "#336699"
-    property string sipInputButtonHoverColor: "#4477aa"
-    property string sipInputButtonPressColor: "#5588bb"
-
-    property string accountCreationOtherStepColor: "grey"
-    property string accountCreationCurrentStepColor: "#28b1ed"
+    // General
+    property color blackColor: "#000000"
+    property color whiteColor: "#ffffff"
+    property color transparentColor: "transparent"
+    property color primaryForegroundColor: blackColor
+    property color primaryBackgroundColor: whiteColor
+    property color backgroundColor: lightGrey_
+    property color shadowColor: "#80000000"
+    property color secondaryBackgroundColor: "white"
+    property color greyBorderColor: "#333"
+    property color selectionBlue: "#109ede"
+
+    property color hoverColor: "#c7c7c7"
+    property color pressColor: "#c0c0c0"
+    property color selectedColor: "#e0e0e0"
+    property color editBackgroundColor: lightGrey_
+    property color textColor: primaryForegroundColor
+    property color tabbarBorderColor: "#e3e3e3"
+
+    // Side panel
+    property color presenceGreen: "#4cd964"
+    property color notificationRed: "#ff3b30"
+    property color unPresenceOrange: "orange"
+    property color contactSearchBarPlaceHolderTextFontColor: "#767676"
+    property color draftRed: "#cf5300"
+
+    // General buttons
+    property color pressedButtonColor: "#a0a0a0"
+    property color hoveredButtonColor: "#c7c7c7"
+    property color normalButtonColor: "#e0e0e0"
+
+    property color invertedPressedButtonColor: Qt.rgba(0, 0, 0, 0.5)
+    property color invertedHoveredButtonColor: Qt.rgba(0, 0, 0, 0.6)
+    property color invertedNormalButtonColor: Qt.rgba(0, 0, 0, 0.75)
+
+    property color buttonTintedBlue: "#00aaff"
+    property color buttonTintedBlueHovered: "#0e81c5"
+    property color buttonTintedBluePressed: "#273261"
+    property color buttonTintedGrey: "#999"
+    property color buttonTintedGreyHovered: "#777"
+    property color buttonTintedGreyPressed: "#777"
+    property color buttonTintedGreyInactive: "#bbb"
+    property color buttonTintedBlack: "#333"
+    property color buttonTintedBlackHovered: "#111"
+    property color buttonTintedBlackPressed: "#000"
+    property color buttonTintedRed: "red"
+    property color buttonTintedRedHovered: "#c00"
+    property color buttonTintedRedPressed: "#b00"
+
+    property color closeButtonLighterBlack: "#4c4c4c"
+
+    // Call buttons
+    property color acceptButtonGreen: "#4caf50"
+    property color acceptButtonHoverGreen: "#5db761"
+    property color acceptButtonPressedGreen: "#449d48"
+
+    property color declineButtonRed: "#f44336"
+    property color declineButtonHoverRed: "#f5554a"
+    property color declineButtonPressedRed: "#db3c30"
+
+    property color sipInputButtonBackgroundColor: "#336699"
+    property color sipInputButtonHoverColor: "#4477aa"
+    property color sipInputButtonPressColor: "#5588bb"
+
+    // Wizard / account manager
+    property color accountCreationOtherStepColor: "grey"
+    property color accountCreationCurrentStepColor: "#28b1ed"
+    property color wizardBlueButtons: "#28b1ed"
+    property color wizardGreenColor: "#aed581"
+    property color requiredFieldColor: "#ff1f62"
+    property color requiredFieldBackgroundColor: "#fee4e9"
+
+    // Misc
+    property color recordIconColor: "#dc2719"
+    property color successLabelColor: "#2b5084"
+    property color rubberBandSelectionBlue: "steelblue"
+    property color screenSelectionBorderGreen: "green"
 
     // Font.
-    property string faddedFontColor: "#c0c0c0"
-    property string faddedLastInteractionFontColor: "#505050"
+    property color faddedFontColor: "#a0a0a0"
+    property color faddedLastInteractionFontColor: "#505050"
+
+    // Jami theme colors
+    function rgb256(r, g, b) {
+        return Qt.rgba(r / 255, g / 255, b / 255, 1.0)
+    }
+
+    property color darkGrey: rgb256(63, 63, 63)
+    property color blueLogo_: rgb256(0, 7, 71)
+    property color lightGrey_: rgb256(242, 242, 242)
+    property color grey_: rgb256(160, 160, 160)
+    property color red_: rgb256(251, 72, 71)
+    property color urgentOrange_: rgb256(255, 165, 0)
+    property color green_: rgb256(127, 255, 0)
+    property color presenceGreen_: rgb256(76, 217, 100)
+
+    property int fadeDuration: 150
 
+    // Sizes
     property int splitViewHandlePreferredWidth: 4
-    property int textFontSize: 9
     property int tinyFontSize: 7
+    property int textFontSize: 9
     property int settingsFontSize: 9
     property int buttonFontSize: 9
+    property int menuFontSize: 12
     property int headerFontSize: 13
     property int titleFontSize: 16
-    property int menuFontSize: 12
 
     property int maximumWidthSettingsView: 600
     property int settingsHeaderpreferredHeight: 64
@@ -111,24 +138,4 @@ Item {
     property int preferredDialogWidth: 400
     property int preferredDialogHeight: 300
     property int minimumPreviewWidth: 120
-
-    // Misc.
-    property color white: "white"
-    property color darkGrey: rgb256(63, 63, 63)
-
-    // Jami theme colors
-    function rgb256(r, g, b) {
-        return Qt.rgba(r / 255, g / 255, b / 255, 1.0)
-    }
-
-    property color wizardBlueButtons: "#28b1ed"
-    property color blueLogo_: rgb256(0, 7, 71)
-    property color lightGrey_: rgb256(242, 242, 242)
-    property color grey_: rgb256(160, 160, 160)
-    property color red_: rgb256(251, 72, 71)
-    property color urgentOrange_: rgb256(255, 165, 0)
-    property color green_: rgb256(127, 255, 0)
-    property color presenceGreen_: rgb256(76, 217, 100)
-
-    property int fadeDuration: 150
 }
diff --git a/src/mainview/MainView.qml b/src/mainview/MainView.qml
index 3665569dd96b33255ef47eec1cf25aa6c208349a..22bf96b3d9bc49087b0e0177608716d7045eb653 100644
--- a/src/mainview/MainView.qml
+++ b/src/mainview/MainView.qml
@@ -239,6 +239,7 @@ Window {
     height: mainViewWindowPreferredHeight
     minimumWidth: minWidth
     minimumHeight: minHeight
+    color: JamiTheme.backgroundColor
 
     Connections {
         target: CallAdapter
@@ -282,7 +283,7 @@ Window {
             handle: Rectangle {
                 implicitWidth: JamiTheme.splitViewHandlePreferredWidth
                 implicitHeight: splitView.height
-                color:"white"
+                color: JamiTheme.backgroundColor
                 Rectangle {
                     implicitWidth: 1
                     implicitHeight: splitView.height
@@ -299,6 +300,7 @@ Window {
                 SplitView.maximumWidth: (sidePanelOnly ? splitView.width :
                                                       splitView.width - sidePanelViewStackPreferredWidth)
                 SplitView.fillHeight: true
+                color: JamiTheme.backgroundColor
 
                 // AccountComboBox is always visible
                 AccountComboBox {
diff --git a/src/mainview/components/AboutPopUp.qml b/src/mainview/components/AboutPopUp.qml
index 1a2681d6de5bacc687af8b25b2d56e0b46480913..8d758c49461c3fe54936b90a84a45e050fd5c992 100644
--- a/src/mainview/components/AboutPopUp.qml
+++ b/src/mainview/components/AboutPopUp.qml
@@ -34,6 +34,7 @@ ModalPopup {
         id: contentRect
 
         implicitWidth: 400
+        color: JamiTheme.backgroundColor
 
         ScrollView {
             id: aboutPopUpScrollView
@@ -83,6 +84,7 @@ ModalPopup {
                         verticalAlignment: Text.AlignVCenter
 
                         text: textMetricsjamiVersionText.text
+                        color: JamiTheme.textColor
 
                         TextMetrics {
                             id: textMetricsjamiVersionText
@@ -106,6 +108,7 @@ ModalPopup {
                         verticalAlignment: Text.AlignVCenter
 
                         text: textMetricsjamiSlogansText.text
+                        color: JamiTheme.textColor
 
                         TextMetrics {
                             id: textMetricsjamiSlogansText
@@ -124,6 +127,7 @@ ModalPopup {
 
                         wrapMode: Text.WordWrap
                         font.pointSize: JamiTheme.textFontSize
+                        color: JamiTheme.textColor
 
                         horizontalAlignment: Text.AlignHCenter
                         verticalAlignment: Text.AlignVCenter
@@ -143,6 +147,7 @@ ModalPopup {
                         Layout.preferredHeight: textMetricsjamiDeclarationHyperText.boundingRect.height
                         Layout.topMargin: 5
                         Layout.bottomMargin: 5
+                        color: JamiTheme.textColor
 
                         font.pointSize: JamiTheme.textFontSize
                         horizontalAlignment: Text.AlignHCenter
@@ -175,6 +180,7 @@ ModalPopup {
                         Layout.bottomMargin: 5
 
                         font.pointSize: JamiTheme.textFontSize
+                        color: JamiTheme.textColor
 
                         horizontalAlignment: Text.AlignHCenter
                         verticalAlignment: Text.AlignVCenter
@@ -201,6 +207,7 @@ ModalPopup {
 
                         horizontalAlignment: Text.AlignHCenter
                         verticalAlignment: Text.AlignVCenter
+                        color: JamiTheme.textColor
 
                         text: textMetricsjamiNoneWarrantyHyperText.text
                         onLinkActivated: Qt.openUrlExternally(link)
diff --git a/src/mainview/components/AccountComboBox.qml b/src/mainview/components/AccountComboBox.qml
index 9b2a1b779b75d016f34cd62c8dd9247cb46c6ff4..9544fd1082c1543a2985b0ac50ca83c5f10e49ea 100644
--- a/src/mainview/components/AccountComboBox.qml
+++ b/src/mainview/components/AccountComboBox.qml
@@ -20,6 +20,7 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
+import QtGraphicalEffects 1.14
 import net.jami.Models 1.0
 import net.jami.Adapters 1.0
 
@@ -89,6 +90,7 @@ ComboBox {
 
                 text: textMetricsUserAliasRoot.elidedText
                 font.pointSize: JamiTheme.textFontSize
+                color: JamiTheme.textColor
 
                 TextMetrics {
                     id: textMetricsUserAliasRoot
@@ -110,6 +112,13 @@ ComboBox {
                 width: 24
                 height: 24
 
+                layer {
+                    enabled: true
+                    effect: ColorOverlay {
+                        color: JamiTheme.textColor
+                    }
+                }
+
                 source: "qrc:/images/icons/round-arrow_drop_down-24px.svg"
             }
         }
@@ -228,6 +237,9 @@ ComboBox {
 
             source: "qrc:/images/icons/qr_code-24px.svg"
 
+            normalColor: JamiTheme.backgroundColor
+            imageColor: JamiTheme.textColor
+
             onClicked: {
                 if (visible)
                     qrDialog.open()
@@ -241,6 +253,8 @@ ComboBox {
                         "qrc:/images/icons/round-settings-24px.svg" :
                         "qrc:/images/icons/round-close-24px.svg"
 
+            normalColor: JamiTheme.backgroundColor
+            imageColor: JamiTheme.textColor
             toolTipText: !mainViewWindow.inSettingsView ?
                              JamiStrings.openSettings :
                              JamiStrings.closeSettings
diff --git a/src/mainview/components/AccountComboBoxPopup.qml b/src/mainview/components/AccountComboBoxPopup.qml
index 25888f920d9401ef894902c5a8445bf37532bfde..e744d3e608caaa54a49690a3b611ca1278fdc70d 100644
--- a/src/mainview/components/AccountComboBoxPopup.qml
+++ b/src/mainview/components/AccountComboBoxPopup.qml
@@ -96,6 +96,7 @@ Popup {
 
                     text: textMetricsUserAliasPopup.elidedText
                     font.pointSize: JamiTheme.textFontSize
+                    color: JamiTheme.textColor
 
                     TextMetrics {
                         id: textMetricsUserAliasPopup
@@ -154,10 +155,19 @@ Popup {
             implicitHeight: accountComboBox.height
 
             background: Rectangle {
-                color: comboBoxFooterItem.hovered? JamiTheme.normalButtonColor : JamiTheme.backgroundColor
+                color: comboBoxFooterItem.hovered? JamiTheme.hoverColor : JamiTheme.backgroundColor
             }
 
-            text: qsTr("Add Account") + "+"
+            contentItem: Text {
+                width: parent.width
+                height: parent.height
+
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignHCenter
+
+                text: qsTr("Add Account") + "+"
+                color: JamiTheme.textColor
+            }
             font.pointSize: JamiTheme.textFontSize
 
             onClicked: {
@@ -185,7 +195,7 @@ Popup {
         layer {
             enabled: true
             effect: DropShadow {
-                color: "#80000000"
+                color: JamiTheme.shadowColor
                 verticalOffset: 2
                 horizontalOffset: 2
                 samples: 16
diff --git a/src/mainview/components/CallViewContextMenu.qml b/src/mainview/components/CallViewContextMenu.qml
index 5ac838d10c3e4894ce4a8cc14759772cf0950409..6f99864ef212d34b68eabb24fcff221f44a9d107 100644
--- a/src/mainview/components/CallViewContextMenu.qml
+++ b/src/mainview/components/CallViewContextMenu.qml
@@ -70,7 +70,8 @@ Item {
                                          "qrc:/images/icons/av_icons/fiber_manual_record-24px.svg",
                                          function (){
                                               CallAdapter.recordThisCallToggle()
-                                         })
+                                         },
+                                         JamiTheme.recordIconColor)
 
         if (isAudioOnly && !isPaused)
             ContextMenuGenerator.addMenuItem(
diff --git a/src/mainview/components/ContactPicker.qml b/src/mainview/components/ContactPicker.qml
index 11db11f9e71d2b47a04f2fa3389e9039dab6a39c..2618e088b0fc05b0b23c2d037f8d4a18715867b2 100644
--- a/src/mainview/components/ContactPicker.qml
+++ b/src/mainview/components/ContactPicker.qml
@@ -45,7 +45,6 @@ Popup {
 
     contentItem: Rectangle {
         id: contactPickerPopupRect
-
         width: 250
 
         PushButton {
@@ -55,6 +54,7 @@ Popup {
             anchors.topMargin: 5
             anchors.right: contactPickerPopupRect.right
             anchors.rightMargin: 5
+            imageColor: JamiTheme.textColor
 
             source: "qrc:/images/icons/round-close-24px.svg"
 
@@ -78,6 +78,7 @@ Popup {
 
                 font.pointSize: JamiTheme.textFontSize
                 font.bold: true
+                color: JamiTheme.textColor
 
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
@@ -121,7 +122,7 @@ Popup {
         }
 
         radius: 10
-        color: "white"
+        color: JamiTheme.backgroundColor
     }
 
     onAboutToShow: {
diff --git a/src/mainview/components/ContactPickerItemDelegate.qml b/src/mainview/components/ContactPickerItemDelegate.qml
index e9aa9b621b4e41081ee18f0676999310ff687649..6094cdf4048ba8426511230b6278c5dc8b2c49bb 100644
--- a/src/mainview/components/ContactPickerItemDelegate.qml
+++ b/src/mainview/components/ContactPickerItemDelegate.qml
@@ -66,6 +66,7 @@ ItemDelegate {
                 text: DisplayName
             }
 
+            color: JamiTheme.textColor
             text: textMetricsContactPickerContactName.elidedText
             font.pointSize: JamiTheme.textFontSize
         }
@@ -95,7 +96,8 @@ ItemDelegate {
     background: Rectangle {
         id: itemSmartListBackground
 
-        color: "white"
+        color: JamiTheme.backgroundColor
+
 
         implicitWidth: contactPickerPopupRect.width
         implicitHeight: Math.max(
@@ -128,7 +130,7 @@ ItemDelegate {
         }
 
         onExited: {
-            itemSmartListBackground.color = "white"
+            itemSmartListBackground.color = JamiTheme.backgroundColor
         }
     }
 }
diff --git a/src/mainview/components/ContactSearchBar.qml b/src/mainview/components/ContactSearchBar.qml
index 716e3b79393ebc0e4196d72c6428da0254355837..56f7b19ef5ac5065111da96fafc4f60957270d91 100644
--- a/src/mainview/components/ContactSearchBar.qml
+++ b/src/mainview/components/ContactSearchBar.qml
@@ -34,7 +34,7 @@ Rectangle {
     }
 
     radius: height / 2
-    color: "white"
+    color: JamiTheme.secondaryBackgroundColor
 
     FocusScope {
         id: fakeFocus
@@ -63,6 +63,7 @@ Rectangle {
 
     TextField {
         id: contactSearchBar
+        color: JamiTheme.textColor
 
         anchors.verticalCenter: contactSearchBarRect.verticalCenter
         anchors.left: searchIconImage.right
diff --git a/src/mainview/components/ConversationSmartListViewItemDelegate.qml b/src/mainview/components/ConversationSmartListViewItemDelegate.qml
index a7f0819762a35f1c2c2a3e7d465c1dc4c71494f7..e51fd11a89f5e1a635c596b8550277b472312cab 100644
--- a/src/mainview/components/ConversationSmartListViewItemDelegate.qml
+++ b/src/mainview/components/ConversationSmartListViewItemDelegate.qml
@@ -59,7 +59,7 @@ ItemDelegate {
             } else {
                 itemSmartListBackground.color = Qt.binding(function () {
                     return InCall ? Qt.lighter(JamiTheme.selectionBlue,
-                                               1.8) : JamiTheme.normalButtonColor
+                                               1.8) : JamiTheme.selectedColor
                 })
                 ConversationsAdapter.selectConversation(
                             AccountAdapter.currentAccountId, UID)
@@ -127,6 +127,7 @@ ItemDelegate {
             }
             text: textMetricsConversationSmartListUserName.elidedText
             font.pointSize: JamiTheme.menuFontSize
+            color: JamiTheme.textColor
         }
 
         Text {
@@ -202,7 +203,7 @@ ItemDelegate {
         }
         onReleased: {
             if (!InCall) {
-                itemSmartListBackground.color = JamiTheme.normalButtonColor
+                itemSmartListBackground.color = JamiTheme.selectionBlue
             }
             if (mouse.button === Qt.RightButton) {
                 smartListContextMenu.parent = mouseAreaSmartListItemDelegate
@@ -242,7 +243,7 @@ ItemDelegate {
                 } else {
                     itemSmartListBackground.color = Qt.binding(function () {
                         return InCall ? Qt.lighter(JamiTheme.selectionBlue,
-                                                   1.8) : JamiTheme.normalButtonColor
+                                                   1.8) : JamiTheme.selectedColor
                     })
                 }
             }
diff --git a/src/mainview/components/MediaHandlerItemDelegate.qml b/src/mainview/components/MediaHandlerItemDelegate.qml
index e7e000c2f3d87524cec8154c9594056c5daebbff..75f98dad30dc61c2d9edd621782da10598a713b7 100644
--- a/src/mainview/components/MediaHandlerItemDelegate.qml
+++ b/src/mainview/components/MediaHandlerItemDelegate.qml
@@ -48,11 +48,13 @@ ItemDelegate {
             width: 30
 
             background: Rectangle{
+                color: "transparent"
                 Image {
                     anchors.centerIn: parent
                     source: "file:" + mediaHandlerIcon
                     width: 30
                     height: 30
+                    mipmap: true
                 }
             }
         }
@@ -62,6 +64,7 @@ ItemDelegate {
             Layout.leftMargin: 8
             Layout.fillWidth: true
             Layout.alignment: Qt.AlignVCenter
+            color: JamiTheme.textColor
 
             font.pointSize: JamiTheme.settingsFontSize
             font.kerning: true
@@ -90,6 +93,8 @@ ItemDelegate {
 
             background: Rectangle {
                 id: switchBackground
+
+                color: "transparent"
                 MouseArea {
                     id: btnMouseArea
                     anchors.fill: parent
@@ -115,9 +120,9 @@ ItemDelegate {
             Layout.alignment: Qt.AlingVCenter | Qt.AlignRight
             Layout.rightMargin: 8
 
-            normalColor: JamiTheme.primaryBackgroundColor
             source: "qrc:/images/icons/round-settings-24px.svg"
-
+            normalColor: JamiTheme.primaryBackgroundColor
+            imageColor: JamiTheme.textColor
             toolTipText: qsTr(pluginId)
 
             onClicked: openPreferences()
diff --git a/src/mainview/components/MediaHandlerPicker.qml b/src/mainview/components/MediaHandlerPicker.qml
index fec106108fe51848af86bc0b7cf91d315bf52376..9d72189e38beeee3b6873282b8b4937305c77eca 100644
--- a/src/mainview/components/MediaHandlerPicker.qml
+++ b/src/mainview/components/MediaHandlerPicker.qml
@@ -48,7 +48,7 @@ Popup {
             id: mediahandlerPickerPopupRect
             width: root.width
             height: childrenRect.height + 50
-            color: "white"
+            color: JamiTheme.backgroundColor
             radius: 10
 
             PushButton {
@@ -60,6 +60,7 @@ Popup {
                 anchors.rightMargin: 5
 
                 source: "qrc:/images/icons/round-close-24px.svg"
+                imageColor: JamiTheme.textColor
 
                 onClicked: {
                     root.close()
@@ -85,6 +86,7 @@ Popup {
 
                     horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
+                    color: JamiTheme.textColor
 
                     text: qsTr("Choose plugin")
                 }
@@ -137,7 +139,7 @@ Popup {
             id: mediahandlerPreferencePopupRect2
             width: root.width
             height: childrenRect.height + 50
-            color: "white"
+            color: JamiTheme.backgroundColor
             radius: 10
 
             PushButton {
@@ -147,6 +149,7 @@ Popup {
                 anchors.left: mediahandlerPreferencePopupRect2.left
                 anchors.leftMargin: 5
 
+                imageColor: JamiTheme.textColor
                 source: "qrc:/images/icons/ic_arrow_back_24px.svg"
                 toolTipText: qsTr("Go back to plugins list")
                 hoverEnabled: true
@@ -164,6 +167,7 @@ Popup {
                 anchors.rightMargin: 5
 
                 source: "qrc:/images/icons/round-close-24px.svg"
+                imageColor: JamiTheme.textColor
 
                 onClicked: {
                     stack.currentIndex = 0
@@ -188,6 +192,7 @@ Popup {
                     horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
 
+                    color: JamiTheme.textColor
                     text: qsTr("Preferences")
                 }
 
diff --git a/src/mainview/components/MessageWebView.qml b/src/mainview/components/MessageWebView.qml
index f0e46259cc49d452bdf56e8f0c8de6b76135b7e2..fdefc577e18067a7d28c8d8ff86c29655820421b 100644
--- a/src/mainview/components/MessageWebView.qml
+++ b/src/mainview/components/MessageWebView.qml
@@ -29,6 +29,8 @@ import "../../commoncomponents"
 Rectangle {
     id: messageWebViewRect
 
+    color: JamiTheme.backgroundColor
+
     property int messageWebViewHeaderPreferredHeight: 64
     property string headerUserAliasLabelText: ""
     property string headerUserUserNameLabelText: ""
@@ -207,6 +209,8 @@ Rectangle {
         width: messageWebViewRect.width
         height: messageWebViewRect.height - messageWebViewHeaderPreferredHeight
 
+        backgroundColor: JamiTheme.backgroundColor
+
         settings.javascriptEnabled: true
         settings.javascriptCanOpenWindows: true
         settings.fullScreenSupportEnabled: true
diff --git a/src/mainview/components/MessageWebViewHeader.qml b/src/mainview/components/MessageWebViewHeader.qml
index 5a6b5d30bb5d6c6d1e7ed72bff3e22ab0b340474..640a75c4da8571962033c470bbad2f5e4014e024 100644
--- a/src/mainview/components/MessageWebViewHeader.qml
+++ b/src/mainview/components/MessageWebViewHeader.qml
@@ -43,6 +43,8 @@ Rectangle {
         startAVideoCallButton.visible = visible
     }
 
+    color: JamiTheme.secondaryBackgroundColor
+
     RowLayout {
         id: messagingHeaderRectRowLayout
 
@@ -56,7 +58,8 @@ Rectangle {
 
             source: backToWelcomeViewButtonSource
 
-            normalColor: JamiTheme.primaryBackgroundColor
+            normalColor: JamiTheme.secondaryBackgroundColor
+            imageColor: JamiTheme.chatviewButtonColor
 
             onClicked: {
                 if (backToWelcomeViewButtonSource === "qrc:/images/icons/ic_arrow_back_24px.svg")
@@ -138,7 +141,8 @@ Rectangle {
 
                 source: "qrc:/images/icons/ic_phone_24px.svg"
 
-                normalColor: JamiTheme.primaryBackgroundColor
+                normalColor: JamiTheme.secondaryBackgroundColor
+                imageColor: JamiTheme.chatviewButtonColor
 
                 onClicked: {
                     MessagesAdapter.sendContactRequest()
@@ -158,7 +162,8 @@ Rectangle {
 
                 source: "qrc:/images/icons/videocam-24px.svg"
 
-                normalColor: JamiTheme.primaryBackgroundColor
+                normalColor: JamiTheme.secondaryBackgroundColor
+                imageColor: JamiTheme.chatviewButtonColor
 
                 onClicked: {
                     MessagesAdapter.sendContactRequest()
@@ -177,7 +182,8 @@ Rectangle {
                 width: sendContactRequestButton.visible ? preferredSize : 0
                 source: "qrc:/images/icons/person_add-24px.svg"
 
-                normalColor: JamiTheme.primaryBackgroundColor
+                normalColor: JamiTheme.secondaryBackgroundColor
+                imageColor: JamiTheme.chatviewButtonColor
 
                 onClicked: {
                     MessagesAdapter.sendContactRequest()
diff --git a/src/mainview/components/RecordBox.qml b/src/mainview/components/RecordBox.qml
index 1f26793e7725ce5f319e32dd33b02c214bd4dc58..9fbf42c7878af67be88414f9708642fcc8a117c3 100644
--- a/src/mainview/components/RecordBox.qml
+++ b/src/mainview/components/RecordBox.qml
@@ -37,11 +37,11 @@ Rectangle {
     }
 
     id: recBox
-    color: "#FFFFFF"
     width: 320
     height: 240
     radius: 5
     border.color: JamiTheme.tabbarBorderColor
+    color: JamiTheme.backgroundColor
 
     property string pathRecorder: ""
     property string timeText: "00:00"
@@ -168,7 +168,7 @@ Rectangle {
         x: -offset
         y: -offset
         ShapePath {
-            fillColor: "white"
+            fillColor: JamiTheme.backgroundColor
 
             strokeWidth: 1
             strokeColor: JamiTheme.tabbarBorderColor
@@ -216,7 +216,7 @@ Rectangle {
         visible: (isVideo && previewAvailable)
         Layout.alignment: Qt.AlignHCenter
         anchors.fill: parent
-        color: "black"
+        color: JamiTheme.blackColor
         radius: 5
 
         PreviewRenderer{
@@ -253,7 +253,7 @@ Rectangle {
         id: time
         visible: true
         text: "00:00"
-        color: (isVideo ? "white" : "black")
+        color: (isVideo? JamiTheme.whiteColor : JamiTheme.textColor)
         font.pointSize: (isVideo ? 12 : 20)
 
         anchors.centerIn: recordButton
@@ -270,10 +270,10 @@ Rectangle {
         anchors.bottom: recBox.bottom
         anchors.bottomMargin: 5
 
-        normalColor: isVideo? "#000000cc" : "white"
+        normalColor: isVideo? "transparent" : JamiTheme.backgroundColor
 
         source: "qrc:/images/icons/av_icons/fiber_manual_record-24px.svg"
-        imageColor: "#dc2719"
+        imageColor: JamiTheme.recordIconColor
 
         onClicked: {
             updateState(RecordBox.States.RECORDING)
@@ -290,10 +290,10 @@ Rectangle {
         anchors.bottom: recBox.bottom
         anchors.bottomMargin: 5
 
-        normalColor: isVideo? "#000000cc" : "white"
+        normalColor: isVideo? "transparent" : JamiTheme.backgroundColor
 
         source: "qrc:/images/icons/av_icons/stop-24px-red.svg"
-        imageColor: isVideo? "white" : "black"
+        imageColor: isVideo? JamiTheme.whiteColor : JamiTheme.textColor
 
         onClicked: {
             stopRecording()
@@ -311,10 +311,10 @@ Rectangle {
         anchors.bottom: recBox.bottom
         anchors.bottomMargin: 5
 
-        normalColor: isVideo? "#000000cc" : "white"
+        normalColor: isVideo? "transparent" : JamiTheme.backgroundColor
 
         source: "qrc:/images/icons/av_icons/re-record-24px.svg"
-        imageColor: isVideo? "white" : "black"
+        imageColor: isVideo? JamiTheme.whiteColor : JamiTheme.textColor
 
         onClicked: {
             stopRecording()
@@ -332,10 +332,10 @@ Rectangle {
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 5
 
-        normalColor: isVideo? "#000000cc" : "white"
+        normalColor: isVideo? "transparent" : JamiTheme.backgroundColor
 
         source: "qrc:/images/icons/av_icons/send-24px.svg"
-        imageColor: isVideo? "white" : "black"
+        imageColor: isVideo? JamiTheme.whiteColor : JamiTheme.textColor
 
         onClicked: {
             stopRecording()
diff --git a/src/mainview/components/SidePanel.qml b/src/mainview/components/SidePanel.qml
index ee9f0fada94d0178e3368bdf925e556f83b539c0..60a902421f674b0d82f4fa608e3bc277478db58c 100644
--- a/src/mainview/components/SidePanel.qml
+++ b/src/mainview/components/SidePanel.qml
@@ -19,6 +19,7 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
+import QtGraphicalEffects 1.14
 import net.jami.Models 1.0
 import net.jami.Adapters 1.0
 
@@ -132,6 +133,13 @@ Rectangle {
             width: 24
             height: 24
 
+            layer {
+                enabled: true
+                effect: ColorOverlay {
+                    color: JamiTheme.textColor
+                }
+            }
+
             fillMode: Image.PreserveAspectFit
             mipmap: true
             source: "qrc:/images/icons/ic_baseline-search-24px.svg"
@@ -145,6 +153,7 @@ Rectangle {
             anchors.leftMargin: 24
             width: searchStatusRect.width - searchIcon.width - 24*2 - 8
             text: ""
+            color: JamiTheme.textColor
             wrapMode: Text.WordWrap
             font.pointSize: JamiTheme.menuFontSize
         }
diff --git a/src/mainview/components/UserProfile.qml b/src/mainview/components/UserProfile.qml
index f0bff6a52004569ab63c442e3991d69d0d54a3bd..2b95112d61fb830dce270d9ed9d46a801134e591 100644
--- a/src/mainview/components/UserProfile.qml
+++ b/src/mainview/components/UserProfile.qml
@@ -41,6 +41,8 @@ BaseDialog {
         implicitWidth: 480
         implicitHeight: 400
 
+        color: JamiTheme.backgroundColor
+
         GridLayout {
             id: userProfileDialogLayout
 
@@ -75,6 +77,7 @@ BaseDialog {
 
                 font.pointSize: JamiTheme.titleFontSize
                 text: textMetricsContactAliasText.elidedText
+                color: JamiTheme.textColor
                 visible: aliasText ? (aliasText === idText ? false : true) : false
 
                 TextMetrics {
@@ -95,6 +98,7 @@ BaseDialog {
                 Layout.alignment: Qt.AlignRight
                 font.pointSize: JamiTheme.menuFontSize
                 text: qsTr("Information")
+                color: JamiTheme.textColor
             }
 
             Item { Layout.fillWidth: true }
@@ -115,6 +119,7 @@ BaseDialog {
 
                 font.pointSize: JamiTheme.textFontSize
                 text: textMetricsContactDisplayNameText.elidedText
+                color: JamiTheme.textColor
                 visible: registeredNameText ? (registeredNameText === idText ? false : true) : false
 
                 TextMetrics {
@@ -142,6 +147,7 @@ BaseDialog {
                 readOnly: true
                 font.pointSize: JamiTheme.textFontSize
                 text: textMetricsContactIdText.elidedText
+                color: JamiTheme.textColor
 
                 TextMetrics {
                     id: textMetricsContactIdText
diff --git a/src/mainview/components/WelcomePage.qml b/src/mainview/components/WelcomePage.qml
index 30431a63f0af98a08ea3ce67bbec07743e86c404..191d99c93bbbed4437396b3ee71b6d004be52ff1 100644
--- a/src/mainview/components/WelcomePage.qml
+++ b/src/mainview/components/WelcomePage.qml
@@ -28,6 +28,7 @@ Rectangle {
     id: welcomeRect
 
     anchors.fill: parent
+    color: JamiTheme.secondaryBackgroundColor
 
     Rectangle {
         id: welcomeRectComponentsGroup
@@ -36,6 +37,7 @@ Rectangle {
 
         width: Math.max(mainViewStackPreferredWidth, welcomeRect.width - 100)
         height: mainViewWindow.minimumHeight
+        color: JamiTheme.secondaryBackgroundColor
 
         ColumnLayout {
             id: welcomeRectComponentsGroupColumnLayout
@@ -70,6 +72,7 @@ Rectangle {
                 verticalAlignment: Text.AlignVCenter
 
                 text: JamiStrings.description
+                color: JamiTheme.textColor
             }
 
             Label {
@@ -98,6 +101,7 @@ Rectangle {
                 Layout.preferredWidth: welcomeRectComponentsGroup.width
                 Layout.preferredHeight: 65
                 Layout.bottomMargin: JamiTheme.preferredMarginSize
+                color: JamiTheme.secondaryBackgroundColor
 
                 visible: AccountAdapter.currentAccountType === Profile.Type.RING
 
@@ -115,6 +119,7 @@ Rectangle {
                         horizontalAlignment: Text.AlignHCenter
                         verticalAlignment: Text.AlignVCenter
                         text: textMetricsjamiRegisteredNameText.elidedText
+                        color: JamiTheme.textColor
                         TextMetrics {
                             id: textMetricsjamiRegisteredNameText
                             font: jamiRegisteredNameText.font
@@ -131,6 +136,7 @@ Rectangle {
 
                         preferredSize: 34
                         imagePadding: 4
+                        imageColor: JamiTheme.textColor
 
                         source: "qrc:/images/icons/content_copy-24px.svg"
 
diff --git a/src/settingsview/SettingsView.qml b/src/settingsview/SettingsView.qml
index eca1583002c70f653c4c56d1f591613b6403ae22..23129a1d2e64b1debd7596c672a99441499acc66 100644
--- a/src/settingsview/SettingsView.qml
+++ b/src/settingsview/SettingsView.qml
@@ -118,6 +118,7 @@ Rectangle {
         id: settingsViewRect
 
         anchors.fill: root
+        color: JamiTheme.secondaryBackgroundColor
 
         signal stopPreviewing
         signal stopBooth
diff --git a/src/settingsview/components/AccountProfile.qml b/src/settingsview/components/AccountProfile.qml
index 41a8719e44be61c94aa6b81a48366fb23b6597aa..f78b6d867e2d884680b80fc8a9e5be8279a41e87 100644
--- a/src/settingsview/components/AccountProfile.qml
+++ b/src/settingsview/components/AccountProfile.qml
@@ -68,6 +68,7 @@ ColumnLayout {
 
         font.pointSize: JamiTheme.headerFontSize
         font.kerning: true
+        color: JamiTheme.textColor
 
         horizontalAlignment: Text.AlignLeft
         verticalAlignment: Text.AlignVCenter
diff --git a/src/settingsview/components/AdvancedMediaSettings.qml b/src/settingsview/components/AdvancedMediaSettings.qml
index ebdbbcfe844e5c076c9ae2b69523b540d13217b8..8ded627b8b4d68a4b40954562b780d90de577293 100644
--- a/src/settingsview/components/AdvancedMediaSettings.qml
+++ b/src/settingsview/components/AdvancedMediaSettings.qml
@@ -43,6 +43,7 @@ ColumnLayout {
         Layout.preferredHeight: JamiTheme.preferredFieldHeight
 
         text: JamiStrings.media
+        color: JamiTheme.textColor
         font.pointSize: JamiTheme.headerFontSize
         font.kerning: true
 
diff --git a/src/settingsview/components/AdvancedNameServerSettings.qml b/src/settingsview/components/AdvancedNameServerSettings.qml
index 014379b17adfe733ea8dbc2fae7196ee7e1a2cb3..641bc2211d3dbcd900c1ed86652160d3327af4cb 100644
--- a/src/settingsview/components/AdvancedNameServerSettings.qml
+++ b/src/settingsview/components/AdvancedNameServerSettings.qml
@@ -48,6 +48,7 @@ ColumnLayout {
         verticalAlignment: Text.AlignVCenter
 
         text: qsTr("Name Server")
+        color: JamiTheme.textColor
         elide: Text.ElideRight
     }
 
diff --git a/src/settingsview/components/AdvancedOpenDHTSettings.qml b/src/settingsview/components/AdvancedOpenDHTSettings.qml
index 344ee9f22d852d429c6b4a313364984dc949ef99..3e95b6b6109cd7ffe4d3ac654b23fc33ff3ca961 100644
--- a/src/settingsview/components/AdvancedOpenDHTSettings.qml
+++ b/src/settingsview/components/AdvancedOpenDHTSettings.qml
@@ -50,7 +50,7 @@ ColumnLayout {
 
         horizontalAlignment: Text.AlignLeft
         verticalAlignment: Text.AlignVCenter
-
+        color: JamiTheme.textColor
         text: JamiStrings.openDHTConfig
         elide: Text.ElideRight
     }
diff --git a/src/settingsview/components/AdvancedPublicAddressSettings.qml b/src/settingsview/components/AdvancedPublicAddressSettings.qml
index 7bc0680eb221dad5996e17d917d5b30e8b2bf8a0..bf1268b61da1e9888e3ecba843f13a5f22ef6513 100644
--- a/src/settingsview/components/AdvancedPublicAddressSettings.qml
+++ b/src/settingsview/components/AdvancedPublicAddressSettings.qml
@@ -50,6 +50,7 @@ ColumnLayout {
         verticalAlignment: Text.AlignVCenter
 
         text: JamiStrings.publicAddress
+        color: JamiTheme.textColor
         elide: Text.ElideRight
     }
 
diff --git a/src/settingsview/components/AdvancedSettings.qml b/src/settingsview/components/AdvancedSettings.qml
index 799baaffe4c42fdf15511d795bf609d7e0898928..50458c9c99228de6afdd7ac66fd705840cf89285 100644
--- a/src/settingsview/components/AdvancedSettings.qml
+++ b/src/settingsview/components/AdvancedSettings.qml
@@ -63,6 +63,7 @@ ColumnLayout {
 
             horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
+            color: JamiTheme.textColor
 
             text: qsTr("Advanced Account Settings")
             elide: Text.ElideRight
@@ -73,6 +74,7 @@ ColumnLayout {
             Layout.preferredHeight: JamiTheme.preferredFieldHeight
             Layout.alignment: Qt.AlignHCenter
 
+            imageColor: JamiTheme.textColor
             toolTipText: JamiStrings.tipAdvancedSettingsDisplay
 
             preferredSize: 32
diff --git a/src/settingsview/components/AvSettingPage.qml b/src/settingsview/components/AvSettingPage.qml
index 23f1d50d79c27727ab5c3c0bcd76e0e35f561224..02e11587eac199b327565b38a2ba7f69cdc7ae6c 100644
--- a/src/settingsview/components/AvSettingPage.qml
+++ b/src/settingsview/components/AvSettingPage.qml
@@ -45,6 +45,8 @@ Rectangle {
         videoSettings.populateVideoSettings()
     }
 
+    color: JamiTheme.secondaryBackgroundColor
+
     ColumnLayout {
         id: avSettingsColumnLayout
 
diff --git a/src/settingsview/components/BannedContacts.qml b/src/settingsview/components/BannedContacts.qml
index 5cc72aaa538142d28277217cbfa0ae749511e205..81df34133adec8afdd9147ddcb52db452cc20ade 100644
--- a/src/settingsview/components/BannedContacts.qml
+++ b/src/settingsview/components/BannedContacts.qml
@@ -99,6 +99,7 @@ ColumnLayout {
             Layout.preferredHeight: JamiTheme.preferredFieldHeight
 
             toolTipText: JamiStrings.tipBannedContacts
+            imageColor: JamiTheme.textColor
 
             source: bannedListWidget.visible?
                         "qrc:/images/icons/expand_less-24px.svg" :
diff --git a/src/settingsview/components/BannedItemDelegate.qml b/src/settingsview/components/BannedItemDelegate.qml
index b393bb6f07ec8636f649e870867ee12e73951258..8cee4cf762841b65ccf748c8f5de4fb90fc06f1f 100644
--- a/src/settingsview/components/BannedItemDelegate.qml
+++ b/src/settingsview/components/BannedItemDelegate.qml
@@ -35,6 +35,9 @@ ItemDelegate {
     signal btnReAddContactClicked
 
     highlighted: ListView.isCurrentItem
+    background: Rectangle {
+        color: highlighted? JamiTheme.selectedColor : JamiTheme.editBackgroundColor
+    }
 
     onContactIDChanged: avatarImg.updateImage(contactID)
 
@@ -97,6 +100,7 @@ ItemDelegate {
                 verticalAlignment: Text.AlignVCenter
                 elide: Text.ElideRight
                 text: contactName === "" ? JamiStrings.name : contactName
+                color: JamiTheme.textColor
             }
 
             Label{
@@ -115,6 +119,7 @@ ItemDelegate {
                 verticalAlignment: Qt.AlignVCenter
                 elide: Text.ElideRight
                 text: contactID === "" ? JamiStrings.identifier : contactID
+                color: JamiTheme.textColor
             }
         }
 
@@ -127,6 +132,8 @@ ItemDelegate {
             Layout.preferredHeight: JamiTheme.preferredFieldHeight
 
             source: "qrc:/images/icons/person_add-24px.svg"
+            imageColor: JamiTheme.textColor
+            normalColor: highlighted? JamiTheme.selectedColor : JamiTheme.editBackgroundColor
 
             toolTipText: JamiStrings.reinstateContact
 
diff --git a/src/settingsview/components/CurrentAccountSettings.qml b/src/settingsview/components/CurrentAccountSettings.qml
index cc38e243d229138666baff4c1df2424b55e3b376..0fbc48cc9997a553c24df59471ce13adfd80e279 100644
--- a/src/settingsview/components/CurrentAccountSettings.qml
+++ b/src/settingsview/components/CurrentAccountSettings.qml
@@ -105,6 +105,8 @@ Rectangle {
                     JamiStrings.setPassword
     }
 
+    color: JamiTheme.secondaryBackgroundColor
+
     SimpleMessageDialog {
         id: msgDialog
 
diff --git a/src/settingsview/components/DeviceItemDelegate.qml b/src/settingsview/components/DeviceItemDelegate.qml
index 35979c19f6e4ba6256dd6ca5bd1288457ebe3463..6561681e52ad5579baa6e01affa76d9d403eaeec 100644
--- a/src/settingsview/components/DeviceItemDelegate.qml
+++ b/src/settingsview/components/DeviceItemDelegate.qml
@@ -61,6 +61,9 @@ ItemDelegate {
         }
     }
 
+    background: Rectangle {
+        color: highlighted? JamiTheme.selectedColor : JamiTheme.editBackgroundColor
+    }
     highlighted: ListView.isCurrentItem
 
     RowLayout {
@@ -70,6 +73,12 @@ ItemDelegate {
             id: deviceImage
             Layout.leftMargin: JamiTheme.preferredMarginSize
             Layout.alignment: Qt.AlignVCenter
+            layer {
+                enabled: true
+                effect: ColorOverlay {
+                    color: JamiTheme.textColor
+                }
+            }
 
             Layout.preferredWidth: 24
             Layout.preferredHeight: 24
@@ -92,7 +101,7 @@ ItemDelegate {
 
                 wrapMode: Text.NoWrap
                 readOnly: !editable
-                backgroundColor: "white"
+                backgroundColor: JamiTheme.editBackgroundColor
                 text: elidedTextDeviceName.elidedText
             }
 
@@ -122,6 +131,8 @@ ItemDelegate {
             Layout.rightMargin: 16
             Layout.preferredWidth: JamiTheme.preferredFieldHeight
             Layout.preferredHeight: JamiTheme.preferredFieldHeight
+            imageColor: JamiTheme.textColor
+            normalColor: highlighted? JamiTheme.selectedColor : JamiTheme.editBackgroundColor
 
             source: {
                 if(isCurrent) {
diff --git a/src/settingsview/components/GeneralSettingsPage.qml b/src/settingsview/components/GeneralSettingsPage.qml
index 6d9bcfc34e8408651e6c4695bc9612dd84cc3acf..d985a8909e168dfe01ef5ae9b6b83dafbf61bc86 100644
--- a/src/settingsview/components/GeneralSettingsPage.qml
+++ b/src/settingsview/components/GeneralSettingsPage.qml
@@ -35,6 +35,8 @@ Rectangle {
     property int contentWidth: generalSettingsColumnLayout.width
     property int preferredHeight: generalSettingsColumnLayout.implicitHeight
 
+    color: JamiTheme.secondaryBackgroundColor
+
     ColumnLayout {
         id: generalSettingsColumnLayout
 
diff --git a/src/settingsview/components/JamiUserIdentity.qml b/src/settingsview/components/JamiUserIdentity.qml
index b1e28d2efdfc0a53f07f0dd12981cca00cb95cd5..fba4c6a07d49b78b96e1bfacb2002383701f8502 100644
--- a/src/settingsview/components/JamiUserIdentity.qml
+++ b/src/settingsview/components/JamiUserIdentity.qml
@@ -68,6 +68,7 @@ ColumnLayout {
             anchors.verticalCenter: parent.verticalCenter
 
             text: JamiStrings.identifier
+            color: JamiTheme.textColor
             font.pointSize: JamiTheme.settingsFontSize
             font.kerning: true
 
@@ -94,6 +95,7 @@ ColumnLayout {
             selectByMouse: true
 
             text: currentRingIDText.elidedText
+            color: JamiTheme.textColor
 
             horizontalAlignment: Text.AlignRight
             verticalAlignment: Text.AlignVCenter
@@ -131,6 +133,7 @@ ColumnLayout {
             anchors.verticalCenter: parent.verticalCenter
 
             text: JamiStrings.username
+            color: JamiTheme.textColor
             font.pointSize: JamiTheme.settingsFontSize
             font.kerning: true
 
diff --git a/src/settingsview/components/KeyBoardShortcutKey.qml b/src/settingsview/components/KeyBoardShortcutKey.qml
index ef61de1d1d729a00875b9e72b80f1bb5daaf5c67..b54b9fab636ac343326c3019e75a98d8430ffad6 100644
--- a/src/settingsview/components/KeyBoardShortcutKey.qml
+++ b/src/settingsview/components/KeyBoardShortcutKey.qml
@@ -1,5 +1,6 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
+import net.jami.Models 1.0
 
 Item {
     property alias text: shortcutText.text
@@ -7,7 +8,7 @@ Item {
         id: keyRect
         width: t_metrics.tightBoundingRect.width + 10
         height: t_metrics.tightBoundingRect.height + 10
-        color: "#525252"
+        color: JamiTheme.buttonTintedGrey
         radius: 5
         anchors.centerIn: parent
         Text {
@@ -16,7 +17,7 @@ Item {
             anchors.leftMargin: 10
             font.family: "Arial"
             font.pointSize: 12
-            color: "white"
+            color: JamiTheme.whiteColor
         }
         TextMetrics {
             id:     t_metrics
diff --git a/src/settingsview/components/KeyBoardShortcutTable.qml b/src/settingsview/components/KeyBoardShortcutTable.qml
index 49b122b6d7ba079b10730ee8e0ac720d96e3470f..84b18bf61c272272e442b213a0bb65e6c388c017 100644
--- a/src/settingsview/components/KeyBoardShortcutTable.qml
+++ b/src/settingsview/components/KeyBoardShortcutTable.qml
@@ -37,6 +37,7 @@ BaseDialog {
 
         implicitWidth: 800
         implicitHeight: 600
+        color: JamiTheme.backgroundColor
 
         ListModel {
             id: keyboardGeneralShortcutsModel
@@ -160,8 +161,8 @@ BaseDialog {
                 implicitHeight: 50
                 anchors.left: parent.left
                 anchors.leftMargin: 20
-                color: "white"
-                border.color: "white"
+                color: JamiTheme.backgroundColor
+                border.color: JamiTheme.backgroundColor
 
                 Rectangle {
                     id: containerRectWithThreeKeys
@@ -171,6 +172,7 @@ BaseDialog {
 
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.verticalCenter: parent.verticalCenter
+                    color: JamiTheme.backgroundColor
 
                     Component.onCompleted: {
                         var componentKeyOne = Qt.createComponent("KeyBoardShortcutKey.qml")
@@ -187,7 +189,7 @@ BaseDialog {
                                                                 'anchors.verticalCenterOffset: -2;' +
                                                                 'anchors.left: containerRectWithThreeKeys.left;' +
                                                                 'anchors.leftMargin: 30;' +
-                                                                'color: "#525252";' +
+                                                                'color: "' + JamiTheme.textColor + '";' +
                                                                 'font.bold: true;' +
                                                                 'font.pointSize : 12;' +
                                                                 'text: "+"}',
@@ -209,7 +211,7 @@ BaseDialog {
                                                                     'anchors.verticalCenterOffset: -2;' +
                                                                     'anchors.left: containerRectWithThreeKeys.left;' +
                                                                     'anchors.leftMargin: 97;' +
-                                                                    'color: "#525252";' +
+                                                                    'color: "' + JamiTheme.textColor + '";' +
                                                                     'font.bold: true;' +
                                                                     'font.pointSize : 12;' +
                                                                     'text: "+"}',
@@ -234,8 +236,8 @@ BaseDialog {
                 implicitWidth: root.width / 2
                 implicitHeight: 50
 
-                color: "white"
-                border.color: "white"
+                color: JamiTheme.backgroundColor
+                border.color: JamiTheme.backgroundColor
                 Text {
                     id : descriptionText
                     anchors.verticalCenter: parent.verticalCenter
@@ -244,6 +246,7 @@ BaseDialog {
                     font.family: "Arial"
                     font.pointSize: JamiTheme.textFontSize
                     text: styleData.value
+                    color: JamiTheme.textColor
                 }
             }
         }
@@ -275,6 +278,7 @@ BaseDialog {
                             id: generalTableView
                             anchors.fill: parent
                             horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
+                            frameVisible: false
                             TableViewColumn {
                                 role: "Description"
                                 width: generalTableView.width / 2
@@ -294,20 +298,16 @@ BaseDialog {
                             model: keyboardGeneralShortcutsModel
                             rowDelegate: Rectangle {
                                 height: 50
-                                color: "white"
+                                color: JamiTheme.backgroundColor
                             }
                             style: TableViewStyle {
-                                alternateBackgroundColor: "white"
-                                frame: Rectangle {
-                                    border{
-                                        color: "transparent" // color of the border
-                                    }
-                                }
+                                backgroundColor: JamiTheme.backgroundColor
+                                alternateBackgroundColor: JamiTheme.backgroundColor
                                 headerDelegate: Rectangle {
                                     // Only first column's header is shown
                                     height: [t_metrics_general.tightBoundingRect.height + 10, 0][styleData.column % 2]
                                     width: [parent.width, 0][styleData.column % 2]
-                                    color: "white"
+                                    color: JamiTheme.backgroundColor
                                     radius: 4
                                     anchors.top: parent.top
                                     anchors.topMargin: 5
@@ -319,7 +319,7 @@ BaseDialog {
                                         font.family: "Arial"
                                         font.pointSize: JamiTheme.headerFontSize
                                         text: styleData.column % 2 ? "" : "General"
-                                        color: "black"
+                                        color: JamiTheme.textColor
                                     }
                                     TextMetrics {
                                         id:     t_metrics_general
@@ -334,11 +334,11 @@ BaseDialog {
                         implicitWidth: parent.width / 2
                         implicitHeight: parent.height
                         anchors.right: parent.right
-
                         TableView {
                             id: conversationsTableView
                             anchors.fill: parent
                             horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
+                            frameVisible: false
                             TableViewColumn {
                                 role: "Description"
                                 width: conversationsTableView.width / 2
@@ -358,20 +358,16 @@ BaseDialog {
                             model: keyboardConversationShortcutsModel
                             rowDelegate: Rectangle {
                                 height: 50
-                                color: "white"
+                                color: JamiTheme.backgroundColor
                             }
                             style: TableViewStyle {
-                                alternateBackgroundColor: "white"
-                                frame: Rectangle {
-                                    border{
-                                        color: "transparent" // color of the border
-                                    }
-                                }
+                                backgroundColor: JamiTheme.backgroundColor
+                                alternateBackgroundColor: JamiTheme.backgroundColor
                                 headerDelegate: Rectangle {
                                     // Only first column's header is shown
                                     height: [t_metrics_conversations.tightBoundingRect.height + 10, 0][styleData.column % 2]
                                     width: [parent.width, 0][styleData.column % 2]
-                                    color: "white"
+                                    color: JamiTheme.backgroundColor
                                     radius: 4
                                     anchors.top: parent.top
                                     anchors.topMargin: 5
@@ -383,7 +379,7 @@ BaseDialog {
                                         font.family: "Arial"
                                         font.pointSize: JamiTheme.headerFontSize
                                         text: styleData.column % 2 ? "" : JamiStrings.conversations
-                                        color: "black"
+                                        color: JamiTheme.textColor
                                     }
                                     TextMetrics {
                                         id:     t_metrics_conversations
@@ -405,6 +401,7 @@ BaseDialog {
                             id: callsTableView
                             anchors.fill: parent
                             horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
+                            frameVisible: false
                             TableViewColumn {
                                 role: "Description"
                                 width: callsTableView.width / 2
@@ -424,20 +421,16 @@ BaseDialog {
                             model: keyboardCallsShortcutsModel
                             rowDelegate: Rectangle {
                                 height: 50
-                                color: "white"
+                                color: JamiTheme.backgroundColor
                             }
                             style: TableViewStyle {
-                                alternateBackgroundColor: "white"
-                                frame: Rectangle {
-                                    border{
-                                        color: "transparent" // color of the border
-                                    }
-                                }
+                                backgroundColor: JamiTheme.backgroundColor
+                                alternateBackgroundColor: JamiTheme.backgroundColor
                                 headerDelegate: Rectangle {
                                     // Only first column's header is shown
                                     height: [t_metrics_calls.tightBoundingRect.height + 10, 0][styleData.column % 2]
                                     width: [parent.width, 0][styleData.column % 2]
-                                    color: "white"
+                                    color: JamiTheme.backgroundColor
                                     radius: 4
                                     anchors.top: parent.top
                                     anchors.topMargin: 5
@@ -449,7 +442,7 @@ BaseDialog {
                                         font.family: "Arial"
                                         font.pointSize: 12
                                         text: styleData.column % 2 ? "" : "Calls"
-                                        color: "black"
+                                        color: JamiTheme.textColor
                                     }
                                     // make sure that calls and settings header are parallel
                                     TextMetrics {
@@ -469,6 +462,7 @@ BaseDialog {
                             id: settingsTableView
                             anchors.fill: parent
                             horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
+                            frameVisible: false
                             TableViewColumn {
                                 role: "Description"
                                 width: settingsTableView.width / 2
@@ -488,20 +482,16 @@ BaseDialog {
                             model: keyboardSettingsShortcutsModel
                             rowDelegate: Rectangle {
                                 height: 50
-                                color: "white"
+                                color: JamiTheme.backgroundColor
                             }
                             style: TableViewStyle {
-                                alternateBackgroundColor: "white"
-                                frame: Rectangle {
-                                    border{
-                                        color: "transparent" // color of the border
-                                    }
-                                }
+                                backgroundColor: JamiTheme.backgroundColor
+                                alternateBackgroundColor: JamiTheme.backgroundColor
                                 headerDelegate: Rectangle {
                                     // Only first column's header is shown
                                     height: [t_metrics_settings.tightBoundingRect.height + 10, 0][styleData.column % 2]
                                     width: [parent.width, 0][styleData.column % 2]
-                                    color: "white"
+                                    color: JamiTheme.backgroundColor
                                     radius: 4
                                     anchors.top: parent.top
                                     anchors.topMargin: 5
@@ -513,7 +503,7 @@ BaseDialog {
                                         font.family: "Arial"
                                         font.pointSize: 12
                                         text: styleData.column % 2 ? "" : "Settings"
-                                        color: "black"
+                                        color: JamiTheme.textColor
                                     }
                                     TextMetrics {
                                         id:     t_metrics_settings
@@ -537,6 +527,7 @@ BaseDialog {
 
             width: JamiTheme.preferredFieldWidth * 2
             height: JamiTheme.preferredFieldHeight
+            background: Rectangle { color: "transparent" }
 
             currentIndex: 0
             TabButton {
@@ -552,6 +543,7 @@ BaseDialog {
                     horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
                     elide: Text.ElideRight
+                    color: JamiTheme.textColor
                 }
                 // customize tab button
                 background: Rectangle {
@@ -559,14 +551,14 @@ BaseDialog {
                     implicitWidth: JamiTheme.preferredFieldWidth
                     implicitHeight: JamiTheme.preferredFieldHeight
                     radius: 4
-                    color: pageOne.down ? "#e0e0e0" :"#fdfdfd"
+                    color: pageOne.down ? JamiTheme.selectedColor : "transparent"
                     MouseArea {
                         anchors.fill: parent
                         hoverEnabled: true
-                        onPressed: { buttonRectOne.color = "#c0c0c0"; tabBar.currentIndex = 0; pageOne.down = true; pageTwo.down = false;}
-                        onReleased: { buttonRectOne.color = "#e0e0e0"; }
-                        onEntered: { buttonRectOne.color = "#c7c7c7"; }
-                        onExited: { buttonRectOne.color = Qt.binding(function() { return pageOne.down ? "#e0e0e0" :"#fdfdfd" }); }
+                        onPressed: { buttonRectOne.color = JamiTheme.pressColor; tabBar.currentIndex = 0; pageOne.down = true; pageTwo.down = false;}
+                        onReleased: { buttonRectOne.color = JamiTheme.selectedColor; }
+                        onEntered: { buttonRectOne.color = JamiTheme.hoverColor; }
+                        onExited: { buttonRectOne.color = Qt.binding(function() { return pageOne.down ? JamiTheme.selectedColor : "transparent" }); }
                     }
                 }
             }
@@ -581,6 +573,7 @@ BaseDialog {
                     horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
                     elide: Text.ElideRight
+                    color: JamiTheme.textColor
                 }
 
                 background: Rectangle {
@@ -589,14 +582,14 @@ BaseDialog {
                     implicitHeight: JamiTheme.preferredFieldHeight
 
                     radius: 4
-                    color: pageTwo.down ? "#e0e0e0" :"#fdfdfd"
+                    color: pageTwo.down ? JamiTheme.selectedColor : "transparent"
                     MouseArea {
                         anchors.fill: parent
                         hoverEnabled: true
-                        onPressed: { buttonRectTwo.color = "#c0c0c0"; tabBar.currentIndex = 1; pageTwo.down = true; pageOne.down = false;}
-                        onReleased: { buttonRectTwo.color = "#e0e0e0"; }
-                        onEntered: { buttonRectTwo.color = "#c7c7c7"; }
-                        onExited: { buttonRectTwo.color = Qt.binding(function() { return pageTwo.down ? "#e0e0e0" :"#fdfdfd" }); }
+                        onPressed: { buttonRectTwo.color = JamiTheme.pressColor; tabBar.currentIndex = 1; pageTwo.down = true; pageOne.down = false;}
+                        onReleased: { buttonRectTwo.color = JamiTheme.selectedColor; }
+                        onEntered: { buttonRectTwo.color = JamiTheme.hoverColor; }
+                        onExited: { buttonRectTwo.color = Qt.binding(function() { return pageTwo.down ? JamiTheme.selectedColor : "transparent" }); }
                     }
                 }
             }
diff --git a/src/settingsview/components/LinkDeviceDialog.qml b/src/settingsview/components/LinkDeviceDialog.qml
index 5e0cef9a6baabb132d6cb07cb63e75f08e5d9f36..e21c3f6cfd0674adcc735dd69be5704150c18046 100644
--- a/src/settingsview/components/LinkDeviceDialog.qml
+++ b/src/settingsview/components/LinkDeviceDialog.qml
@@ -130,6 +130,7 @@ BaseDialog {
     contentItem: Rectangle {
         id: linkDeviceContentRect
 
+        color: JamiTheme.secondaryBackgroundColor
         implicitWidth: JamiTheme.preferredDialogWidth
         implicitHeight: JamiTheme.preferredDialogHeight
 
@@ -143,6 +144,7 @@ BaseDialog {
             Rectangle {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
+                color: JamiTheme.secondaryBackgroundColor
 
                 ColumnLayout {
                     anchors.centerIn: parent
@@ -151,6 +153,7 @@ BaseDialog {
                     Label {
                         Layout.alignment: Qt.AlignHCenter
                         text: JamiStrings.enterAccountPassword
+                        color: JamiTheme.textColor
                         font.pointSize: JamiTheme.textFontSize
                         font.kerning: true
                         horizontalAlignment: Text.AlignHCenter
@@ -229,6 +232,7 @@ BaseDialog {
             Rectangle {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
+                color: JamiTheme.secondaryBackgroundColor
 
                 ColumnLayout {
                     anchors.centerIn: parent
@@ -237,6 +241,7 @@ BaseDialog {
                     Label {
                         Layout.alignment: Qt.AlignCenter
                         text: JamiStrings.backupAccount
+                        color: JamiTheme.textColor
                         font.pointSize: JamiTheme.headerFontSize
                         font.kerning: true
                         horizontalAlignment: Text.AlignLeft
@@ -252,6 +257,7 @@ BaseDialog {
                         Layout.preferredHeight: 96
 
                         background: Rectangle {
+                            color: "transparent"
                             AnimatedImage {
                                 id: spinnerMovie
                                 anchors.fill: parent
@@ -270,6 +276,7 @@ BaseDialog {
             Rectangle {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
+                color: "transparent"
 
                 ColumnLayout {
                     anchors.centerIn: parent
@@ -286,6 +293,7 @@ BaseDialog {
 
                             Layout.alignment: Qt.AlignHCenter
                             text: qsTr("Your PIN is:")
+                            color: JamiTheme.textColor
                             font.pointSize: JamiTheme.headerFontSize
                             font.kerning: true
                             horizontalAlignment: Text.AlignHCenter
@@ -296,6 +304,7 @@ BaseDialog {
                             id: exportedPIN
                             Layout.alignment: Qt.AlignHCenter
                             text: qsTr("PIN")
+                            color: JamiTheme.textColor
                             font.pointSize: JamiTheme.headerFontSize
                             font.kerning: true
                             horizontalAlignment: Text.AlignHCenter
@@ -311,7 +320,7 @@ BaseDialog {
                         property int borderRadius : success? 15 : 0
                         property string backgroundColor : success? "whitesmoke" : "transparent"
                         property string borderColor : success? "lightgray" : "transparent"
-                        color: success ? "#2b5084" : "black"
+                        color: success ? JamiTheme.successLabelColor: JamiTheme.textColor
                         padding: success ? 8 : 0
 
                         wrapMode: Text.Wrap
@@ -325,13 +334,13 @@ BaseDialog {
                         horizontalAlignment: Text.AlignHCenter
                         verticalAlignment: Text.AlignVCenter
 
-                        background: Rectangle{
+                        background: Rectangle {
                             id: infoLabelBackground
                             anchors.fill: parent
                             border.width: infoLabel.borderWidth
                             border.color: infoLabel.borderColor
                             radius: infoLabel.borderRadius
-                            color: infoLabel.backgroundColor
+                            color: JamiTheme.secondaryBackgroundColor
                         }
                     }
 
diff --git a/src/settingsview/components/LinkedDevices.qml b/src/settingsview/components/LinkedDevices.qml
index b793f3f8f4777daadb37185864a33a52c4df93a9..3d1375536a385a74e46c90372577c578a3fe7d31 100644
--- a/src/settingsview/components/LinkedDevices.qml
+++ b/src/settingsview/components/LinkedDevices.qml
@@ -106,6 +106,7 @@ ColumnLayout {
         Layout.preferredHeight: JamiTheme.preferredFieldHeight
 
         text: qsTr("Linked Devices")
+        color: JamiTheme.textColor
 
         font.pointSize: JamiTheme.headerFontSize
         font.kerning: true
diff --git a/src/settingsview/components/MediaCodecDelegate.qml b/src/settingsview/components/MediaCodecDelegate.qml
index 087d7182338031f5a988b0ff89f1a272c32fdfd9..fa9e9ad9bd5ac76976da2e499b1509eed6e696cd 100644
--- a/src/settingsview/components/MediaCodecDelegate.qml
+++ b/src/settingsview/components/MediaCodecDelegate.qml
@@ -37,6 +37,9 @@ ItemDelegate {
     signal mediaCodecStateChange(string idToSet , bool isToBeEnabled)
 
     highlighted: ListView.isCurrentItem
+    background: Rectangle {
+        color: highlighted? JamiTheme.selectedColor : JamiTheme.editBackgroundColor
+    }
 
     RowLayout {
         anchors.fill: parent
@@ -55,6 +58,12 @@ ItemDelegate {
             text: ""
             indicator: Image {
                 anchors.centerIn: parent
+                layer {
+                    enabled: true
+                    effect: ColorOverlay {
+                        color: JamiTheme.textColor
+                    }
+                }
                 width: checkBoxWidth
                 height: checkBoxWidth
                 source: checkBoxIsEnabled.checked ?
@@ -92,6 +101,7 @@ ItemDelegate {
                 else if (mediaType == MediaSettings.AUDIO)
                     return mediaCodecName + " " + samplerRate + " Hz"
             }
+            color: JamiTheme.textColor
             elide: Text.ElideRight
             horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
diff --git a/src/settingsview/components/MediaSettings.qml b/src/settingsview/components/MediaSettings.qml
index 95585213039e169d8c6e9d97d243d7f7e759a4d4..27a4d88111507917c8e8835e71cfdb0d63bcfb7e 100644
--- a/src/settingsview/components/MediaSettings.qml
+++ b/src/settingsview/components/MediaSettings.qml
@@ -98,11 +98,13 @@ ColumnLayout {
 
         PushButton {
             source: "qrc:/images/icons/arrow_drop_down-24px.svg"
+            imageColor: JamiTheme.textColor
             onClicked: decreaseCodecPriority()
         }
 
         PushButton {
             source: "qrc:/images/icons/arrow_drop_up-24px.svg"
+            imageColor: JamiTheme.textColor
             onClicked: increaseCodecPriority()
         }
     }
diff --git a/src/settingsview/components/PluginItemDelegate.qml b/src/settingsview/components/PluginItemDelegate.qml
index f1f648e9027212bbde39656ef0cae900ca191c60..7380e2c7e3b7bed8d7a0b67097d9507ae8bc2a16 100644
--- a/src/settingsview/components/PluginItemDelegate.qml
+++ b/src/settingsview/components/PluginItemDelegate.qml
@@ -47,6 +47,7 @@ ItemDelegate {
             width: 30
 
             background: Rectangle {
+                color: "transparent"
                 Image {
                     anchors.centerIn: parent
                     source: "file:" + pluginIcon
@@ -62,6 +63,7 @@ ItemDelegate {
             id: labelDeviceId
             Layout.fillWidth: true
             Layout.leftMargin: 8
+            color: JamiTheme.textColor
 
             font.pointSize: JamiTheme.settingsFontSize
             font.kerning: true
@@ -82,6 +84,8 @@ ItemDelegate {
 
             background: Rectangle {
                 id: switchBackground
+
+                color: "transparent"
                 MouseArea {
                     id: btnMouseArea
                     hoverEnabled: true
@@ -106,6 +110,7 @@ ItemDelegate {
 
             source: "qrc:/images/icons/round-settings-24px.svg"
             normalColor: JamiTheme.primaryBackgroundColor
+            imageColor: JamiTheme.textColor
             toolTipText: JamiStrings.showHidePrefs
 
             onClicked: btnPreferencesPluginClicked()
diff --git a/src/settingsview/components/PluginListPreferencesView.qml b/src/settingsview/components/PluginListPreferencesView.qml
index 49858810b28548b6e6b5db805477cdcb40c00b9c..2654dae0ca00607b2dec4ba4d0ed2b7aafaf7931 100644
--- a/src/settingsview/components/PluginListPreferencesView.qml
+++ b/src/settingsview/components/PluginListPreferencesView.qml
@@ -41,6 +41,7 @@ Rectangle {
     property bool isLoaded: false
 
     visible: false
+    color: "transparent"
 
     signal uninstalled
 
@@ -124,6 +125,7 @@ Rectangle {
             text: qsTr(pluginName + "\npreferences")
             font.pointSize: JamiTheme.headerFontSize
             font.kerning: true
+            color: JamiTheme.textColor
 
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
@@ -208,7 +210,7 @@ Rectangle {
 
                 background: Rectangle {
                     anchors.fill: parent
-                    color: "white"
+                    color: JamiTheme.secondaryBackgroundColor
                 }
             }
         }
diff --git a/src/settingsview/components/PluginListSettingsView.qml b/src/settingsview/components/PluginListSettingsView.qml
index 1c6761d8213c7fa6609669bf1064ed4fc69be44a..a87d06ff7894ae43e06aa701725afd44a3f5c137 100644
--- a/src/settingsview/components/PluginListSettingsView.qml
+++ b/src/settingsview/components/PluginListSettingsView.qml
@@ -41,6 +41,7 @@ Rectangle {
     }
 
     visible: false
+    color: JamiTheme.secondaryBackgroundColor
 
     function openPluginFileSlot() {
         pluginPathDialog.open()
@@ -104,6 +105,7 @@ Rectangle {
             text: qsTr("Installed plugins")
             font.pointSize: JamiTheme.headerFontSize
             font.kerning: true
+            color: JamiTheme.textColor
 
             horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
@@ -160,7 +162,7 @@ Rectangle {
 
                 background: Rectangle {
                     anchors.fill: parent
-                    color: "white"
+                    color: JamiTheme.secondaryBackgroundColor
                 }
             }
         }
diff --git a/src/settingsview/components/PluginSettingsPage.qml b/src/settingsview/components/PluginSettingsPage.qml
index ba7cf74087c4cc84e40cda242d1ae6fbd0ff6c01..886e8d824f3beb515cda705c77599745f7735298 100644
--- a/src/settingsview/components/PluginSettingsPage.qml
+++ b/src/settingsview/components/PluginSettingsPage.qml
@@ -41,6 +41,8 @@ Rectangle {
         PluginModel.setPluginsEnabled(state)
     }
 
+    color: JamiTheme.secondaryBackgroundColor
+
     ColumnLayout {
         id: pluginSettingsColumnLayout
 
diff --git a/src/settingsview/components/RecordingSettings.qml b/src/settingsview/components/RecordingSettings.qml
index 961bfd180ebc7ce937d427f0611a5fac50c0e883..836ae3a4c593c4095fd83fdc65cbc40c1e6e9814 100644
--- a/src/settingsview/components/RecordingSettings.qml
+++ b/src/settingsview/components/RecordingSettings.qml
@@ -107,6 +107,7 @@ ColumnLayout {
             Layout.fillWidth: true
             Layout.rightMargin: JamiTheme.preferredMarginSize / 2
 
+            color: JamiTheme.textColor
             text: qsTr("Quality")
             font.pointSize: JamiTheme.settingsFontSize
             font.kerning: true
@@ -123,6 +124,7 @@ ColumnLayout {
             Layout.fillWidth: true
             Layout.rightMargin: JamiTheme.preferredMarginSize / 2
 
+            color: JamiTheme.textColor
             text: UtilsAdapter.getRecordQualityString(AVModel.getRecordQuality() / 100)
 
             font.pointSize: JamiTheme.settingsFontSize
@@ -163,6 +165,7 @@ ColumnLayout {
             Layout.fillHeight: true
 
             text: qsTr("Save in")
+            color: JamiTheme.textColor
             font.pointSize: JamiTheme.settingsFontSize
             font.kerning: true
 
diff --git a/src/settingsview/components/SettingMaterialButton.qml b/src/settingsview/components/SettingMaterialButton.qml
index c8664f667e9b18402890dda00f75f68cf03e55aa..5e584bb50e8d72f73882d584b7f745098d191fd2 100644
--- a/src/settingsview/components/SettingMaterialButton.qml
+++ b/src/settingsview/components/SettingMaterialButton.qml
@@ -58,6 +58,7 @@ RowLayout {
         verticalAlignment: Text.AlignVCenter
 
         text: root.titleField
+        color: JamiTheme.textColor
         elide: Text.ElideRight
     }
 
diff --git a/src/settingsview/components/SettingSpinBox.qml b/src/settingsview/components/SettingSpinBox.qml
index 5a2d209e66995d24eb55dee7b338d54d85221380..47278eae59125d2d05ef4f88898bf6cbe8445ad7 100644
--- a/src/settingsview/components/SettingSpinBox.qml
+++ b/src/settingsview/components/SettingSpinBox.qml
@@ -32,6 +32,7 @@ import "../../constant"
 RowLayout {
     id: root
 
+    property string borderColor: JamiTheme.greyBorderColor
     property string title: ""
     property int itemWidth
     property int bottomValue
@@ -42,12 +43,12 @@ RowLayout {
     signal newValue
 
     function setEnabled(status) {
-        spinBox.enabled = status
+        textField.enabled = status
     }
 
     function setValue(value) {
         root.valueField = value
-        spinBox.value = value
+        textField.text = value
     }
 
     Text {
@@ -55,15 +56,15 @@ RowLayout {
         Layout.rightMargin: JamiTheme.preferredMarginSize
         Layout.preferredHeight: JamiTheme.preferredFieldHeight
         text: root.title
+        color: JamiTheme.textColor
         elide: Text.ElideRight
         font.pointSize: JamiTheme.settingsFontSize
         font.kerning: true
         verticalAlignment: Text.AlignVCenter
     }
 
-    // TODO: use TextField
-    SpinBox {
-        id: spinBox
+    TextField {
+        id: textField
 
         Layout.preferredWidth: root.itemWidth
         Layout.preferredHeight: JamiTheme.preferredFieldHeight
@@ -73,20 +74,18 @@ RowLayout {
         font.pointSize: JamiTheme.buttonFontSize
         font.kerning: true
 
-        from: root.bottomValue
-        to: root.topValue
+        validator: IntValidator {bottom: root.bottomValue; top: root.topValue}
 
-        editable: true
-        up.indicator.width: 0
-        down.indicator.width: 0
-
-        textFromValue: function(value, locale) {
-            return Number(value)
+        onEditingFinished: {
+            root.valueField = text
+            newValue()
         }
 
-        onValueModified: {
-            root.valueField = value
-            newValue()
+        color: JamiTheme.textColor
+
+        background: Rectangle {
+            border.color: enabled? root.borderColor : "transparent"
+            color: JamiTheme.editBackgroundColor
         }
     }
 }
diff --git a/src/settingsview/components/SettingsHeader.qml b/src/settingsview/components/SettingsHeader.qml
index 08765f66b1ed0136f3016c8f3a6cb260909ac087..ccc577e817c75591b69cc87d801a2b2a1b14fe47 100644
--- a/src/settingsview/components/SettingsHeader.qml
+++ b/src/settingsview/components/SettingsHeader.qml
@@ -59,6 +59,7 @@ RowLayout {
         text: root.title
         font.pointSize: JamiTheme.titleFontSize
         font.kerning: true
+        color: JamiTheme.textColor
 
         horizontalAlignment: Text.AlignLeft
         verticalAlignment: Text.AlignVCenter
diff --git a/src/settingsview/components/SettingsMaterialLineEdit.qml b/src/settingsview/components/SettingsMaterialLineEdit.qml
index d6f0cda6a709896bac9d1300125069fd522ad9f6..e21884314b474c5eb1966ac6c96b43178e6f3d21 100644
--- a/src/settingsview/components/SettingsMaterialLineEdit.qml
+++ b/src/settingsview/components/SettingsMaterialLineEdit.qml
@@ -60,6 +60,7 @@ RowLayout {
         verticalAlignment: Text.AlignVCenter
 
         text: titleField
+        color: JamiTheme.textColor
         elide: Text.ElideRight
     }
 
diff --git a/src/settingsview/components/SettingsMenu.qml b/src/settingsview/components/SettingsMenu.qml
index 90ecf0056d42aed6e046a536d3f9b61aeaa0de18..c4f1bd4559942f3f36d9c0c22ac13096c87406dc 100644
--- a/src/settingsview/components/SettingsMenu.qml
+++ b/src/settingsview/components/SettingsMenu.qml
@@ -72,8 +72,9 @@ Rectangle {
 
                 buttonText: name
                 source: iconSource
+                imageColor: JamiTheme.textColor
                 pressedColor: Qt.lighter(JamiTheme.pressedButtonColor, 1.25)
-                checkedColor: JamiTheme.normalButtonColor
+                checkedColor: JamiTheme.selectedColor
                 hoveredColor: JamiTheme.hoverColor
                 fontPointSize: JamiTheme.textFontSize + 2
                 duration: 0
diff --git a/src/settingsview/components/SystemSettings.qml b/src/settingsview/components/SystemSettings.qml
index f77d05ac83c098db7e7c1f66b25c33416e5530b3..997c6f42413aa5256367d698cf78597e30e81778 100644
--- a/src/settingsview/components/SystemSettings.qml
+++ b/src/settingsview/components/SystemSettings.qml
@@ -56,6 +56,7 @@ ColumnLayout {
         Layout.fillWidth: true
 
         text: qsTr("System")
+        color: JamiTheme.textColor
         font.pointSize: JamiTheme.headerFontSize
         font.kerning: true
 
@@ -114,6 +115,7 @@ ColumnLayout {
             Layout.fillWidth: true
             Layout.fillHeight: true
 
+            color: JamiTheme.textColor
             text: JamiStrings.downloadFolder
             font.pointSize: JamiTheme.settingsFontSize
             font.kerning: true
diff --git a/src/settingsview/components/ToggleSwitch.qml b/src/settingsview/components/ToggleSwitch.qml
index 685d77e70c6fd10cb14304d061505aee54e25190..beaa891ff6fa4c022d11208e83e9128fabca5eef 100644
--- a/src/settingsview/components/ToggleSwitch.qml
+++ b/src/settingsview/components/ToggleSwitch.qml
@@ -52,6 +52,8 @@ RowLayout {
         elide: Text.ElideRight
         horizontalAlignment: Text.AlignLeft
         verticalAlignment: Text.AlignVCenter
+
+        color: JamiTheme.textColor
     }
 
     Switch {
diff --git a/src/settingsview/components/UpdateSettings.qml b/src/settingsview/components/UpdateSettings.qml
index 88ad7881229cd8e6feb02658b444447d256e0ac3..4eca90e3dd2d7a98981e5130907a18f441c01f0e 100644
--- a/src/settingsview/components/UpdateSettings.qml
+++ b/src/settingsview/components/UpdateSettings.qml
@@ -236,7 +236,7 @@ ColumnLayout {
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.verticalCenter: parent.verticalCenter
 
-                    color: JamiTheme.white
+                    color: JamiTheme.whiteColor
                     font.bold: true
                     font.pointSize: JamiTheme.textFontSize + 1
                     horizontalAlignment: Text.AlignHCenter
diff --git a/src/wizardview/components/BackupKeyPage.qml b/src/wizardview/components/BackupKeyPage.qml
index 9494df270831af34ffed4b7a3aa480fec7e4716a..c0d9f2bc5149a0781e96c21e47f405afced49bd0 100644
--- a/src/wizardview/components/BackupKeyPage.qml
+++ b/src/wizardview/components/BackupKeyPage.qml
@@ -80,6 +80,7 @@ Rectangle {
 
             Label {
                 text: JamiStrings.backupAccount
+                color: JamiTheme.textColor
                 font.pointSize: JamiTheme.textFontSize + 3
             }
 
@@ -91,7 +92,7 @@ Rectangle {
                 padding: 8
 
                 background: Rectangle {
-                    color: "#aed581"
+                    color: JamiTheme.wizardGreenColor
                     radius: 24
                     anchors.fill: parent
                 }
@@ -106,6 +107,7 @@ Rectangle {
             Layout.preferredHeight: preferredHeight
 
             text: JamiStrings.backupAccountInfos
+            color: JamiTheme.textColor
             wrapMode: Text.WordWrap
             font.pointSize: JamiTheme.textFontSize
 
@@ -123,6 +125,7 @@ Rectangle {
 
             Label {
                 text: JamiStrings.neverShowAgain
+                color: JamiTheme.textColor
                 font.pointSize: JamiTheme.textFontSize
             }
 
diff --git a/src/wizardview/components/ConnectToAccountManagerPage.qml b/src/wizardview/components/ConnectToAccountManagerPage.qml
index dcbaba0d826ca2dc36dd0b14c8f68095bc7b4ee2..2f6e5ab1757c7c84eea7a7900a893da7536b5275 100644
--- a/src/wizardview/components/ConnectToAccountManagerPage.qml
+++ b/src/wizardview/components/ConnectToAccountManagerPage.qml
@@ -76,6 +76,7 @@ Rectangle {
 
             Label {
                 text: JamiStrings.enterJAMSURL
+                color: JamiTheme.textColor
                 font.pointSize: JamiTheme.textFontSize + 3
             }
 
@@ -83,11 +84,11 @@ Rectangle {
                 Layout.alignment: Qt.AlignRight
 
                 text: JamiStrings.required
-                color: "#ff1f62"
+                color: JamiTheme.requiredFieldColor
                 padding: 8
 
                 background: Rectangle {
-                    color: "#fee4e9"
+                    color: JamiTheme.requiredFieldBackgroundColor
                     radius: 24
                     anchors.fill: parent
                 }
@@ -116,6 +117,7 @@ Rectangle {
             Layout.preferredWidth: connectBtn.width
 
             text: JamiStrings.jamsCredentials
+            color: JamiTheme.textColor
             wrapMode: Text.Wrap
 
             onTextChanged: Layout.preferredHeight =
@@ -204,6 +206,7 @@ Rectangle {
         height: 35
 
         normalColor: root.color
+        imageColor: JamiTheme.primaryForegroundColor
 
         source: "qrc:/images/icons/ic_arrow_back_24px.svg"
         toolTipText: JamiStrings.backToWelcome
diff --git a/src/wizardview/components/CreateAccountPage.qml b/src/wizardview/components/CreateAccountPage.qml
index 4cc978c83ed1b22ca85c872c4ddfad2e2f0da3cd..1e13963e6fbda5fad6eb7bf918365d38d0e1f20f 100644
--- a/src/wizardview/components/CreateAccountPage.qml
+++ b/src/wizardview/components/CreateAccountPage.qml
@@ -124,6 +124,7 @@ Rectangle {
 
                     Label {
                         text: isRendezVous ? JamiStrings.chooseNameRV : qsTr("Choose a username for your account")
+                        color: JamiTheme.textColor
                         font.pointSize: JamiTheme.textFontSize + 3
                     }
 
@@ -131,11 +132,11 @@ Rectangle {
                         Layout.alignment: Qt.AlignRight
 
                         text: JamiStrings.recommended
-                        color: "white"
+                        color: JamiTheme.whiteColor
                         padding: 8
 
                         background: Rectangle {
-                            color: "#aed581"
+                            color: JamiTheme.wizardGreenColor
                             radius: 24
                             anchors.fill: parent
                         }
@@ -249,6 +250,7 @@ Rectangle {
                     Label {
                         Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                         text: JamiStrings.createPassword
+                        color: JamiTheme.textColor
                         font.pointSize: JamiTheme.textFontSize + 3
                     }
 
@@ -268,7 +270,7 @@ Rectangle {
                         padding: 8
 
                         background: Rectangle {
-                            color: "#28b1ed"
+                            color: JamiTheme.wizardBlueButtons
                             radius: 24
                             anchors.fill: parent
                         }
@@ -313,6 +315,7 @@ Rectangle {
                     Layout.leftMargin: (root.width - createAccountButton.width) / 2
 
                     text: JamiStrings.notePasswordRecovery
+                    color: JamiTheme.textColor
                     wrapMode: Text.WordWrap
                     font.pointSize: JamiTheme.textFontSize
 
@@ -371,6 +374,7 @@ Rectangle {
         height: 35
 
         normalColor: root.color
+        imageColor: JamiTheme.primaryForegroundColor
 
         source: "qrc:/images/icons/ic_arrow_back_24px.svg"
         toolTipText: JamiStrings.back
diff --git a/src/wizardview/components/CreateSIPAccountPage.qml b/src/wizardview/components/CreateSIPAccountPage.qml
index f077aebfe8f20ff05e60284e62cbace5a419cc15..bd5fd117a1033d729db31db95316027d827905ce 100644
--- a/src/wizardview/components/CreateSIPAccountPage.qml
+++ b/src/wizardview/components/CreateSIPAccountPage.qml
@@ -70,6 +70,7 @@ Rectangle {
 
             Label {
                 text: JamiStrings.configureExistingSIP
+                color: JamiTheme.textColor
                 font.pointSize: JamiTheme.textFontSize + 3
             }
 
@@ -77,11 +78,11 @@ Rectangle {
                 Layout.alignment: Qt.AlignRight
 
                 text: JamiStrings.optional
-                color: "white"
+                color: JamiTheme.whiteColor
                 padding: 8
 
                 background: Rectangle {
-                    color: "#28b1ed"
+                    color: JamiTheme.wizardBlueButtons
                     radius: 24
                     anchors.fill: parent
                 }
@@ -171,6 +172,7 @@ Rectangle {
         height: 35
 
         normalColor: root.color
+        imageColor: JamiTheme.primaryForegroundColor
 
         source: "qrc:/images/icons/ic_arrow_back_24px.svg"
         toolTipText: JamiStrings.backToWelcome
diff --git a/src/wizardview/components/ImportFromBackupPage.qml b/src/wizardview/components/ImportFromBackupPage.qml
index 227fd92c6afc9ac73ba9b644ab5682011b666b00..ae5b6ab414c58be0ce2056ec3c2e2f57bf73805d 100644
--- a/src/wizardview/components/ImportFromBackupPage.qml
+++ b/src/wizardview/components/ImportFromBackupPage.qml
@@ -85,6 +85,7 @@ Rectangle {
             Layout.topMargin: backButtonMargins
 
             text: qsTr("Import from backup")
+            color: JamiTheme.textColor
             font.pointSize: JamiTheme.menuFontSize
         }
 
@@ -118,6 +119,7 @@ Rectangle {
             Layout.preferredHeight: preferredHeight
 
             text: JamiStrings.importAccountExplanation
+            color: JamiTheme.textColor
             wrapMode: Text.Wrap
 
             onTextChanged: {
@@ -195,6 +197,7 @@ Rectangle {
         height: 35
 
         normalColor: root.color
+        imageColor: JamiTheme.primaryForegroundColor
 
         source: "qrc:/images/icons/ic_arrow_back_24px.svg"
         toolTipText: qsTr("Back to welcome page")
diff --git a/src/wizardview/components/ImportFromDevicePage.qml b/src/wizardview/components/ImportFromDevicePage.qml
index 999931796ce89e16748e3a7e1669887295e2e3aa..02f49097fef2dcfea2bdea99e73f3f7fa0a51136 100644
--- a/src/wizardview/components/ImportFromDevicePage.qml
+++ b/src/wizardview/components/ImportFromDevicePage.qml
@@ -70,6 +70,7 @@ Rectangle {
             Layout.topMargin: backButtonMargins
 
             text: JamiStrings.mainAccountPassword
+            color: JamiTheme.textColor
             font.pointSize: JamiTheme.menuFontSize
         }
 
@@ -99,6 +100,7 @@ Rectangle {
             Layout.preferredHeight: preferredHeight
 
             text: JamiStrings.enterPIN
+            color: JamiTheme.textColor
             wrapMode: Text.Wrap
 
             onTextChanged: {
@@ -170,6 +172,7 @@ Rectangle {
         height: 35
 
         normalColor: root.color
+        imageColor: JamiTheme.primaryForegroundColor
 
         source: "qrc:/images/icons/ic_arrow_back_24px.svg"
         toolTipText: qsTr("Back to welcome page")
diff --git a/src/wizardview/components/ProfilePage.qml b/src/wizardview/components/ProfilePage.qml
index 87efaf6cd0222f5f8771d450cfd9c49a033d3b48..590d8f0dcf8c5ffe3a5c273158f94187a265c7cc 100644
--- a/src/wizardview/components/ProfilePage.qml
+++ b/src/wizardview/components/ProfilePage.qml
@@ -75,6 +75,7 @@ Rectangle {
 
             Label {
                 text: qsTr("Profile is only shared with contacts")
+                color: JamiTheme.textColor
                 font.pointSize: JamiTheme.textFontSize + 3
             }
 
@@ -82,11 +83,11 @@ Rectangle {
                 Layout.alignment: Qt.AlignRight
 
                 text: qsTr("Optional")
-                color: "white"
+                color: JamiTheme.whiteColor
                 padding: 8
 
                 background: Rectangle {
-                    color: "#28b1ed"
+                    color: JamiTheme.wizardBlueButtons
                     radius: 24
                     anchors.fill: parent
                 }
diff --git a/src/wizardview/components/WelcomePage.qml b/src/wizardview/components/WelcomePage.qml
index b24b9afe58f10bb8a3ad45ea7bda15cfdce308e7..7b87b587e203334e954c9167f88392804e63f91b 100644
--- a/src/wizardview/components/WelcomePage.qml
+++ b/src/wizardview/components/WelcomePage.qml
@@ -36,7 +36,7 @@ Rectangle {
     signal leavePage
     signal scrollToBottom
 
-    color: JamiTheme.backgroundColor
+    color: "transparent"
 
     ColumnLayout {
         id: welcomePageColumnLayout
@@ -53,6 +53,7 @@ Rectangle {
             Layout.preferredHeight: contentHeight
 
             text: qsTr("Welcome to")
+            color: JamiTheme.textColor
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
 
@@ -250,6 +251,7 @@ Rectangle {
         visible: UtilsAdapter.getAccountListSize()
 
         normalColor: root.color
+        imageColor: JamiTheme.primaryForegroundColor
 
         source: "qrc:/images/icons/ic_arrow_back_24px.svg"
         toolTipText: JamiStrings.back