Create AmneziaStyle qml object (#830)

client/amnezia_application.cpp

@@ -157,6 +157,7 @@ void AmneziaApplication::init()
     connect(this, &AmneziaApplication::translationsUpdated, m_notificationHandler.get(), &NotificationHandler::onTranslationsUpdated);
 #endif
 
+    m_engine->addImportPath("qrc:/ui/qml/Modules/");
     m_engine->load(url);
     m_systemController->setQmlRoot(m_engine->rootObjects().value(0));
 

client/resources.qrc

@@ -239,6 +239,8 @@
         <file>images/controls/alert-circle.svg</file>
         <file>images/controls/file-check-2.svg</file>
         <file>ui/qml/Controls2/WarningType.qml</file>
+        <file>ui/qml/Modules/Style/qmldir</file>
+        <file>ui/qml/Modules/Style/AmneziaStyle.qml</file>
         <file>ui/qml/Pages2/PageServiceSocksProxySettings.qml</file>
         <file>server_scripts/socks5_proxy/run_container.sh</file>
         <file>server_scripts/socks5_proxy/Dockerfile</file>

client/ui/qml/Components/ConnectButton.qml

@@ -6,13 +6,14 @@ import Qt5Compat.GraphicalEffects
 
 import ConnectionState 1.0
 import PageEnum 1.0
+import Style 1.0
 
 Button {
     id: root
 
-    property string defaultButtonColor: "#D7D8DB"
+    property string defaultButtonColor: AmneziaStyle.color.white
-    property string progressButtonColor: "#D7D8DB"
+    property string progressButtonColor: AmneziaStyle.color.white
-    property string connectedButtonColor: "#FBB26A"
+    property string connectedButtonColor: AmneziaStyle.color.orange
 
     implicitWidth: 190
     implicitHeight: 190
@@ -49,13 +50,13 @@ Button {
                 verticalOffset: 0
                 radius: 10
                 samples: 25
-                color: root.activeFocus ? "#D7D8DB" : "#FBB26A"
+                color: root.activeFocus ? AmneziaStyle.color.white : AmneziaStyle.color.orange
                 source: backgroundCircle
             }
 
             ShapePath {
-                fillColor: "transparent"
+                fillColor: AmneziaStyle.color.transparent
-                strokeColor: "#D7D8DB"
+                strokeColor: AmneziaStyle.color.white
                 strokeWidth: root.activeFocus ? 1 : 0
                 capStyle: ShapePath.RoundCap
 
@@ -70,10 +71,10 @@ Button {
             }
 
             ShapePath {
-                fillColor: "transparent"
+                fillColor: AmneziaStyle.color.transparent
                 strokeColor: {
                     if (ConnectionController.isConnectionInProgress) {
-                        return "#261E1A"
+                        return AmneziaStyle.color.connectionInProgress
                     } else if (ConnectionController.isConnected) {
                         return connectedButtonColor
                     } else {
@@ -113,8 +114,8 @@ Button {
             visible: ConnectionController.isConnectionInProgress
 
             ShapePath {
-                fillColor: "transparent"
+                fillColor: AmneziaStyle.color.transparent
-                strokeColor: "#D7D8DB"
+                strokeColor: AmneziaStyle.color.white
                 strokeWidth: 3
                 capStyle: ShapePath.RoundCap
 

client/ui/qml/Components/InstalledAppsDrawer.qml

@@ -8,6 +8,7 @@ import "../Controls2/TextTypes"
 import SortFilterProxyModel 0.2
 
 import InstalledAppsModel 1.0
+import Style 1.0
 
 DrawerType2 {
     id: root
@@ -133,7 +134,7 @@ DrawerType2 {
             anchors.rightMargin: 16
             anchors.leftMargin: 16
 
-            backgroundColor: "#2C2D30"
+            backgroundColor: AmneziaStyle.color.greyDark
 
             textFieldPlaceholderText: qsTr("application name")
         }

client/ui/qml/Components/QuestionDrawer.qml

@@ -2,6 +2,8 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import Style 1.0
+
 import "../Controls2"
 import "../Controls2/TextTypes"
 
@@ -86,11 +88,11 @@ DrawerType2 {
             Layout.rightMargin: 16
             Layout.leftMargin: 16
 
-            defaultColor: "transparent"
+            defaultColor: AmneziaStyle.color.transparent
-            hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+            hoveredColor: AmneziaStyle.color.blackHovered
-            pressedColor: Qt.rgba(1, 1, 1, 0.12)
+            pressedColor: AmneziaStyle.color.blackPressed
-            disabledColor: "#878B91"
+            disabledColor: AmneziaStyle.color.grey
-            textColor: "#D7D8DB"
+            textColor: AmneziaStyle.color.white
             borderWidth: 1
 
             text: noButtonText

client/ui/qml/Components/SelectLanguageDrawer.qml

@@ -2,6 +2,8 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import Style 1.0
+
 import "../Controls2"
 import "../Controls2/TextTypes"
 import "../Config"
@@ -145,8 +147,8 @@ DrawerType2 {
                                 indicator: Rectangle {
                                     width: parent.width - 1
                                     height: parent.height
-                                    color: radioButton.hovered ? "#2C2D30" : "#1C1D21"
+                                    color: radioButton.hovered ? AmneziaStyle.color.greyDark : AmneziaStyle.color.blackLight
-                                    border.color: radioButton.focus ? "#D7D8DB" : "transparent"
+                                    border.color: radioButton.focus ? AmneziaStyle.color.white : AmneziaStyle.color.transparent
                                     border.width: radioButton.focus ? 1 : 0
 
                                     Behavior on color {

client/ui/qml/Components/ShareConnectionDrawer.qml

@@ -9,6 +9,7 @@ import SortFilterProxyModel 0.2
 
 import PageEnum 1.0
 import ContainerProps 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -111,11 +112,11 @@ DrawerType2 {
                     Layout.fillWidth: true
                     Layout.topMargin: 8
 
-                    defaultColor: "transparent"
+                    defaultColor: AmneziaStyle.color.transparent
-                    hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                    hoveredColor: AmneziaStyle.color.blackHovered
-                    pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                    pressedColor: AmneziaStyle.color.blackPressed
-                    disabledColor: "#878B91"
+                    disabledColor: AmneziaStyle.color.grey
-                    textColor: "#D7D8DB"
+                    textColor: AmneziaStyle.color.white
                     borderWidth: 1
 
                     text: qsTr("Copy")
@@ -134,11 +135,11 @@ DrawerType2 {
 
                     visible: false
 
-                    defaultColor: "transparent"
+                    defaultColor: AmneziaStyle.color.transparent
-                    hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                    hoveredColor: AmneziaStyle.color.blackHovered
-                    pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                    pressedColor: AmneziaStyle.color.blackPressed
-                    disabledColor: "#878B91"
+                    disabledColor: AmneziaStyle.color.grey
-                    textColor: "#D7D8DB"
+                    textColor: AmneziaStyle.color.white
                     borderWidth: 1
 
                     text: qsTr("Copy config string")
@@ -153,11 +154,11 @@ DrawerType2 {
                     Layout.fillWidth: true
                     Layout.topMargin: 24
 
-                    defaultColor: "transparent"
+                    defaultColor: AmneziaStyle.color.transparent
-                    hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                    hoveredColor: AmneziaStyle.color.blackHovered
-                    pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                    pressedColor: AmneziaStyle.color.blackPressed
-                    disabledColor: "#878B91"
+                    disabledColor: AmneziaStyle.color.grey
-                    textColor: "#D7D8DB"
+                    textColor: AmneziaStyle.color.white
                     borderWidth: 1
 
                     text: qsTr("Show connection settings")
@@ -281,9 +282,9 @@ DrawerType2 {
                                     readOnly: true
                                     activeFocusOnTab: false
 
-                                    color: "#D7D8DB"
+                                    color: AmneziaStyle.color.white
-                                    selectionColor:  "#633303"
+                                    selectionColor:  AmneziaStyle.color.brown
-                                    selectedTextColor: "#D7D8DB"
+                                    selectedTextColor: AmneziaStyle.color.white
 
                                     font.pixelSize: 16
                                     font.weight: Font.Medium
@@ -294,7 +295,7 @@ DrawerType2 {
                                     wrapMode: Text.Wrap
 
                                     background: Rectangle {
-                                        color: "transparent"
+                                        color: AmneziaStyle.color.transparent
                                     }
                                 }
                             }

client/ui/qml/Components/TransportProtoSelector.qml

@@ -2,6 +2,8 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import Style 1.0
+
 import "../Controls2"
 import "../Controls2/TextTypes"
 
@@ -14,7 +16,7 @@ Rectangle {
     implicitWidth: transportProtoButtonGroup.implicitWidth
     implicitHeight: transportProtoButtonGroup.implicitHeight
 
-    color: "#1C1D21"
+    color: AmneziaStyle.color.blackLight
     radius: 16
 
     onFocusChanged: {

client/ui/qml/Controls2/BackButtonType.qml

@@ -2,6 +2,8 @@ import QtQuick
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
 
+import Style 1.0
+
 Item {
     id: root
 
@@ -28,7 +30,7 @@ Item {
         ImageButtonType {
             id: backButton
             image: backButtonImage
-            imageColor: "#D7D8DB"
+            imageColor: AmneziaStyle.color.white
 
             implicitWidth: 40
             implicitHeight: 40
@@ -46,7 +48,7 @@ Item {
             id: background
             Layout.fillWidth: true
 
-            color: "transparent"
+            color: AmneziaStyle.color.transparent
         }
     }
 

client/ui/qml/Controls2/BasicButtonType.qml

@@ -3,20 +3,22 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
 
+import Style 1.0
+
 import "TextTypes"
 
 Button {
     id: root
 
-    property string hoveredColor: "#C1C2C5"
+    property string hoveredColor: AmneziaStyle.color.whiteHovered
-    property string defaultColor: "#D7D8DB"
+    property string defaultColor: AmneziaStyle.color.white
-    property string disabledColor: "#494B50"
+    property string disabledColor: AmneziaStyle.color.greyDisabled
-    property string pressedColor: "#979799"
+    property string pressedColor: AmneziaStyle.color.grey
 
-    property string textColor: "#0E0E11"
+    property string textColor: AmneziaStyle.color.black
 
-    property string borderColor: "#D7D8DB"
+    property string borderColor: AmneziaStyle.color.white
-    property string borderFocusedColor: "#D7D8DB"
+    property string borderFocusedColor: AmneziaStyle.color.white
     property int borderWidth: 0
     property int borderFocusedWidth: 1
 
@@ -46,8 +48,8 @@ Button {
     background: Rectangle {
         id: focusBorder
 
-        color: "transparent"
+        color: AmneziaStyle.color.transparent
-        border.color: root.activeFocus ? root.borderFocusedColor : "transparent"
+        border.color: root.activeFocus ? root.borderFocusedColor : AmneziaStyle.color.transparent
         border.width: root.activeFocus ? root.borderFocusedWidth : 0
 
         anchors.fill: parent

client/ui/qml/Controls2/BusyIndicatorType.qml

@@ -2,6 +2,8 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Shapes
 
+import Style 1.0
+
 Popup {
     id: root
     anchors.centerIn: parent
@@ -16,7 +18,7 @@ Popup {
     }
 
     background: Rectangle {
-        color: "transparent"
+        color: AmneziaStyle.color.transparent
     }
 
     BusyIndicator {
@@ -40,8 +42,8 @@ Popup {
                 layer.samples: 4
 
                 ShapePath {
-                    fillColor: "transparent"
+                    fillColor: AmneziaStyle.color.transparent
-                    strokeColor: "#787878"
+                    strokeColor: AmneziaStyle.color.greyDisabled
                     strokeWidth: 3
                     capStyle: ShapePath.RoundCap
 

client/ui/qml/Controls2/CardType.qml

@@ -2,6 +2,8 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import Style 1.0
+
 RadioButton {
     id: root
 
@@ -9,17 +11,17 @@ RadioButton {
     property string bodyText
     property string footerText
 
-    property string hoveredColor: Qt.rgba(1, 1, 1, 0.05)
+    property string hoveredColor: AmneziaStyle.color.blackHovered
-    property string defaultColor: Qt.rgba(1, 1, 1, 0)
+    property string defaultColor: AmneziaStyle.color.transparent
-    property string disabledColor: Qt.rgba(1, 1, 1, 0)
+    property string disabledColor: AmneziaStyle.color.transparent
-    property string pressedColor: Qt.rgba(1, 1, 1, 0.05)
+    property string pressedColor: AmneziaStyle.color.blackPressed
-    property string selectedColor: Qt.rgba(1, 1, 1, 0)
+    property string selectedColor: AmneziaStyle.color.transparent
 
-    property string textColor: "#0E0E11"
+    property string textColor: AmneziaStyle.color.black
 
     property string pressedBorderColor: Qt.rgba(251/255, 178/255, 106/255, 0.3)
-    property string selectedBorderColor: "#FBB26A"
+    property string selectedBorderColor: AmneziaStyle.color.orange
-    property string defaultBodredColor: "transparent"
+    property string defaultBodredColor: AmneziaStyle.color.transparent
     property int borderWidth: 0
 
     implicitWidth: content.implicitWidth
@@ -82,7 +84,7 @@ RadioButton {
         Text {
             text: root.headerText
             wrapMode: Text.WordWrap
-            color: "#D7D8DB"
+            color: AmneziaStyle.color.white
             font.pixelSize: 25
             font.weight: 700
             font.family: "PT Root UI VF"
@@ -97,7 +99,7 @@ RadioButton {
         Text {
             text: root.bodyText
             wrapMode: Text.WordWrap
-            color: "#D7D8DB"
+            color: AmneziaStyle.color.white
             font.pixelSize: 16
             font.weight: 400
             font.family: "PT Root UI VF"
@@ -113,7 +115,7 @@ RadioButton {
             text: root.footerText
             wrapMode: Text.WordWrap
             visible: root.footerText !== ""
-            color: "#878B91"
+            color: AmneziaStyle.color.grey
             font.pixelSize: 13
             font.weight: 400
             font.family: "PT Root UI VF"

client/ui/qml/Controls2/CheckBoxType.qml

@@ -3,32 +3,34 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
 
+import Style 1.0
+
 import "TextTypes"
 
 CheckBox {
     id: root
 
     property string descriptionText
-    property string descriptionTextColor: "#878B91"
+    property string descriptionTextColor: AmneziaStyle.color.grey
-    property string descriptionTextDisabledColor: "#494B50"
+    property string descriptionTextDisabledColor: AmneziaStyle.color.greyDisabled
 
-    property string textColor:  "#D7D8DB"
+    property string textColor: AmneziaStyle.color.white
-    property string textDisabledColor: "#878B91"
+    property string textDisabledColor: AmneziaStyle.color.grey
 
-    property string hoveredColor: Qt.rgba(1, 1, 1, 0.05)
+    property string hoveredColor: AmneziaStyle.color.blackHovered
-    property string defaultColor: "transparent"
+    property string defaultColor: AmneziaStyle.color.transparent
-    property string pressedColor: Qt.rgba(1, 1, 1, 0.05)
+    property string pressedColor: AmneziaStyle.color.blackPressed
 
-    property string defaultBorderColor: "#D7D8DB"
+    property string defaultBorderColor: AmneziaStyle.color.white
-    property string checkedBorderColor: "#FBB26A"
+    property string checkedBorderColor: AmneziaStyle.color.orange
-    property string checkedBorderDisabledColor: "#402102"
+    property string checkedBorderDisabledColor: AmneziaStyle.color.brownDark
 
-    property string borderFocusedColor: "#D7D8DB"
+    property string borderFocusedColor: AmneziaStyle.color.white
 
-    property string checkedImageColor: "#FBB26A"
+    property string checkedImageColor: AmneziaStyle.color.orange
-    property string pressedImageColor: "#A85809"
+    property string pressedImageColor: AmneziaStyle.color.orangeDark
-    property string defaultImageColor: "transparent"
+    property string defaultImageColor: AmneziaStyle.color.transparent
-    property string checkedDisabledImageColor: "#84603D"
+    property string checkedDisabledImageColor: AmneziaStyle.color.brownLight
 
     property string imageSource: "qrc:/images/controls/check.svg"
 
@@ -45,8 +47,8 @@ CheckBox {
     focusPolicy: Qt.NoFocus
 
     background: Rectangle {
-        color: "transparent"
+        color: AmneziaStyle.color.transparent
-        border.color: root.focus ? borderFocusedColor : "transparent"
+        border.color: root.focus ? borderFocusedColor : AmneziaStyle.color.transparent
         border.width: 1
         radius: 16
     }
@@ -77,7 +79,7 @@ CheckBox {
             anchors.centerIn: parent
             width: 24
             height: 24
-            color: "transparent"
+            color: AmneziaStyle.color.transparent
             border.color: root.checked ?
                               (root.enabled ?
                                    checkedBorderColor :

client/ui/qml/Controls2/DividerType.qml

@@ -1,6 +1,8 @@
 import QtQuick
 import QtQuick.Layouts
 
+import Style 1.0
+
 Rectangle {
     Layout.fillWidth: true
 
@@ -8,5 +10,5 @@ Rectangle {
     Layout.rightMargin: 16
 
     height: 1
-    color: "#2C2D30"
+    color: AmneziaStyle.color.greyDark
 }

client/ui/qml/Controls2/DrawerType2.qml

@@ -2,6 +2,8 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import Style 1.0
+
 import "TextTypes"
 
 Item {
@@ -19,8 +21,8 @@ Item {
     property Component collapsedContent
     property Component expandedContent
 
-    property string defaultColor: "#1C1D21"
+    property string defaultColor: AmneziaStyle.color.blackLight
-    property string borderColor: "#2C2D30"
+    property string borderColor: AmneziaStyle.color.greyDark
 
     property real expandedHeight
     property real collapsedHeight: 0
@@ -90,7 +92,7 @@ Item {
         id: background
 
         anchors.fill: parent
-        color: root.isCollapsed ? "transparent" : Qt.rgba(14/255, 14/255, 17/255, 0.8)
+        color: root.isCollapsed ? AmneziaStyle.color.transparent : Qt.rgba(14/255, 14/255, 17/255, 0.8)
 
         Behavior on color {
             PropertyAnimation { duration: 200 }

client/ui/qml/Controls2/DropDownType.qml

@@ -2,6 +2,8 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import Style 1.0
+
 import "TextTypes"
 import "../Config"
 
@@ -9,31 +11,31 @@ Item {
     id: root
 
     property string text
-    property string textColor: "#d7d8db"
+    property string textColor: AmneziaStyle.color.white
-    property string textDisabledColor: "#878B91"
+    property string textDisabledColor: AmneziaStyle.color.grey
     property int textMaximumLineCount: 2
     property int textElide: Qt.ElideRight
 
     property string descriptionText
-    property string descriptionTextColor: "#878B91"
+    property string descriptionTextColor: AmneziaStyle.color.grey
-    property string descriptionTextDisabledColor: "#494B50"
+    property string descriptionTextDisabledColor: AmneziaStyle.color.greyDisabled
 
     property string headerText
     property string headerBackButtonImage
 
     property var rootButtonClickedFunction
     property string rootButtonImage: "qrc:/images/controls/chevron-down.svg"
-    property string rootButtonImageColor: "#D7D8DB"
+    property string rootButtonImageColor: AmneziaStyle.color.white
-    property string rootButtonBackgroundColor: "#1C1D21"
+    property string rootButtonBackgroundColor: AmneziaStyle.color.blackLight
-    property string rootButtonBackgroundHoveredColor: "#1C1D21"
+    property string rootButtonBackgroundHoveredColor: AmneziaStyle.color.blackLight
-    property string rootButtonBackgroundPressedColor: "#1C1D21"
+    property string rootButtonBackgroundPressedColor: AmneziaStyle.color.blackLight
 
-    property string borderFocusedColor: "#D7D8DB"
+    property string borderFocusedColor: AmneziaStyle.color.white
     property int borderFocusedWidth: 1
 
-    property string rootButtonHoveredBorderColor: "#494B50"
+    property string rootButtonHoveredBorderColor: AmneziaStyle.color.greyDisabled
-    property string rootButtonDefaultBorderColor: "#2C2D30"
+    property string rootButtonDefaultBorderColor: AmneziaStyle.color.greyDark
-    property string rootButtonPressedBorderColor: "#D7D8DB"
+    property string rootButtonPressedBorderColor: AmneziaStyle.color.white
 
     property int rootButtonTextLeftMargins: 16
     property int rootButtonTextTopMargin: 16
@@ -75,8 +77,8 @@ Item {
     Rectangle {
         id: focusBorder
 
-        color: "transparent"
+        color: AmneziaStyle.color.transparent
-        border.color: root.activeFocus ? root.borderFocusedColor : "transparent"
+        border.color: root.activeFocus ? root.borderFocusedColor : AmneziaStyle.color.transparent
         border.width: root.activeFocus ? root.borderFocusedWidth : 0
         anchors.fill: rootButtonContent
         radius: 16
@@ -96,7 +98,7 @@ Item {
                     }
                     return root.hovered ? root.rootButtonBackgroundHoveredColor : root.rootButtonBackgroundColor
                 } else {
-                    return "transparent"
+                    return AmneziaStyle.color.transparent
                 }
             }
 

client/ui/qml/Controls2/Header2Type.qml

@@ -1,6 +1,8 @@
 import QtQuick
 import QtQuick.Layouts
 
+import Style 1.0
+
 import "TextTypes"
 
 Item {
@@ -37,7 +39,7 @@ Item {
                 implicitHeight: 40
 
                 image: root.actionButtonImage
-                imageColor: "#D7D8DB"
+                imageColor: AmneziaStyle.color.white
 
                 visible: image ? true : false
 
@@ -57,7 +59,7 @@ Item {
 
             text: root.descriptionText
 
-            color: "#878B91"
+            color: AmneziaStyle.color.grey
 
             visible: root.descriptionText !== ""
         }

client/ui/qml/Controls2/HeaderType.qml

@@ -1,6 +1,8 @@
 import QtQuick
 import QtQuick.Layouts
 
+import Style 1.0
+
 import "TextTypes"
 
 Item {
@@ -46,7 +48,7 @@ Item {
                 Layout.alignment: Qt.AlignRight
 
                 image: root.actionButtonImage
-                imageColor: "#D7D8DB"
+                imageColor: AmneziaStyle.color.white
 
                 visible: image ? true : false
 
@@ -66,7 +68,7 @@ Item {
 
             text: root.descriptionText
 
-            color: "#878B91"
+            color: AmneziaStyle.color.grey
 
             visible: root.descriptionText !== ""
         }

client/ui/qml/Controls2/HorizontalRadioButton.qml

@@ -2,24 +2,26 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import Style 1.0
+
 import "TextTypes"
 
 RadioButton {
     id: root
 
-    property string hoveredColor: Qt.rgba(1, 1, 1, 0.05)
+    property string hoveredColor: AmneziaStyle.color.blackHovered
-    property string defaultColor: Qt.rgba(1, 1, 1, 0)
+    property string defaultColor: AmneziaStyle.color.transparent
-    property string checkedColor: Qt.rgba(1, 1, 1, 0)
+    property string checkedColor: AmneziaStyle.color.transparent
-    property string disabledColor: "transparent"
+    property string disabledColor: AmneziaStyle.color.transparent
 
-    property string textColor:  "#D7D8DB"
+    property string textColor: AmneziaStyle.color.white
-    property string textDisabledColor: "#878B91"
+    property string textDisabledColor: AmneziaStyle.color.grey
 
-    property string pressedBorderColor: "#494B50"
+    property string pressedBorderColor: AmneziaStyle.color.greyDisabled
-    property string checkedBorderColor: "#FBB26A"
+    property string checkedBorderColor: AmneziaStyle.color.orange
-    property string defaultBodredColor: "transparent"
+    property string defaultBodredColor: AmneziaStyle.color.transparent
-    property string checkedDisabledBorderColor: "#84603D"
+    property string checkedDisabledBorderColor: AmneziaStyle.color.brownLight
-    property string borderFocusedColor: "#D7D8DB"
+    property string borderFocusedColor: AmneziaStyle.color.white
     property int borderWidth: 0
 
     implicitWidth: content.implicitWidth

client/ui/qml/Controls2/ImageButtonType.qml

@@ -2,23 +2,25 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import Style 1.0
+
 Button {
     id: root
 
     property string image
 
-    property string hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+    property string hoveredColor: AmneziaStyle.color.blackHovered
-    property string defaultColor: "transparent"
+    property string defaultColor: AmneziaStyle.color.transparent
-    property string pressedColor: Qt.rgba(1, 1, 1, 0.12)
+    property string pressedColor: AmneziaStyle.color.blackPressed
-    property string disableColor: "#2C2D30"
+    property string disableColor: AmneziaStyle.color.greyDark
 
-    property string imageColor: "#878B91"
+    property string imageColor: AmneziaStyle.color.grey
-    property string disableImageColor: "#2C2D30"
+    property string disableImageColor: AmneziaStyle.color.greyDark
 
     property alias backgroundColor: background.color
     property alias backgroundRadius: background.radius
 
-    property string borderFocusedColor: "#D7D8DB"
+    property string borderFocusedColor: AmneziaStyle.color.white
     property int borderFocusedWidth: 1
 
     hoverEnabled: true
@@ -46,7 +48,7 @@ Button {
         id: background
 
         anchors.fill: parent
-        border.color: root.activeFocus ? root.borderFocusedColor : "transparent"
+        border.color: root.activeFocus ? root.borderFocusedColor : AmneziaStyle.color.transparent
         border.width: root.activeFocus ? root.borderFocusedWidth : 0
 
         color: {

client/ui/qml/Controls2/LabelWithButtonType.qml

@@ -2,6 +2,8 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import Style 1.0
+
 import "TextTypes"
 
 Item {
@@ -24,16 +26,16 @@ Item {
     property alias eyeButton: eyeImage
     property FlickableType parentFlickable
 
-    property string textColor: "#d7d8db"
+    property string textColor: AmneziaStyle.color.white
-    property string textDisabledColor: "#878B91"
+    property string textDisabledColor: AmneziaStyle.color.grey
-    property string descriptionColor: "#878B91"
+    property string descriptionColor: AmneziaStyle.color.grey
-    property string descriptionDisabledColor: "#494B50"
+    property string descriptionDisabledColor: AmneziaStyle.color.greyDisabled
     property real textOpacity: 1.0
 
-    property string borderFocusedColor: "#D7D8DB"
+    property string borderFocusedColor: AmneziaStyle.color.white
     property int borderFocusedWidth: 1
 
-    property string rightImageColor: "#d7d8db"
+    property string rightImageColor: AmneziaStyle.color.white
 
     property bool descriptionOnTop: false
     property bool hideDescription: true
@@ -117,7 +119,7 @@ Item {
             Layout.rightMargin: rightImageSource || !isLeftImageHoverEnabled ? 16 : 0
 
             radius: 12
-            color: "transparent"
+            color: AmneziaStyle.color.transparent
 
             Behavior on color {
                 PropertyAnimation { duration: 200 }
@@ -220,7 +222,7 @@ Item {
                 id: eyeImageBackground
                 anchors.fill: parent
                 radius: 12
-                color: "transparent"
+                color: AmneziaStyle.color.transparent
 
                 Behavior on color {
                     PropertyAnimation { duration: 200 }
@@ -257,7 +259,7 @@ Item {
                 id: rightImageBackground
                 anchors.fill: parent
                 radius: 12
-                color: "transparent"
+                color: AmneziaStyle.color.transparent
 
                 Behavior on color {
                     PropertyAnimation { duration: 200 }
@@ -274,9 +276,9 @@ Item {
     Rectangle {
         id: background
         anchors.fill: root
-        color: "transparent"
+        color: AmneziaStyle.color.transparent
 
-        border.color: root.activeFocus ? root.borderFocusedColor : "transparent"
+        border.color: root.activeFocus ? root.borderFocusedColor : AmneziaStyle.color.transparent
         border.width: root.activeFocus ? root.borderFocusedWidth : 0
 
 

client/ui/qml/Controls2/ListViewWithRadioButtonType.qml

@@ -2,6 +2,8 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import Style 1.0
+
 import "TextTypes"
 
 ListView {
@@ -103,8 +105,8 @@ ListView {
                 indicator: Rectangle {
                     width: parent.width - 1
                     height: parent.height
-                    color: radioButton.hovered ? "#2C2D30" : "#1C1D21"
+                    color: radioButton.hovered ? AmneziaStyle.color.greyDark : AmneziaStyle.color.blackLight
-                    border.color: radioButton.focus ? "#D7D8DB" : "transparent"
+                    border.color: radioButton.focus ? AmneziaStyle.color.white : AmneziaStyle.color.transparent
                     border.width: radioButton.focus ? 1 : 0
 
                     Behavior on color {

client/ui/qml/Controls2/PopupType.qml

@@ -2,6 +2,8 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import Style 1.0
+
 import "TextTypes"
 
 Popup {
@@ -82,11 +84,11 @@ Popup {
                 implicitHeight: 32
 
                 defaultColor: "white"
-                hoveredColor: "#C1C2C5"
+                hoveredColor: AmneziaStyle.color.whiteHovered
-                pressedColor: "#AEB0B7"
+                pressedColor: AmneziaStyle.color.whiteHovered
-                disabledColor: "#494B50"
+                disabledColor: AmneziaStyle.color.greyDisabled
 
-                textColor: "#0E0E11"
+                textColor: AmneziaStyle.color.black
                 borderWidth: 0
 
                 text: qsTr("Close")

client/ui/qml/Controls2/ProgressBarType.qml

@@ -2,20 +2,22 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import Style 1.0
+
 ProgressBar {
     id: root
 
     implicitHeight: 4
 
     background: Rectangle {
-        color: "#633303"
+        color: AmneziaStyle.color.brown
     }
 
     contentItem: Item {
         Rectangle {
             width: root.visualPosition * parent.width
             height: parent.height
-            color: "#FBB26A"
+            color: AmneziaStyle.color.orange
         }
     }
 }

client/ui/qml/Controls2/SwitcherType.qml

@@ -2,36 +2,38 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import Style 1.0
+
 import "TextTypes"
 
 Switch {
     id: root
 
     property alias descriptionText: description.text
-    property string descriptionTextColor: "#878B91"
+    property string descriptionTextColor: AmneziaStyle.color.grey
-    property string descriptionTextDisabledColor: "#494B50"
+    property string descriptionTextDisabledColor: AmneziaStyle.color.greyDisabled
 
-    property string textColor:  "#D7D8DB"
+    property string textColor: AmneziaStyle.color.white
-    property string textDisabledColor: "#878B91"
+    property string textDisabledColor: AmneziaStyle.color.grey
 
-    property string checkedIndicatorColor: "#633303"
+    property string checkedIndicatorColor: AmneziaStyle.color.brown
-    property string defaultIndicatorColor: "transparent"
+    property string defaultIndicatorColor: AmneziaStyle.color.transparent
-    property string checkedDisabledIndicatorColor: "#402102"
+    property string checkedDisabledIndicatorColor: AmneziaStyle.color.brownDark
 
-    property string borderFocusedColor: "#D7D8DB"
+    property string borderFocusedColor: AmneziaStyle.color.white
     property int borderFocusedWidth: 1
 
-    property string checkedIndicatorBorderColor: "#633303"
+    property string checkedIndicatorBorderColor: AmneziaStyle.color.brown
-    property string defaultIndicatorBorderColor: "#494B50"
+    property string defaultIndicatorBorderColor: AmneziaStyle.color.greyDisabled
-    property string checkedDisabledIndicatorBorderColor: "#402102"
+    property string checkedDisabledIndicatorBorderColor: AmneziaStyle.color.brownDark
 
-    property string checkedInnerCircleColor: "#FBB26A"
+    property string checkedInnerCircleColor: AmneziaStyle.color.orange
-    property string defaultInnerCircleColor: "#D7D8DB"
+    property string defaultInnerCircleColor: AmneziaStyle.color.white
-    property string checkedDisabledInnerCircleColor: "#84603D"
+    property string checkedDisabledInnerCircleColor: AmneziaStyle.color.brownLight
-    property string defaultDisabledInnerCircleColor: "#494B50"
+    property string defaultDisabledInnerCircleColor: AmneziaStyle.color.greyDisabled
 
-    property string hoveredIndicatorBackgroundColor: Qt.rgba(1, 1, 1, 0.08)
+    property string hoveredIndicatorBackgroundColor: AmneziaStyle.color.blackHovered
-    property string defaultIndicatorBackgroundColor: "transparent"
+    property string defaultIndicatorBackgroundColor: AmneziaStyle.color.transparent
 
     hoverEnabled: enabled ? true : false
     focusPolicy: Qt.TabFocus

client/ui/qml/Controls2/TabButtonType.qml

@@ -1,16 +1,18 @@
 import QtQuick
 import QtQuick.Controls
 
+import Style 1.0
+
 TabButton {
     id: root
 
-    property string hoveredColor: "#633303"
+    property string hoveredColor: AmneziaStyle.color.brown
-    property string defaultColor: "#2C2D30"
+    property string defaultColor: AmneziaStyle.color.greyDark
-    property string selectedColor: "#FBB26A"
+    property string selectedColor: AmneziaStyle.color.orange
 
-    property string textColor: "#D7D8DB"
+    property string textColor: AmneziaStyle.color.white
 
-    property string borderFocusedColor: "#D7D8DB"
+    property string borderFocusedColor: AmneziaStyle.color.white
     property int borderFocusedWidth: 1
 
     property bool isSelected: false
@@ -24,9 +26,9 @@ TabButton {
         id: background
 
         anchors.fill: parent
-        color: "transparent"
+        color: AmneziaStyle.color.transparent
 
-        border.color: root.activeFocus ? root.borderFocusedColor : "transparent"
+        border.color: root.activeFocus ? root.borderFocusedColor : AmneziaStyle.color.transparent
         border.width: root.activeFocus ? root.borderFocusedWidth : 0
 
         Rectangle {

client/ui/qml/Controls2/TabImageButtonType.qml

@@ -1,18 +1,20 @@
 import QtQuick
 import QtQuick.Controls
 
+import Style 1.0
+
 TabButton {
     id: root
 
-    property string hoveredColor: "#633303"
+    property string hoveredColor: AmneziaStyle.color.brown
-    property string defaultColor: "#D7D8DB"
+    property string defaultColor: AmneziaStyle.color.white
-    property string selectedColor: "#FBB26A"
+    property string selectedColor: AmneziaStyle.color.orange
 
     property string image
 
     property bool isSelected: false
 
-    property string borderFocusedColor: "#D7D8DB"
+    property string borderFocusedColor: AmneziaStyle.color.white
     property int borderFocusedWidth: 1
 
     property var clickedFunc
@@ -26,10 +28,10 @@ TabButton {
     background: Rectangle {
         id: background
         anchors.fill: parent
-        color: "transparent"
+        color: AmneziaStyle.color.transparent
         radius: 10
 
-        border.color: root.activeFocus ? root.borderFocusedColor : "transparent"
+        border.color: root.activeFocus ? root.borderFocusedColor : AmneziaStyle.color.transparent
         border.width: root.activeFocus ? root.borderFocusedWidth : 0
 
     }

client/ui/qml/Controls2/TextAreaType.qml

@@ -1,6 +1,8 @@
 import QtQuick
 import QtQuick.Controls
 
+import Style 1.0
+
 Rectangle {
     id: root
 
@@ -9,12 +11,12 @@ Rectangle {
     property alias textArea: textArea
     property alias textAreaText: textArea.text
 
-    property string borderHoveredColor: "#494B50"
+    property string borderHoveredColor: AmneziaStyle.color.greyDisabled
-    property string borderNormalColor: "#2C2D30"
+    property string borderNormalColor: AmneziaStyle.color.greyDark
-    property string borderFocusedColor: "#d7d8db"
+    property string borderFocusedColor: AmneziaStyle.color.white
 
     height: 148
-    color: "#1C1D21"
+    color: AmneziaStyle.color.blackLight
     border.width: 1
     border.color: getBorderColor(borderNormalColor)
     radius: 16
@@ -52,10 +54,10 @@ Rectangle {
                 anchors.topMargin: 16
                 anchors.bottomMargin: 16
 
-                color: "#D7D8DB"
+                color: AmneziaStyle.color.white
-                selectionColor:  "#633303"
+                selectionColor:  AmneziaStyle.color.brown
-                selectedTextColor: "#D7D8DB"
+                selectedTextColor: AmneziaStyle.color.white
-                placeholderTextColor: "#878B91"
+                placeholderTextColor: AmneziaStyle.color.grey
 
                 font.pixelSize: 16
                 font.weight: Font.Medium

client/ui/qml/Controls2/TextFieldWithHeaderType.qml

@@ -2,14 +2,16 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
+import Style 1.0
+
 import "TextTypes"
 
 Item {
     id: root
 
     property string headerText
-    property string headerTextDisabledColor: "#494B50"
+    property string headerTextDisabledColor: AmneziaStyle.color.greyDisabled
-    property string headerTextColor: "#878b91"
+    property string headerTextColor: AmneziaStyle.color.grey
 
     property alias errorText: errorField.text
     property bool checkEmptyText: false
@@ -21,18 +23,18 @@ Item {
 
     property alias textField: textField
     property alias textFieldText: textField.text
-    property string textFieldTextColor: "#d7d8db"
+    property string textFieldTextColor: AmneziaStyle.color.white
-    property string textFieldTextDisabledColor: "#878B91"
+    property string textFieldTextDisabledColor: AmneziaStyle.color.grey
 
     property string textFieldPlaceholderText
     property bool textFieldEditable: true
 
-    property string borderColor: "#2C2D30"
+    property string borderColor: AmneziaStyle.color.greyDark
-    property string borderFocusedColor: "#d7d8db"
+    property string borderFocusedColor: AmneziaStyle.color.white
 
-    property string backgroundColor: "#1c1d21"
+    property string backgroundColor: AmneziaStyle.color.blackLight
-    property string backgroundDisabledColor: "transparent"
+    property string backgroundDisabledColor: AmneziaStyle.color.transparent
-    property string bgBorderHoveredColor: "#494B50"
+    property string bgBorderHoveredColor: AmneziaStyle.color.greyDisabled
 
     implicitWidth: content.implicitWidth
     implicitHeight: content.implicitHeight
@@ -90,10 +92,10 @@ Item {
                         inputMethodHints: Qt.ImhNoAutoUppercase | Qt.ImhSensitiveData | Qt.ImhNoPredictiveText
 
                         placeholderText: root.textFieldPlaceholderText
-                        placeholderTextColor: "#494B50"
+                        placeholderTextColor: AmneziaStyle.color.greyDisabled
 
-                        selectionColor:  "#633303"
+                        selectionColor:  AmneziaStyle.color.brown
-                        selectedTextColor: "#D7D8DB"
+                        selectedTextColor: AmneziaStyle.color.white
 
                         font.pixelSize: 16
                         font.weight: 400
@@ -147,7 +149,7 @@ Item {
 
             text: root.errorText
             visible: root.errorText !== ""
-            color: "#EB5757"
+            color: AmneziaStyle.color.red
         }
     }
 

client/ui/qml/Controls2/TextTypes/ButtonTextType.qml

@@ -1,10 +1,12 @@
 import QtQuick
 
+import Style 1.0
+
 Text {
     lineHeight: 24
     lineHeightMode: Text.FixedHeight
 
-    color: "#D7D8DB"
+    color: AmneziaStyle.color.white
     font.pixelSize: 16
     font.weight: 600
     font.family: "PT Root UI VF"

client/ui/qml/Controls2/TextTypes/CaptionTextType.qml

@@ -1,10 +1,12 @@
 import QtQuick
 
+import Style 1.0
+
 Text {
     lineHeight: 16 + LanguageModel.getLineHeightAppend()
     lineHeightMode: Text.FixedHeight
 
-    color: "#0E0E11"
+    color: AmneziaStyle.color.black
     font.pixelSize: 13
     font.weight: 400
     font.family: "PT Root UI VF"

client/ui/qml/Controls2/TextTypes/Header1TextType.qml

@@ -1,10 +1,12 @@
 import QtQuick
 
+import Style 1.0
+
 Text {
     lineHeight: 38 + LanguageModel.getLineHeightAppend()
     lineHeightMode: Text.FixedHeight
 
-    color: "#D7D8DB"
+    color: AmneziaStyle.color.white
     font.pixelSize: 36
     font.weight: 700
     font.family: "PT Root UI VF"

client/ui/qml/Controls2/TextTypes/Header2TextType.qml

@@ -1,10 +1,12 @@
 import QtQuick
 
+import Style 1.0
+
 Text {
     lineHeight: 30 + LanguageModel.getLineHeightAppend()
     lineHeightMode: Text.FixedHeight
 
-    color: "#D7D8DB"
+    color: AmneziaStyle.color.white
     font.pixelSize: 25
     font.weight: 700
     font.family: "PT Root UI VF"

client/ui/qml/Controls2/TextTypes/LabelTextType.qml

@@ -1,10 +1,12 @@
 import QtQuick
 
+import Style 1.0
+
 Text {
     lineHeight: 16 + LanguageModel.getLineHeightAppend()
     lineHeightMode: Text.FixedHeight
 
-    color: "#878B91"
+    color: AmneziaStyle.color.grey
     font.pixelSize: 13
     font.weight: 400
     font.family: "PT Root UI VF"

client/ui/qml/Controls2/TextTypes/ListItemTitleType.qml

@@ -1,10 +1,12 @@
 import QtQuick
 
+import Style 1.0
+
 Text {
     lineHeight: 21.6 + LanguageModel.getLineHeightAppend()
     lineHeightMode: Text.FixedHeight
 
-    color: "#D7D8DB"
+    color: AmneziaStyle.color.white
     font.pixelSize: 18
     font.weight: 400
     font.family: "PT Root UI VF"

client/ui/qml/Controls2/TextTypes/ParagraphTextType.qml

@@ -1,10 +1,11 @@
 import QtQuick
+import Style 1.0
 
 Text {
     lineHeight: 24 + LanguageModel.getLineHeightAppend()
     lineHeightMode: Text.FixedHeight
 
-    color: "#D7D8DB"
+    color: AmneziaStyle.color.white
     font.pixelSize: 16
     font.weight: 400
     font.family: "PT Root UI VF"

client/ui/qml/Controls2/TextTypes/SmallTextType.qml

@@ -1,10 +1,12 @@
 import QtQuick
 
+import Style 1.0
+
 Text {
     lineHeight: 20 + LanguageModel.getLineHeightAppend()
     lineHeightMode: Text.FixedHeight
 
-    color: "#D7D8DB"
+    color: AmneziaStyle.color.white
     font.pixelSize: 14
     font.weight: 400
     font.family: "PT Root UI VF"

client/ui/qml/Controls2/TopCloseButtonType.qml

@@ -18,14 +18,14 @@ Popup {
     }
 
     background: Rectangle {
-        color: "transparent"
+        color: AmneziaStyle.color.transparent
     }
 
     ImageButtonType {
         id: button
 
         image: "qrc:/images/svg/close_black_24dp.svg"
-        imageColor: "#D7D8DB"
+        imageColor: AmneziaStyle.color.white
 
         implicitWidth: 40
         implicitHeight: 40

client/ui/qml/Controls2/VerticalRadioButton.qml

@@ -3,6 +3,8 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
 
+import Style 1.0
+
 import "TextTypes"
 
 RadioButton {
@@ -12,15 +14,15 @@ RadioButton {
     property int textElide: Qt.ElideRight
     property string descriptionText
 
-    property string hoveredColor: Qt.rgba(1, 1, 1, 0.05)
+    property string hoveredColor: AmneziaStyle.color.blackHovered
-    property string defaultColor: Qt.rgba(1, 1, 1, 0)
+    property string defaultColor: AmneziaStyle.color.transparent
-    property string disabledColor: Qt.rgba(1, 1, 1, 0)
+    property string disabledColor: AmneziaStyle.color.transparent
-    property string selectedColor: Qt.rgba(1, 1, 1, 0)
+    property string selectedColor: AmneziaStyle.color.transparent
 
-    property string textColor: "#D7D8DB"
+    property string textColor: AmneziaStyle.color.white
-    property string selectedTextColor: "#FBB26A"
+    property string selectedTextColor: AmneziaStyle.color.orange
 
-    property string borderFocusedColor: "#D7D8DB"
+    property string borderFocusedColor: AmneziaStyle.color.white
     property int borderFocusedWidth: 1
 
     property string imageSource
@@ -34,7 +36,7 @@ RadioButton {
 
         anchors.verticalCenter: parent.verticalCenter
 
-        border.color: root.focus ? root.borderFocusedColor : "transparent"
+        border.color: root.focus ? root.borderFocusedColor : AmneziaStyle.color.transparent
         border.width: root.focus ? root.borderFocusedWidth : 0
 
         implicitWidth: 56
@@ -137,7 +139,7 @@ RadioButton {
             CaptionTextType {
                 id: description
 
-                color: "#878B91"
+                color: AmneziaStyle.color.grey
                 text: root.descriptionText
 
                 visible: root.descriptionText !== ""

client/ui/qml/Controls2/WarningType.qml

@@ -3,14 +3,16 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
 
+import Style 1.0
+
 import "TextTypes"
 
 Rectangle {
     id: root
 
-    property string textColor: "#D7D8DB"
+    property string textColor: AmneziaStyle.color.white
-    property string backGroundColor: "#1C1D21"
+    property string backGroundColor: AmneziaStyle.color.blackLight
-    property string imageColor: "#D7D8DB"
+    property string imageColor: AmneziaStyle.color.white
     property string textString
     property int textFormat: Text.PlainText
 

client/ui/qml/Modules/Style/AmneziaStyle.qml

@@ -0,0 +1,26 @@
+pragma Singleton
+
+import QtQuick
+
+QtObject {
+    property QtObject color: QtObject {
+        readonly property color transparent: 'transparent'
+        readonly property color white: '#D7D8DB'
+        readonly property color whiteHovered: '#C1C2C5'
+        readonly property color grey: '#878B91'
+        readonly property color greyDisabled: '#494B50'
+        readonly property color greyDark: '#2C2D30'
+        readonly property color blackLight: '#1C1D21'
+        readonly property color blackHovered: '#01010114'
+        readonly property color blackPressed: '#0101011f'
+        readonly property color black: '#0E0E11'
+        readonly property color orange: '#FBB26A'
+        readonly property color orangeDark: '#A85809'
+        readonly property color brownLight: '#84603D'
+        readonly property color brown: '#633303'
+        readonly property color brownDark: '#402102'
+        readonly property color red: '#EB5757'
+
+        readonly property color connectionInProgress: '#261E1A'
+    }
+}

client/ui/qml/Modules/Style/qmldir

@@ -0,0 +1,3 @@
+module Style
+
+singleton AmneziaStyle 1.0 AmneziaStyle.qml

client/ui/qml/Pages2/PageHome.qml

@@ -8,6 +8,7 @@ import PageEnum 1.0
 import ProtocolEnum 1.0
 import ContainerProps 1.0
 import ContainersModelFilters 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -55,11 +56,11 @@ PageType {
 
                 implicitHeight: 36
 
-                defaultColor: "transparent"
+                defaultColor: AmneziaStyle.color.transparent
-                hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                hoveredColor: AmneziaStyle.color.blackHovered
-                pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                pressedColor: AmneziaStyle.color.blackPressed
-                disabledColor: "#878B91"
+                disabledColor: AmneziaStyle.color.grey
-                textColor: "#878B91"
+                textColor: AmneziaStyle.color.grey
                 borderWidth: 0
 
                 visible: isLoggingEnabled ? true : false
@@ -91,12 +92,12 @@ PageType {
 
                 implicitHeight: 36
 
-                defaultColor: "transparent"
+                defaultColor: AmneziaStyle.color.transparent
-                hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                hoveredColor: AmneziaStyle.color.blackHovered
-                pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                pressedColor: AmneziaStyle.color.blackPressed
-                disabledColor: "#878B91"
+                disabledColor: AmneziaStyle.color.grey
-                textColor: "#878B91"
+                textColor: AmneziaStyle.color.grey
-                leftImageColor: "transparent"
+                leftImageColor: AmneziaStyle.color.transparent
                 borderWidth: 0
 
                 property bool isSplitTunnelingEnabled: SitesModel.isTunnelingEnabled || AppSplitTunnelingModel.isTunnelingEnabled ||
@@ -237,7 +238,7 @@ PageType {
 
                         hoverEnabled: false
                         image: "qrc:/images/controls/chevron-down.svg"
-                        imageColor: "#d7d8db"
+                        imageColor: AmneziaStyle.color.white
 
                         icon.width: 18
                         icon.height: 18
@@ -298,17 +299,17 @@ PageType {
                     DropDownType {
                         id: containersDropDown
 
-                        rootButtonImageColor: "#0E0E11"
+                        rootButtonImageColor: AmneziaStyle.color.black
-                        rootButtonBackgroundColor: "#D7D8DB"
+                        rootButtonBackgroundColor: AmneziaStyle.color.white
                         rootButtonBackgroundHoveredColor: Qt.rgba(215, 216, 219, 0.8)
                         rootButtonBackgroundPressedColor: Qt.rgba(215, 216, 219, 0.65)
-                        rootButtonHoveredBorderColor: "transparent"
+                        rootButtonHoveredBorderColor: AmneziaStyle.color.transparent
-                        rootButtonDefaultBorderColor: "transparent"
+                        rootButtonDefaultBorderColor: AmneziaStyle.color.transparent
                         rootButtonTextTopMargin: 8
                         rootButtonTextBottomMargin: 8
 
                         text: ServersModel.defaultServerDefaultContainerName
-                        textColor: "#0E0E11"
+                        textColor: AmneziaStyle.color.black
                         headerText: qsTr("VPN protocol")
                         headerBackButtonImage: "qrc:/images/controls/arrow-left.svg"
 
@@ -499,7 +500,7 @@ PageType {
                             ImageButtonType {
                                 id: serverInfoButton
                                 image: "qrc:/images/controls/settings.svg"
-                                imageColor: "#D7D8DB"
+                                imageColor: AmneziaStyle.color.white
 
                                 implicitWidth: 56
                                 implicitHeight: 56

client/ui/qml/Pages2/PageProtocolOpenVpnSettings.qml

@@ -6,6 +6,7 @@ import SortFilterProxyModel 0.2
 
 import PageEnum 1.0
 import ContainerEnum 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -294,7 +295,7 @@ PageType {
                             Layout.fillWidth: true
                             Layout.topMargin: 32
                             Layout.preferredHeight: checkboxLayout.implicitHeight
-                            color: "#1C1D21"
+                            color: AmneziaStyle.color.blackLight
                             radius: 16
 
                             Connections {

client/ui/qml/Pages2/PageProtocolRaw.qml

@@ -8,6 +8,7 @@ import PageEnum 1.0
 import ProtocolEnum 1.0
 import ContainerEnum 1.0
 import ContainerProps 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -191,9 +192,9 @@ PageType {
                                             leftPadding: 0
                                             height: 24
 
-                                            color: "#D7D8DB"
+                                            color: AmneziaStyle.color.white
-                                            selectionColor:  "#633303"
+                                            selectionColor: AmneziaStyle.color.brown
-                                            selectedTextColor: "#D7D8DB"
+                                            selectedTextColor: AmneziaStyle.color.white
 
                                             font.pixelSize: 16
                                             font.weight: Font.Medium
@@ -204,7 +205,7 @@ PageType {
                                             wrapMode: Text.Wrap
 
                                             background: Rectangle {
-                                                color: "transparent"
+                                                color: AmneziaStyle.color.transparent
                                             }
                                         }
                                     }
@@ -223,7 +224,7 @@ PageType {
                 visible: ServersModel.isProcessedServerHasWriteAccess()
 
                 text: qsTr("Remove ") + ContainersModel.getProcessedContainerName()
-                textColor: "#EB5757"
+                textColor: AmneziaStyle.color.red
 
                 Keys.onTabPressed: lastItemTabClicked(focusItem)
                 clickedFunction: function() {

client/ui/qml/Pages2/PageServiceDnsSettings.qml

@@ -5,6 +5,7 @@ import QtQuick.Layouts
 import SortFilterProxyModel 0.2
 
 import PageEnum 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -69,7 +70,7 @@ PageType {
                 width: parent.width
 
                 text: qsTr("Remove ") + ContainersModel.getProcessedContainerName()
-                textColor: "#EB5757"
+                textColor: AmneziaStyle.color.red
 
                 Keys.onTabPressed: root.lastItemTabClicked()
 

client/ui/qml/Pages2/PageServiceSftpSettings.qml

@@ -5,6 +5,7 @@ import QtQuick.Layouts
 import SortFilterProxyModel 0.2
 
 import PageEnum 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -114,7 +115,7 @@ PageType {
                             descriptionOnTop: true
 
                             rightImageSource: "qrc:/images/controls/copy.svg"
-                            rightImageColor: "#D7D8DB"
+                            rightImageColor: AmneziaStyle.color.white
 
                             clickedFunction: function() {
                                 GC.copyToClipBoard(descriptionText)
@@ -138,7 +139,7 @@ PageType {
                             KeyNavigation.tab: usernameLabel.rightButton
 
                             rightImageSource: "qrc:/images/controls/copy.svg"
-                            rightImageColor: "#D7D8DB"
+                            rightImageColor: AmneziaStyle.color.white
 
                             clickedFunction: function() {
                                 GC.copyToClipBoard(descriptionText)
@@ -162,7 +163,7 @@ PageType {
                             KeyNavigation.tab: passwordLabel.eyeButton
 
                             rightImageSource: "qrc:/images/controls/copy.svg"
-                            rightImageColor: "#D7D8DB"
+                            rightImageColor: AmneziaStyle.color.white
 
                             clickedFunction: function() {
                                 GC.copyToClipBoard(descriptionText)
@@ -193,7 +194,7 @@ PageType {
                             }
 
                             rightImageSource: "qrc:/images/controls/copy.svg"
-                            rightImageColor: "#D7D8DB"
+                            rightImageColor: AmneziaStyle.color.white
 
                             buttonImageSource: hideDescription ? "qrc:/images/controls/eye.svg" : "qrc:/images/controls/eye-off.svg"
 
@@ -216,11 +217,11 @@ PageType {
                             Layout.leftMargin: 16
                             Layout.rightMargin: 16
 
-                            defaultColor: "transparent"
+                            defaultColor: AmneziaStyle.color.transparent
-                            hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                            hoveredColor: AmneziaStyle.color.blackHovered
-                            pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                            pressedColor: AmneziaStyle.color.blackPressed
-                            disabledColor: "#878B91"
+                            disabledColor: AmneziaStyle.color.grey
-                            textColor: "#D7D8DB"
+                            textColor: AmneziaStyle.color.white
                             borderWidth: 1
 
                             parentFlickable: fl
@@ -280,11 +281,11 @@ PageType {
                             Layout.leftMargin: 8
                             implicitHeight: 32
 
-                            defaultColor: "transparent"
+                            defaultColor: AmneziaStyle.color.transparent
-                            hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                            hoveredColor: AmneziaStyle.color.blackHovered
-                            pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                            pressedColor: AmneziaStyle.color.blackPressed
-                            disabledColor: "#878B91"
+                            disabledColor: AmneziaStyle.color.grey
-                            textColor: "#FBB26A"
+                            textColor: AmneziaStyle.color.orange
 
                             text: qsTr("Detailed instructions")
 
@@ -303,10 +304,10 @@ PageType {
                             Layout.leftMargin: 8
                             implicitHeight: 32
 
-                            defaultColor: "transparent"
+                            defaultColor: AmneziaStyle.color.transparent
-                            hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                            hoveredColor: AmneziaStyle.color.blackHovered
-                            pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                            pressedColor: AmneziaStyle.color.blackPressed
-                            textColor: "#EB5757"
+                            textColor: AmneziaStyle.color.red
 
                             parentFlickable: fl
                             Keys.onTabPressed: lastItemTabClicked()

client/ui/qml/Pages2/PageServiceTorWebsiteSettings.qml

@@ -6,6 +6,7 @@ import SortFilterProxyModel 0.2
 
 import PageEnum 1.0
 import ContainerProps 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -82,10 +83,10 @@ PageType {
                 }
 
                 descriptionOnTop: true
-                textColor: "#FBB26A"
+                textColor: AmneziaStyle.color.orange
 
                 rightImageSource: "qrc:/images/controls/copy.svg"
-                rightImageColor: "#D7D8DB"
+                rightImageColor: AmneziaStyle.color.white
 
                 KeyNavigation.tab: removeButton
 
@@ -134,10 +135,10 @@ PageType {
                 Layout.leftMargin: 8
                 implicitHeight: 32
 
-                defaultColor: "transparent"
+                defaultColor: AmneziaStyle.color.transparent
-                hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                hoveredColor: AmneziaStyle.color.blackHovered
-                pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                pressedColor: AmneziaStyle.color.blackPressed
-                textColor: "#EB5757"
+                textColor: AmneziaStyle.color.red
 
                 text: qsTr("Remove website")
 

client/ui/qml/Pages2/PageSettingsAbout.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 
 import PageEnum 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -84,7 +85,7 @@ PageType {
                 font.pixelSize: 14
 
                 text: qsTr("Amnezia is a free and open-source application. You can support the developers if you like it.")
-                color: "#CCCAC8"
+                color: AmneziaStyle.color.white
             }
 
             ParagraphTextType {
@@ -176,7 +177,7 @@ PageType {
                 horizontalAlignment: Text.AlignHCenter
 
                 text: qsTr("Software version: %1").arg(SettingsController.getAppVersion())
-                color: "#878B91"
+                color: AmneziaStyle.color.grey
             }
 
             BasicButtonType {
@@ -186,11 +187,11 @@ PageType {
                 Layout.bottomMargin: 16
                 implicitHeight: 32
 
-                defaultColor: "transparent"
+                defaultColor: AmneziaStyle.color.transparent
-                hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                hoveredColor: AmneziaStyle.color.blackHovered
-                pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                pressedColor: AmneziaStyle.color.blackPressed
-                disabledColor: "#878B91"
+                disabledColor: AmneziaStyle.color.grey
-                textColor: "#FBB26A"
+                textColor: AmneziaStyle.color.orange
 
                 text: qsTr("Check for updates")
 
@@ -209,11 +210,11 @@ PageType {
               Layout.topMargin: -15
               implicitHeight: 25
 
-              defaultColor: "transparent"
+              defaultColor: AmneziaStyle.color.transparent
-              hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+              hoveredColor: AmneziaStyle.color.blackHovered
-              pressedColor: Qt.rgba(1, 1, 1, 0.12)
+              pressedColor: AmneziaStyle.color.blackPressed
-              disabledColor: "#878B91"
+              disabledColor: AmneziaStyle.color.grey
-              textColor: "#FBB26A"
+              textColor: AmneziaStyle.color.orange
 
               text: qsTr("Privacy Policy")
 

client/ui/qml/Pages2/PageSettingsAppSplitTunneling.qml

@@ -10,6 +10,7 @@ import SortFilterProxyModel 0.2
 import PageEnum 1.0
 import ProtocolEnum 1.0
 import ContainerProps 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -214,7 +215,7 @@ PageType {
 
                             text: appPath
                             rightImageSource: "qrc:/images/controls/trash.svg"
-                            rightImageColor: "#D7D8DB"
+                            rightImageColor: AmneziaStyle.color.white
 
                             clickedFunction: function() {
                                 var headerText = qsTr("Remove ") + appPath + "?"
@@ -241,7 +242,7 @@ PageType {
     Rectangle {
         anchors.fill: addAppButton
         anchors.bottomMargin: -24
-        color: "#0E0E11"
+        color: AmneziaStyle.color.black
         opacity: 0.8
     }
 

client/ui/qml/Pages2/PageSettingsApplication.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 
 import PageEnum 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -221,7 +222,7 @@ PageType {
 
                 text: qsTr("Reset settings and remove all data from the application")
                 rightImageSource: "qrc:/images/controls/chevron-right.svg"
-                textColor: "#EB5757"
+                textColor: AmneziaStyle.color.red
 
                 Keys.onTabPressed: lastItemTabClicked()
                 parentFlickable: fl

client/ui/qml/Pages2/PageSettingsBackup.qml

@@ -6,6 +6,7 @@ import QtQuick.Dialogs
 import QtCore
 
 import PageEnum 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -120,11 +121,11 @@ PageType {
                 Layout.fillWidth: true
                 Layout.topMargin: -8
 
-                defaultColor: "transparent"
+                defaultColor: AmneziaStyle.color.transparent
-                hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                hoveredColor: AmneziaStyle.color.blackHovered
-                pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                pressedColor: AmneziaStyle.color.blackPressed
-                disabledColor: "#878B91"
+                disabledColor: AmneziaStyle.color.grey
-                textColor: "#D7D8DB"
+                textColor: AmneziaStyle.color.white
                 borderWidth: 1
 
                 text: qsTr("Restore from backup")

client/ui/qml/Pages2/PageSettingsDns.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 
 import PageEnum 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -101,11 +102,11 @@ PageType {
                 id: restoreDefaultButton
                 Layout.fillWidth: true
 
-                defaultColor: "transparent"
+                defaultColor: AmneziaStyle.color.transparent
-                hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                hoveredColor: AmneziaStyle.color.blackHovered
-                pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                pressedColor: AmneziaStyle.color.blackPressed
-                disabledColor: "#878B91"
+                disabledColor: AmneziaStyle.color.grey
-                textColor: "#D7D8DB"
+                textColor: AmneziaStyle.color.white
                 borderWidth: 1
 
                 text: qsTr("Restore default")

client/ui/qml/Pages2/PageSettingsLogging.qml

@@ -6,6 +6,7 @@ import QtQuick.Dialogs
 import QtCore
 
 import PageEnum 1.0
+import Style 1.0
 
 import "../Controls2"
 import "../Config"
@@ -114,7 +115,7 @@ disabled after 14 days, and all log files will be deleted.")
                         Layout.fillWidth: true
 
                         text: qsTr("Open folder with logs")
-                        color: "#D7D8DB"
+                        color: AmneziaStyle.color.white
                     }
                 }
 
@@ -159,7 +160,7 @@ disabled after 14 days, and all log files will be deleted.")
                         Layout.fillWidth: true
 
                         text: qsTr("Save logs to file")
-                        color: "#D7D8DB"
+                        color: AmneziaStyle.color.white
                     }
                 }
 
@@ -208,7 +209,7 @@ disabled after 14 days, and all log files will be deleted.")
                         Layout.fillWidth: true
 
                         text: qsTr("Clear logs")
-                        color: "#D7D8DB"
+                        color: AmneziaStyle.color.white
                     }
                 }
             }

client/ui/qml/Pages2/PageSettingsServerData.qml

@@ -6,6 +6,7 @@ import SortFilterProxyModel 0.2
 
 import PageEnum 1.0
 import ProtocolEnum 1.0
+import Style 1.0
 
 import "../Controls2"
 import "../Controls2/TextTypes"
@@ -118,7 +119,7 @@ PageType {
                 Layout.fillWidth: true
 
                 text: qsTr("Reboot server")
-                textColor: "#EB5757"
+                textColor: AmneziaStyle.color.red
 
                 KeyNavigation.tab: labelWithButton3
 
@@ -159,7 +160,7 @@ PageType {
                 Layout.fillWidth: true
 
                 text: qsTr("Remove server from application")
-                textColor: "#EB5757"
+                textColor: AmneziaStyle.color.red
 
                 Keys.onTabPressed: {
                     if (content.isServerWithWriteAccess) {
@@ -207,7 +208,7 @@ PageType {
                 Layout.fillWidth: true
 
                 text: qsTr("Clear server from Amnezia software")
-                textColor: "#EB5757"
+                textColor: AmneziaStyle.color.red
 
                 Keys.onTabPressed: labelWithButton5.visible ?
                                     labelWithButton5.forceActiveFocus() :
@@ -250,7 +251,7 @@ PageType {
                 Layout.fillWidth: true
 
                 text: qsTr("Reset API config")
-                textColor: "#EB5757"
+                textColor: AmneziaStyle.color.red
 
                 Keys.onTabPressed: root.lastItemTabClickedSignal()
 

client/ui/qml/Pages2/PageSettingsServerInfo.qml

@@ -8,6 +8,7 @@ import PageEnum 1.0
 import ProtocolEnum 1.0
 import ContainerProps 1.0
 import ProtocolProps 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -175,7 +176,7 @@ PageType {
                            && !ServersModel.getProcessedServerData("hasInstalledContainers")) ? 2 : 0
 
             background: Rectangle {
-                color: "transparent"
+                color: AmneziaStyle.color.transparent
             }
 
             activeFocusOnTab: true

client/ui/qml/Pages2/PageSettingsServerProtocol.qml

@@ -8,6 +8,7 @@ import PageEnum 1.0
 import ProtocolEnum 1.0
 import ContainerEnum 1.0
 import ContainerProps 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -182,7 +183,7 @@ PageType {
             Keys.onTabPressed: lastItemTabClicked(focusItem)
 
             text: qsTr("Remove ") + ContainersModel.getProcessedContainerName()
-            textColor: "#EB5757"
+            textColor: AmneziaStyle.color.red
 
             clickedFunction: function() {
                 var headerText = qsTr("Remove %1 from server?").arg(ContainersModel.getProcessedContainerName())

client/ui/qml/Pages2/PageSettingsSplitTunneling.qml

@@ -10,6 +10,7 @@ import SortFilterProxyModel 0.2
 import PageEnum 1.0
 import ProtocolEnum 1.0
 import ContainerProps 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -265,7 +266,7 @@ PageType {
                             text: url
                             descriptionText: ip
                             rightImageSource: "qrc:/images/controls/trash.svg"
-                            rightImageColor: "#D7D8DB"
+                            rightImageColor: AmneziaStyle.color.white
 
                             clickedFunction: function() {
                                 var headerText = qsTr("Remove ") + url + "?"
@@ -299,7 +300,7 @@ PageType {
     Rectangle {
         anchors.fill: addSiteButton
         anchors.bottomMargin: -24
-        color: "#0E0E11"
+        color: AmneziaStyle.color.black
         opacity: 0.8
     }
 
@@ -340,7 +341,7 @@ PageType {
             implicitHeight: 56
 
             image: "qrc:/images/controls/more-vertical.svg"
-            imageColor: "#D7D8DB"
+            imageColor: AmneziaStyle.color.white
 
             onClicked: function () {
                 moreActionsDrawer.open()

client/ui/qml/Pages2/PageSetupWizardEasy.qml

@@ -7,6 +7,7 @@ import SortFilterProxyModel 0.2
 import PageEnum 1.0
 import ContainerProps 1.0
 import ProtocolProps 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -185,11 +186,11 @@ PageType {
                 anchors.topMargin: 8
                 anchors.bottomMargin: 24
 
-                defaultColor: "transparent"
+                defaultColor: AmneziaStyle.color.transparent
-                hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                hoveredColor: AmneziaStyle.color.blackHovered
-                pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                pressedColor: AmneziaStyle.color.blackPressed
-                disabledColor: "#878B91"
+                disabledColor: AmneziaStyle.color.grey
-                textColor: "#D7D8DB"
+                textColor: AmneziaStyle.color.white
                 borderWidth: 1
 
                 Keys.onTabPressed: lastItemTabClicked(focusItem)

client/ui/qml/Pages2/PageSetupWizardProtocolSettings.qml

@@ -7,6 +7,7 @@ import SortFilterProxyModel 0.2
 import PageEnum 1.0
 import ContainerProps 1.0
 import ProtocolProps 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -93,11 +94,11 @@ PageType {
 
                             implicitHeight: 32
 
-                            defaultColor: "transparent"
+                            defaultColor: AmneziaStyle.color.transparent
-                            hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                            hoveredColor: AmneziaStyle.color.blackHovered
-                            pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                            pressedColor: AmneziaStyle.color.blackPressed
-                            disabledColor: "#878B91"
+                            disabledColor: AmneziaStyle.color.grey
-                            textColor: "#FBB26A"
+                            textColor: AmneziaStyle.color.orange
 
                             text: qsTr("More detailed")
                             KeyNavigation.tab: transportProtoSelector
@@ -194,7 +195,7 @@ PageType {
 
                                         Rectangle {
                                             Layout.fillHeight: true
-                                            color: "transparent"
+                                            color: AmneziaStyle.color.transparent
                                         }
 
                                         BasicButtonType {
@@ -247,7 +248,7 @@ PageType {
 
                         Rectangle {
                             Layout.fillHeight: true
-                            color: "transparent"
+                            color: AmneziaStyle.color.transparent
                         }
 
                         BasicButtonType {

client/ui/qml/Pages2/PageSetupWizardQrReader.qml

@@ -5,6 +5,7 @@ import QtQuick.Dialogs
 
 import PageEnum 1.0
 import QRCodeReader 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -60,7 +61,7 @@ PageType {
         anchors.rightMargin: 16
         anchors.bottomMargin: 34
 
-        color: "transparent"
+        color: AmneziaStyle.color.transparent
         //radius: 16
 
         QRCodeReader {

client/ui/qml/Pages2/PageSetupWizardStart.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 
 import PageEnum 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -166,11 +167,11 @@ PageType {
                 Layout.leftMargin: 16
                 Layout.rightMargin: 16
 
-                defaultColor: "transparent"
+                defaultColor: AmneziaStyle.color.transparent
-                hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                hoveredColor: AmneziaStyle.color.blackHovered
-                pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                pressedColor: AmneziaStyle.color.blackPressed
-                disabledColor: "#878B91"
+                disabledColor: AmneziaStyle.color.grey
-                textColor: "#D7D8DB"
+                textColor: AmneziaStyle.color.white
                 borderWidth: 1
 
                 text: qsTr("I have nothing")

client/ui/qml/Pages2/PageSetupWizardViewConfig.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts
 import QtQuick.Dialogs
 
 import PageEnum 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -105,11 +106,11 @@ PageType {
                 Layout.leftMargin: -8
                 implicitHeight: 32
 
-                defaultColor: "transparent"
+                defaultColor: AmneziaStyle.color.transparent
-                hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                hoveredColor: AmneziaStyle.color.blackHovered
-                pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                pressedColor: AmneziaStyle.color.blackPressed
-                disabledColor: "#878B91"
+                disabledColor: AmneziaStyle.color.grey
-                textColor: "#FBB26A"
+                textColor: AmneziaStyle.color.orange
 
                 text: showContent ? qsTr("Collapse content") : qsTr("Show content")
                 KeyNavigation.tab: connectButton
@@ -138,8 +139,8 @@ PageType {
 
                 iconPath: "qrc:/images/controls/alert-circle.svg"
 
-                textColor: "#EB5757"
+                textColor: AmneziaStyle.color.red
-                imageColor: "#EB5757"
+                imageColor: AmneziaStyle.color.red
             }
 
             WarningType {
@@ -158,7 +159,7 @@ PageType {
                 implicitHeight: configContent.implicitHeight
 
                 radius: 10
-                color: "#1C1D21"
+                color: AmneziaStyle.color.blackLight
 
                 visible: showContent
 
@@ -179,7 +180,7 @@ PageType {
     Rectangle {
         anchors.fill: columnContent
         anchors.bottomMargin: -24
-        color: "#0E0E11"
+        color: AmneziaStyle.color.black
         opacity: 0.8
     }
 

client/ui/qml/Pages2/PageShare.qml

@@ -7,6 +7,7 @@ import SortFilterProxyModel 0.2
 
 import PageEnum 1.0
 import ContainerProps 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -267,7 +268,7 @@ PageType {
                 implicitWidth: accessTypeSelectorContent.implicitWidth
                 implicitHeight: accessTypeSelectorContent.implicitHeight
 
-                color: "#1C1D21"
+                color: AmneziaStyle.color.blackLight
                 radius: 16
 
                 RowLayout {
@@ -321,7 +322,7 @@ PageType {
                 visible: accessTypeSelector.currentIndex === 0
 
                 text: qsTr("Share VPN access without the ability to manage the server")
-                color: "#878B91"
+                color: AmneziaStyle.color.grey
             }
 
             TextFieldWithHeaderType {
@@ -652,7 +653,7 @@ PageType {
                 ImageButtonType {
                     id: closeSearchButton
                     image: "qrc:/images/controls/close.svg"
-                    imageColor: "#D7D8DB"
+                    imageColor: AmneziaStyle.color.white
 
                     Keys.onTabPressed: {
                         if (!GC.isMobile()) {
@@ -800,7 +801,7 @@ PageType {
                                 ColumnLayout
                                 {
                                     id: textColumn
-                                    property string textColor: "#878B91"
+                                    property string textColor: AmneziaStyle.color.grey
                                     Layout.bottomMargin: 24
 
                                     ParagraphTextType {
@@ -846,11 +847,11 @@ PageType {
                                     Layout.fillWidth: true
                                     Layout.topMargin: 24
 
-                                    defaultColor: "transparent"
+                                    defaultColor: AmneziaStyle.color.transparent
-                                    hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                                    hoveredColor: AmneziaStyle.color.blackHovered
-                                    pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                                    pressedColor: AmneziaStyle.color.blackPressed
-                                    disabledColor: "#878B91"
+                                    disabledColor: AmneziaStyle.color.grey
-                                    textColor: "#D7D8DB"
+                                    textColor: AmneziaStyle.color.white
                                     borderWidth: 1
 
                                     text: qsTr("Rename")
@@ -939,11 +940,11 @@ PageType {
                                     id: revokeButton
                                     Layout.fillWidth: true
 
-                                    defaultColor: "transparent"
+                                    defaultColor: AmneziaStyle.color.transparent
-                                    hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                                    hoveredColor: AmneziaStyle.color.blackHovered
-                                    pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                                    pressedColor: AmneziaStyle.color.blackPressed
-                                    disabledColor: "#878B91"
+                                    disabledColor: AmneziaStyle.color.grey
-                                    textColor: "#D7D8DB"
+                                    textColor: AmneziaStyle.color.white
                                     borderWidth: 1
 
                                     text: qsTr("Revoke")

client/ui/qml/Pages2/PageShareFullAccess.qml

@@ -7,6 +7,7 @@ import SortFilterProxyModel 0.2
 
 import PageEnum 1.0
 import ContainerProps 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -66,7 +67,7 @@ PageType {
 
                 text: qsTr("We recommend that you use full access to the server only for your own additional devices.\n") +
                       qsTr("If you share full access with other people, they can remove and add protocols and services to the server, which will cause the VPN to work incorrectly for all users. ")
-                color: "#878B91"
+                color: AmneziaStyle.color.grey
             }
 
             DropDownType {

client/ui/qml/Pages2/PageStart.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts
 import QtQuick.Shapes
 
 import PageEnum 1.0
+import Style 1.0
 
 import "./"
 import "../Controls2"
@@ -218,8 +219,8 @@ PageType {
                 PathLine { x: 0; y: 0 }
 
                 strokeWidth: 1
-                strokeColor: "#2C2D30"
+                strokeColor: AmneziaStyle.color.greyDark
-                fillColor: "#1C1D21"
+                fillColor: AmneziaStyle.color.blackLight
             }
         }
 

client/ui/qml/main2.qml

@@ -5,6 +5,7 @@ import QtQuick.Layouts
 import QtQuick.Dialogs
 
 import PageEnum 1.0
+import Style 1.0
 
 import "Config"
 import "Controls2"
@@ -21,7 +22,7 @@ Window  {
     maximumWidth: 600
     maximumHeight: 800
 
-    color: "#0E0E11"
+    color: AmneziaStyle.color.black
 
     onClosing: function() {
         console.debug("QML onClosing signal")
@@ -194,11 +195,11 @@ Window  {
 
                     Layout.fillWidth: true
 
-                    defaultColor: "transparent"
+                    defaultColor: AmneziaStyle.color.transparent
-                    hoveredColor: Qt.rgba(1, 1, 1, 0.08)
+                    hoveredColor: AmneziaStyle.color.blackHovered
-                    pressedColor: Qt.rgba(1, 1, 1, 0.12)
+                    pressedColor: AmneziaStyle.color.blackPressed
-                    disabledColor: "#878B91"
+                    disabledColor: AmneziaStyle.color.grey
-                    textColor: "#D7D8DB"
+                    textColor: AmneziaStyle.color.white
                     borderWidth: 1
 
                     text: qsTr("Save")