feat: implement new colors for dark mode

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatButtons.qml

@@ -14,7 +14,7 @@ Rectangle {
     width: buttonRow.width + buttonsContainer.containerMargin * 2
     height: 36
     radius: Style.current.radius
-    color: Style.current.background
+    color: Style.current.modalBackground
     z: 52
 
     layer.enabled: true

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml

@@ -65,7 +65,7 @@ Item {
                 + (retry.visible && !chatTime.visible ? Style.current.smallPadding : 0)
         width: parent.width
 
-        color: root.isHovered || isMessageActive ? (hasMention ? Style.current.mentionMessageHoverColor : Style.current.backgroundHover) :
+        color: root.isHovered || isMessageActive ? (hasMention ? Style.current.mentionMessageHoverColor : Style.current.backgroundHoverLight) :
                                                    (hasMention ? Style.current.mentionMessageColor : Style.current.transparent)
 
 

ui/app/AppLayouts/Chat/CommunityComponents/CommunityHeaderButton.qml

@@ -61,7 +61,7 @@ Button {
             btnBackground.color = "transparent"
         }
         onEntered: {
-            btnBackground.color = Style.current.topBarChatInfoColor
+            btnBackground.color = Style.current.backgroundHover
         }
     }
 }

ui/app/AppLayouts/Chat/components/GroupChatPopup.qml

@@ -90,7 +90,7 @@ ModalPopup {
           anchors.top: lblNewGroup.bottom
           //% "%1 / 10 members"
           text: qsTrId("%1-/-10-members").arg(memberCount)
-          color: Style.current.darkGrey
+          color: Style.current.secondaryText
           font.pixelSize: 15
       }
     }

ui/imports/Themes/DarkTheme.qml

@@ -7,38 +7,39 @@ Theme {
     property color black: "#000000"
     property color almostBlack: "#141414"
     property color grey: "#EEF2F5"
-    property color lightGrey: "#ccd0d4"
+    property color lightGrey: "#7A7A7A"
+    property color darkGrey: "#373737"
+    property color evenDarkerGrey: "#4b4b4b"
     property color lightBlue: "#ECEFFC"
     property color cyan: "#00FFFF"
-    property color blue: "#758EF0"
+    property color blue: "#88B0FF"
     property color darkAccentBlue: "#2946C4"
     property color transparent: "#00000000"
-    property color darkGrey: "#838C91"
-    property color evenDarkerGrey: "#252528"
     property color lightBlueText: "#8f9fec"
     property color darkBlue: "#3c55c9"
     property color darkBlueBtn: "#5a70dd"
-    property color red: "#FC5F5F"
+    property color red: "#FF5C7B"
     property color lightRed: "#FFEAEE"
     property color green: "#4EBC60"
     property color turquoise: "#007b7d"
     property color tenPercentWhite: Qt.rgba(255, 255, 255, 0.1)
     property color tenPercentBlue: Qt.rgba(67, 96, 223, 0.1)
 
-    property color background: almostBlack
+    property color background: "#212121"
-    property color border: evenDarkerGrey
+    property color border: darkGrey
     property color borderSecondary: tenPercentWhite
     property color borderTertiary: blue
     property color textColor: white
     property color textColorTertiary: blue
     property color currentUserTextColor: white
-    property color secondaryBackground: "#23252F"
+    property color secondaryBackground: "#353a4d"
-    property color inputBackground: secondaryBackground
+    property color inputBackground: darkGrey
     property color inputBorderFocus: blue
-    property color inputColor: darkGrey
+    property color inputColor: textColor
-    property color modalBackground: background
+    property color modalBackground: darkGrey
     property color backgroundHover: evenDarkerGrey
-    property color secondaryText: darkGrey
+    property color backgroundHoverLight: darkGrey
+    property color secondaryText: lightGrey
     property color secondaryHover: tenPercentWhite
     property color primary: blue
     property color danger: red
@@ -48,13 +49,12 @@ Theme {
     property color backgroundTertiary: tenPercentBlue
     property color pillButtonTextColor: almostBlack
     property color chatReplyCurrentUser: lightGrey
-    property color topBarChatInfoColor: evenDarkerGrey
     property color codeBackground: "#2E386B"
     property color primarySelectionColor: "#b4c8ff"
     property color emojiReactionBackground: "#2d2823"
     property color emojiReactionBackgroundHovered: "#3a3632"
     property color emojiReactionActiveBackgroundHovered: "#cbd5f1"
-    property color mentionColor: "#47B6D1"
+    property color mentionColor: "#7BE5FF"
     property color mentionBgColor: Qt.rgba(71, 182, 209, 0.1)
     property color mentionMessageColor: "#E5F8FD"
     property color mentionMessageHoverColor: mentionBgColor
@@ -62,8 +62,8 @@ Theme {
     property color buttonForegroundColor: blue
     property color buttonBackgroundColor: secondaryBackground
     property color buttonSecondaryColor: darkGrey
-    property color buttonDisabledForegroundColor: buttonSecondaryColor
+    property color buttonDisabledForegroundColor: lightGrey
-    property color buttonDisabledBackgroundColor: evenDarkerGrey
+    property color buttonDisabledBackgroundColor: darkGrey
     property color buttonWarnBackgroundColor: "#FFEAEE"
     property color buttonHoveredWarnBackgroundColor: red
     property color buttonHoveredBackgroundColor: blue

ui/imports/Themes/LightTheme.qml

@@ -37,6 +37,7 @@ Theme {
     property color inputColor: black
     property color modalBackground: white2
     property color backgroundHover: grey
+    property color backgroundHoverLight: lightGrey
     property color secondaryText: darkGrey
     property color secondaryHover: tenPercentBlack
     property color primary: blue
@@ -47,7 +48,6 @@ Theme {
     property color backgroundTertiary: tenPercentBlue
     property color pillButtonTextColor: white
     property color chatReplyCurrentUser: darkGrey
-    property color topBarChatInfoColor: grey
     property color codeBackground: "#2E386B"
     property color primarySelectionColor: "#b4c8ff"
     property color emojiReactionBackground: "#e2e6e9"

ui/imports/Themes/Theme.qml

@@ -31,6 +31,7 @@ QtObject {
 
     property color background
     property color backgroundHover
+    property color backgroundHoverLight
     property color border
     property color textColor
     property color secondaryText

ui/shared/CopyToClipBoardButton.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
 import "../imports"
 import "../shared/status"
 
@@ -20,6 +21,13 @@ Rectangle {
         source: "./img/copy-to-clipboard-icon.svg"
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
+
+        ColorOverlay {
+            anchors.fill: parent
+            antialiasing: true
+            source: parent
+            color: Style.current.primary
+        }
     }
 
     MouseArea {

ui/shared/ModalPopup.qml

@@ -16,7 +16,7 @@ Popup {
     property alias footer: footerContent.children
 
     Overlay.modal: Rectangle {
-        color: "#60000000"
+        color: Qt.rgba(0, 0, 0, 0.4)
     }
     closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
     parent: Overlay.overlay

ui/shared/PopupMenu.qml

@@ -15,7 +15,7 @@ Menu {
     bottomPadding: paddingSize
 
     delegate: MenuItem {
-        property color textColor: (this.action.icon.color != "#00000000" ? this.action.icon.color : Style.current.textColor)
+        property color textColor: this.action.icon.color.toString() !== "#00000000" ? this.action.icon.color : Style.current.textColor
         property int subMenuIndex: {
             if (!this.subMenu) {
                 return -1
@@ -62,7 +62,7 @@ Menu {
             ColorOverlay {
                 anchors.fill: parent
                 source: parent
-                color: popupMenuItem.highlighted ? Style.current.white : popupMenuItem.textColor
+                color: popupMenuItem.textColor
             }
         }
 
@@ -89,9 +89,7 @@ Menu {
                 anchors.fill: menuIcon
                 source: menuIcon
                 smooth: true
-                color: popupMenuItem.highlighted ?
+                color: (popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.primaryMenuItemHover)
-                           Style.current.primaryMenuItemTextHover :
-                           (popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.primaryMenuItemHover)
             }
         }
 
@@ -100,7 +98,7 @@ Menu {
             anchors.leftMargin: popupMenu.paddingSize
             text: popupMenuItem.text
             font: popupMenuItem.font
-            color: popupMenuItem.highlighted ? Style.current.primaryMenuItemTextHover : popupMenuItem.textColor
+            color: popupMenuItem.textColor
             horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
             opacity: enabled ? 1.0 : 0.3
@@ -110,7 +108,7 @@ Menu {
         background: Rectangle {
             implicitWidth: 220
             implicitHeight: 24
-            color: popupMenuItem.highlighted ? popupMenuItem.icon.color : "transparent"
+            color: popupMenuItem.highlighted ? Style.current.backgroundHover : "transparent"
         }
     }
 

ui/shared/TextWithLabel.qml

@@ -20,7 +20,7 @@ Item {
         text: infoText.label
         font.weight: Font.Medium
         font.pixelSize: 13
-        color: Style.current.darkGrey
+        color: Style.current.secondaryText
     }
 
     StyledTextEdit {

ui/shared/status/StatusChatInfo.qml

@@ -107,7 +107,7 @@ Item {
 
         StyledText {
             id: chatInfo
-            color: Style.current.darkGrey
+            color: Style.current.secondaryText
             text: {
                 switch(root.chatType){
                     //% "Public chat"

ui/shared/status/StatusChatInfoButton.qml

@@ -37,7 +37,7 @@ Button {
     }
 
     background: Rectangle {
-        color: control.hovered ? Style.current.topBarChatInfoColor : "transparent"
+        color: control.hovered ? Style.current.backgroundHover : "transparent"
         radius: Style.current.radius
     }
 

ui/shared/status/StatusCheckBox.qml

@@ -13,7 +13,7 @@ CheckBox {
         x: control.leftPadding
         y: parent.height / 2 - height / 2
         radius: 3
-        color: (control.down || control.checked) ? Style.current.blue : Style.current.grey
+        color: (control.down || control.checked) ? Style.current.primary : Style.current.inputBackground
 
         Image {
             source: "../img/checkmark.svg"

ui/shared/status/StatusSettingsLineButton.qml

@@ -91,7 +91,7 @@ Rectangle {
         ColorOverlay {
             anchors.fill: caret
             source: caret
-            color: Style.current.darkGrey
+            color: Style.current.secondaryText
         }
     }
 

ui/shared/status/StatusSwitch.qml

@@ -14,7 +14,7 @@ Switch {
         x: control.leftPadding
         y: parent.height / 2 - height / 2
         radius: 14
-        color: control.checked ? Style.current.blue : Style.current.grey
+        color: control.checked ? Style.current.primary : Style.current.inputBackground
 
         Rectangle {
             id: circle