feat: add dark theme colors and new properties for it

2020-07-13 14:45:54 -04:00 · 2020-07-13 14:45:54 -04:00 · 92f5a9ca5c
parent 938b1ead15
commit 92f5a9ca5c
37 changed files with 88 additions and 65 deletions
--- a/ui/app/AppLayouts/Chat/ChatColumn.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn.qml
@ -62,8 +62,9 @@ StackLayout {
 
        Rectangle {
            id: inputArea
+            color: Style.current.background
            border.width: 1
-            border.color: Style.current.grey
+            border.color: Style.current.border
            Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
            Layout.fillWidth: true
            Layout.preferredWidth: parent.width
--- a/ui/app/AppLayouts/Chat/ChatColumn/ChatInput.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatInput.qml
@ -10,6 +10,7 @@ Rectangle {
    id: rectangle
    border.width: 0
    height: 52
+    color: Style.current.transparent

    visible: chatsModel.activeChannel.chatType !== Constants.chatTypePrivateGroupChat || chatsModel.activeChannel.isMember(profileModel.profile.pubKey)

--- a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml
@ -242,8 +242,8 @@ Item {
        property int chatHorizontalPadding: 12

        id: chatBox
-        color: isSticker ? Style.current.white : (isCurrentUser ? Style.current.blue : Style.current.lightBlue)
-        border.color: isSticker ? Style.current.grey : Style.current.transparent
+        color: isSticker ? Style.current.background : (isCurrentUser ? Style.current.blue : Style.current.secondaryBackground)
+        border.color: isSticker ? Style.current.border : Style.current.transparent
        border.width: 1
        height: (3 * chatVerticalPadding) + (contentType == Constants.stickerType ? stickerId.height : (chatText.height + chatReply.height))
        width: {
@ -334,7 +334,7 @@ Item {
            font.pixelSize: 15
            readOnly: true
            selectByMouse: true
-            color: !isCurrentUser ? Style.current.black : Style.current.white
+            color: !isCurrentUser ? Style.current.textColor : Style.current.currentUserTextColor
            visible: contentType == Constants.messageType || isEmoji
        }

--- a/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml
@ -10,10 +10,10 @@ Rectangle {
    property int iconSize: 13

    id: chatTopBarContent
-    color: "white"
+    color: Style.current.background
    height: 56
    Layout.fillWidth: true
-    border.color: Style.current.grey
+    border.color: Style.current.border
    border.width: 1

    ChannelIcon {
@ -94,7 +94,7 @@ Rectangle {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: {
-                parent.color = Style.current.grey
+                parent.color = Style.current.border
            }
            onExited: {
                parent.color = Style.current.transparent
--- a/ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml
+++ b/ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml
@ -14,7 +14,7 @@ Rectangle {
    property string searchStr: ""

    id: wrapper
-    color: ListView.isCurrentItem ? Style.current.lightBlue : Style.current.transparent
+    color: ListView.isCurrentItem ? Style.current.secondaryBackground : Style.current.transparent
    anchors.right: parent.right
    anchors.top: applicationWindow.top
    anchors.left: parent.left
@ -69,7 +69,6 @@ Rectangle {
        anchors.leftMargin: channelIcon.visible ? 2 : Style.current.padding
        anchors.top: parent.top
        anchors.topMargin: Style.current.smallPadding
-        color: "black"
    }
    
    StyledText {
--- a/ui/app/AppLayouts/Chat/components/Contact.qml
+++ b/ui/app/AppLayouts/Chat/components/Contact.qml
@ -27,6 +27,7 @@ Rectangle {
    anchors.left: parent.left
    border.width: 0
    radius: Style.current.radius
+    color: Style.current.transparent

    Identicon {
        id: accountImage
--- a/ui/app/AppLayouts/Chat/components/GroupChatPopup.qml
+++ b/ui/app/AppLayouts/Chat/components/GroupChatPopup.qml
@ -176,7 +176,7 @@ ModalPopup {
                }
            ]
            SVGImage {
-                id: "btnSelectMembersImg"
+                id: btnSelectMembersImg
                width: 50
                height: 50
            }
--- a/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml
+++ b/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml
@ -86,7 +86,7 @@ ModalPopup {
        }
    }
    
-    Text {
+    StyledText {
        id: ensUsername
        anchors.top: chatKey.bottom
        anchors.topMargin: Style.current.padding
--- a/ui/app/AppLayouts/Chat/components/StickersPopup.qml
+++ b/ui/app/AppLayouts/Chat/components/StickersPopup.qml
@ -62,7 +62,7 @@ Popup {
                    anchors.top: imgNoStickers.bottom
                    anchors.topMargin: 8

-                    Text {
+                    StyledText {
                        id: lblNoStickersYet
                        visible: stickerPackListView.count <= 0
                        anchors.fill: parent
@ -73,7 +73,7 @@ Popup {
                        horizontalAlignment: Text.AlignHCenter
                    }

-                    Text {
+                    StyledText {
                        id: lblNoRecentStickers
                        visible: stickerPackListView.count > 0 && stickerGrid.count <= 0
                        anchors.fill: parent
--- a/ui/app/AppLayouts/Chat/components/SuggestedChannel.qml
+++ b/ui/app/AppLayouts/Chat/components/SuggestedChannel.qml
@ -9,7 +9,9 @@ Rectangle {
    radius: 8
    width: children[0].width + 10
    height: 32
-    border.color: Style.current.grey
+    border.color: Style.current.border
+    color: Style.current.background
+
    StyledText {
        id: suggestedChannelText
        text: "#" + channel
--- a/ui/app/AppLayouts/Node/NodeLayout.qml
+++ b/ui/app/AppLayouts/Node/NodeLayout.qml
@ -64,7 +64,7 @@ Item {
                Rectangle {
                    id: rectangle
                    color: "#00000000"
-                    border.color: Style.current.grey
+                    border.color: Style.current.border
                    anchors.fill: parent

                    Button {
--- a/ui/app/AppLayouts/Profile/LeftTab/Menu.qml
+++ b/ui/app/AppLayouts/Profile/LeftTab/Menu.qml
@ -10,7 +10,7 @@ Rectangle {
    readonly property int w: 340

    id: profileTabBar
-    color: "#ffffff"
+    color: Style.current.transparent
    height: parent.height
    Layout.fillHeight: true
    Layout.fillWidth: true
@ -41,7 +41,6 @@ Rectangle {

            StyledText {
                id: element1
-                color: "#000000"
                //% "ENS usernames"
                text: qsTrId("ens-usernames")
                anchors.left: parent.left
@ -67,7 +66,6 @@ Rectangle {

            StyledText {
                id: element2
-                color: "#000000"
                //% "Contacts"
                text: qsTrId("contacts")
                anchors.left: parent.left
@ -93,7 +91,6 @@ Rectangle {

            StyledText {
                id: element3
-                color: "#000000"
                //% "Privacy and security"
                text: qsTrId("privacy-and-security")
                anchors.left: parent.left
@ -115,11 +112,10 @@ Rectangle {
            anchors.top: privacyTabButton.bottom
            anchors.topMargin: 0
            background: Rectangle {
-                color: Theme.transparent
+                color: Style.current.transparent
            }

            StyledText {
-                color: "#000000"
                //% "Devices"
                text: qsTrId("devices")
                anchors.left: parent.left
@ -146,7 +142,6 @@ Rectangle {

            StyledText {
                id: element4
-                color: "#000000"
                //% "Sync settings"
                text: qsTrId("sync-settings")
                anchors.left: parent.left
@ -173,7 +168,6 @@ Rectangle {

            StyledText {
                id: element5
-                color: "#000000"
                //% "Language settings"
                text: qsTrId("language-settings")
                anchors.left: parent.left
@ -200,7 +194,6 @@ Rectangle {

            StyledText {
                id: element6
-                color: "#000000"
                //% "Notifications settings"
                text: qsTrId("notifications-settings")
                anchors.left: parent.left
@ -226,7 +219,6 @@ Rectangle {

            StyledText {
                id: element7
-                color: "#000000"
                //% "Advanced settings"
                text: qsTrId("advanced-settings")
                anchors.left: parent.left
@ -253,7 +245,6 @@ Rectangle {

            StyledText {
                id: element8
-                color: "#000000"
                //% "Need help?"
                text: qsTrId("need-help")
                anchors.left: parent.left
@ -279,7 +270,6 @@ Rectangle {

            StyledText {
                id: element9
-                color: "#000000"
                //% "About"
                text: qsTrId("about-app")
                anchors.left: parent.left
@ -305,7 +295,6 @@ Rectangle {

            StyledText {
                id: element10
-                color: "#000000"
                //% "Sign out"
                text: qsTrId("sign-out")
                anchors.left: parent.left
--- a/ui/app/AppLayouts/Profile/LeftTab/Profile.qml
+++ b/ui/app/AppLayouts/Profile/LeftTab/Profile.qml
@ -11,6 +11,7 @@ Rectangle {
    id: profileHeaderContent
    height: parent.height
    Layout.fillWidth: true
+    color: Style.current.transparent

    Item {
        id: profileImgNameContainer
--- a/ui/app/AppLayouts/Profile/Sections/AboutContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/AboutContainer.qml
@ -99,7 +99,6 @@ Item {
        font.letterSpacing: 0.1
        width: 700
        wrapMode: Text.Wrap
-        color: Style.current.black
    }
 }

--- a/ui/app/AppLayouts/Profile/Sections/BackupSeedModal.qml
+++ b/ui/app/AppLayouts/Profile/Sections/BackupSeedModal.qml
@ -52,7 +52,7 @@ ModalPopup {
              visible: index >= wrapper.len/2
            }

-            Text {
+            StyledText {
              id: count
              text: index+1
              color: Style.current.darkGrey
@ -63,7 +63,7 @@ ModalPopup {
              font.pixelSize: 15
            }

-            TextEdit {
+            StyledTextEdit {
              text: modelData
              font.pixelSize: 15
              anchors.bottom: parent.bottom
@ -79,7 +79,7 @@ ModalPopup {
      }
    }

-    Text {
+    StyledText {
      id: confirmationsInfo
      //% "With this 12 words you can always get your key back. Write it down. Keep it safe, offline, and separate from this device."
      text: qsTrId("with-this-12-words-you-can-always-get-your-key-back.-write-it-down.-keep-it-safe,-offline,-and-separate-from-this-device.")
--- a/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/PrivacyContainer.qml
@ -23,7 +23,7 @@ Item {
        font.pixelSize: 20
    }

-    Text {
+    StyledText {
      id: labelSecurity
      //% "Security"
      text: qsTrId("security")
@ -43,7 +43,7 @@ Item {
      anchors.leftMargin: Style.current.bigPadding
      height: children[0].height
      width: children[0].width
-      Text {
+      StyledText {
          //% "Backup Seed Phrase"
          text: qsTrId("backup-seed-phrase")
          font.pixelSize: 14
--- a/ui/app/AppLayouts/Wallet/AssetsTab.qml
+++ b/ui/app/AppLayouts/Wallet/AssetsTab.qml
@ -35,7 +35,6 @@ Item {
                anchors.leftMargin: Style.current.smallPadding
                anchors.top: assetInfoImage.top
                anchors.topMargin: 0
-                color: Style.current.black
                font.pixelSize: 15
            }
            StyledText {
--- a/ui/app/AppLayouts/Wallet/LeftTab.qml
+++ b/ui/app/AppLayouts/Wallet/LeftTab.qml
@ -24,7 +24,7 @@ Item {
        anchors.right: parent.right
        anchors.rightMargin: 0
        height: walletValueTextContainer.y + walletValueTextContainer.height + Style.current.padding
-        color: Style.current.white
+        color: Style.current.background
        z: 1
        border.width: 0

@ -53,7 +53,7 @@ Item {

            StyledTextEdit {
                id: walletAmountValue
-                color: "black"
+                color: Style.current.textColor
                text: walletModel.totalFiatBalance
                selectByMouse: true
                cursorVisible: true
@ -125,7 +125,7 @@ Item {
                anchors.leftMargin: 10
                font.pixelSize: 15
                font.weight: Font.Medium
-                color: selected ? Style.current.white : Style.current.black
+                color: selected ? Style.current.white : Style.current.textColor
            }
            StyledText {
                id: walletAddress
@ -152,7 +152,7 @@ Item {
                anchors.rightMargin: Style.current.padding
                font.pixelSize: 15
                font.weight: Font.Medium
-                color: selected ? Style.current.white : Style.current.black
+                color: selected ? Style.current.white : Style.current.textColor
            }
            MouseArea {
                anchors.fill: parent
--- a/ui/app/AppLayouts/Wallet/SetCurrencyModal.qml
+++ b/ui/app/AppLayouts/Wallet/SetCurrencyModal.qml
@ -29,7 +29,7 @@ Item {
        width: 480
        height: 510
        background: Rectangle {
-            color: Style.current.white
+            color: Style.current.background
            radius: Style.current.radius
        }
        padding: 0
--- a/ui/app/AppLayouts/Wallet/WalletLayout.qml
+++ b/ui/app/AppLayouts/Wallet/WalletLayout.qml
@ -65,16 +65,19 @@ SplitView {
                    anchors.top: parent.top
                    anchors.topMargin: Style.current.padding
                    height: assetBtn.height
+                    background: Rectangle {
+                        color: Style.current.transparent
+                    }

                    StatusTabButton {
                        id: assetBtn
-                        btnText: "Assets"
+                        btnText: qsTr("Assets")
                    }
                    StatusTabButton {
                        id: collectiblesBtn
                        anchors.left: assetBtn.right
                        anchors.leftMargin: 32
-                        btnText: "Collectibles"
+                        btnText: qsTr("Collectibles")
                        onClicked: {
                          walletModel.loadCollectiblesForAccount(walletModel.currentAccount.address)
                        }
@ -83,7 +86,7 @@ SplitView {
                        id: historyBtn
                        anchors.left: collectiblesBtn.right
                        anchors.leftMargin: 32
-                        btnText: "History"
+                        btnText: qsTr("History")
                        onClicked: {
                          walletModel.loadTransactionsForAccount(walletModel.currentAccount.address)
                        }
--- a/ui/app/AppMain.qml
+++ b/ui/app/AppMain.qml
@ -28,7 +28,7 @@ RowLayout {
        spacing: 5
        background: Rectangle {
            color: "#00000000"
-            border.color: Style.current.grey
+            border.color: Style.current.border
        }

        TabButton {
@ -41,7 +41,7 @@ RowLayout {
            transformOrigin: Item.Center
            anchors.horizontalCenter: parent.horizontalCenter
            background: Rectangle {
-                color: Style.current.lightBlue
+                color: Style.current.secondaryBackground
                opacity: parent.checked ? 1 : 0
                radius: 50
            }
@ -68,7 +68,7 @@ RowLayout {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: chatBtn.top
            background: Rectangle {
-                color: Style.current.lightBlue
+                color: Style.current.secondaryBackground
                opacity: parent.checked ? 1 : 0
                radius: 50
            }
@ -95,7 +95,7 @@ RowLayout {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: walletBtn.top
            background: Rectangle {
-                color: Style.current.lightBlue
+                color: Style.current.secondaryBackground
                opacity: parent.checked ? 1 : 0
                radius: 50
            }
@ -120,7 +120,7 @@ RowLayout {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: browserBtn.top
            background: Rectangle {
-                color: Style.current.lightBlue
+                color: Style.current.secondaryBackground
                opacity: parent.checked ? 1 : 0
                radius: 50
            }
@ -147,7 +147,7 @@ RowLayout {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: profileBtn.top
            background: Rectangle {
-                color: Style.current.lightBlue
+                color: Style.current.secondaryBackground
                opacity: parent.checked ? 1 : 0
                radius: 50
            }
--- a/ui/imports/Themes/DarkTheme.qml
+++ b/ui/imports/Themes/DarkTheme.qml
@ -2,7 +2,7 @@ import QtQuick 2.13
 import "."

 Theme {
-    property color white: "#000000"
+    property color white: "#FFFFFF"
    property color white2: "#FCFCFC"
    property color black: "#000000"
    property color grey: "#EEF2F5"
@ -11,7 +11,15 @@ Theme {
    property color transparent: "#00000000"
    property color darkGrey: "#939BA1"
    property color lightBlueText: "#8f9fec"
+
    property color darkBlue: "#3c55c9"
    property color darkBlueBtn: "#5a70dd"
    property color red: "#FF2D55"
+
+    property color background: "#141414"
+    property color border: "#252528"
+    property color textColor: white
+    property color currentUserTextColor: white
+    property color secondaryBackground: "#23252F"
+    property color modalBackground: background
 }
--- a/ui/imports/Themes/LightTheme.qml
+++ b/ui/imports/Themes/LightTheme.qml
@ -14,4 +14,11 @@ Theme {
    property color darkBlue: "#3c55c9"
    property color darkBlueBtn: "#5a70dd"
    property color red: "#FF2D55"
+
+    property color background: white
+    property color border: grey
+    property color textColor: black
+    property color currentUserTextColor: white
+    property color secondaryBackground: lightBlue
+    property color modalBackground: white2
 }
--- a/ui/imports/Themes/Theme.qml
+++ b/ui/imports/Themes/Theme.qml
@ -24,6 +24,13 @@ QtObject {
    property color darkBlueBtn
    property color red

+    property color background
+    property color border
+    property color textColor
+    property color currentUserTextColor
+    property color secondaryBackground
+    property color modalBackground
+
    property int xlPadding: 32
    property int bigPadding: 24
    property int padding: 16
--- a/ui/main.qml
+++ b/ui/main.qml
@ -20,7 +20,7 @@ ApplicationWindow {
    id: applicationWindow
    width: 1232
    height: 770
-    color: Style.current.white
+    color: Style.current.background
    title: {
        // Set application settings
        //% "Nim Status Client"
--- a/ui/onboarding/Intro.qml
+++ b/ui/onboarding/Intro.qml
@ -89,7 +89,6 @@ RowLayout {
            font.letterSpacing: 0.1
            width: 700
            wrapMode: Text.Wrap
-            color: Style.current.black
        }

        CheckBox {
--- a/ui/shared/Input.qml
+++ b/ui/shared/Input.qml
@ -38,7 +38,7 @@ Item {
        anchors.top: parent.top
        anchors.topMargin: 0
        font.pixelSize: 13
-        color: Style.current.black
+        color: Style.current.textColor
    }

    Rectangle {
--- a/ui/shared/ModalPopup.qml
+++ b/ui/shared/ModalPopup.qml
@ -1,6 +1,7 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
+import QtGraphicalEffects 1.13
 import "../imports"

 Popup {
@ -22,7 +23,7 @@ Popup {
    width: 480
    height: 510 // TODO find a way to make this dynamic
    background: Rectangle {
-        color: Style.current.white
+        color: Style.current.background
        radius: 8
    }
    padding: 0
@ -64,6 +65,7 @@ Popup {
            anchors.rightMargin: Style.current.padding
            anchors.right: parent.right
            radius: 8
+            color: Style.current.transparent

            SVGImage {
                id: closeModalImg
@ -73,6 +75,11 @@ Popup {
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
            }
+            ColorOverlay {
+                anchors.fill: closeModalImg
+                source: closeModalImg
+                color: Style.current.textColor
+            }

            MouseArea {
                id: closeModalMouseArea
@ -80,10 +87,10 @@ Popup {
                anchors.fill: parent
                hoverEnabled: true
                onExited: {
-                    closeButton.color = Style.current.white
+                    closeButton.color = Style.current.transparent
                }
                onEntered: {
-                    closeButton.color = Style.current.grey
+                    closeButton.color = Style.current.border
                }
                onClicked: {
                    popup.close()
--- a/ui/shared/PopupMenu.qml
+++ b/ui/shared/PopupMenu.qml
@ -47,7 +47,7 @@ Menu {
                font: popupMenuItem.font
                color: popupMenuItem.highlighted ?
                           Style.current.white :
-                           (popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.black)
+                           (popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.textColor)
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
            }
@ -66,7 +66,7 @@ Menu {
        color: "transparent"
        Rectangle {
            id: bgPopupMenuTopArrow
-            color: Style.current.white2
+            color: Style.current.modalBackground
            height: 14
            width: 14
            rotation: 135
@ -92,7 +92,7 @@ Menu {
            y: 7
            implicitWidth: bgPopupMenu.width
            implicitHeight: bgPopupMenu.height
-            color: Style.current.white2
+            color: Style.current.modalBackground
            radius: 16
            layer.enabled: true
            layer.effect: DropShadow{
--- a/ui/shared/Select.qml
+++ b/ui/shared/Select.qml
@ -37,7 +37,6 @@ Item {
        anchors.top: parent.top
        anchors.topMargin: 0
        font.pixelSize: 13
-        color: Style.current.black
    }

    Rectangle {
--- a/ui/shared/Separator.qml
+++ b/ui/shared/Separator.qml
@ -5,6 +5,6 @@ Rectangle {
      id: separator
      width: parent.width
      height: 1
-      color: Style.current.grey
+      color: Style.current.border
      anchors.topMargin: Style.current.padding
 }
--- a/ui/shared/SplitViewHandle.qml
+++ b/ui/shared/SplitViewHandle.qml
@ -5,5 +5,5 @@ import "../imports"
 Rectangle {
    implicitWidth: 1.2
    color: SplitHandle.pressed ? Style.current.darkGrey
-                : (SplitHandle.hovered ? Qt.darker(Style.current.grey, 1.1) : Style.current.grey)
+                : (SplitHandle.hovered ? Qt.darker(Style.current.border, 1.1) : Style.current.border)
 }
--- a/ui/shared/StatusTabButton.qml
+++ b/ui/shared/StatusTabButton.qml
@ -20,7 +20,7 @@ TabButton {
        text: btnText
        font.weight: Font.Medium
        font.pixelSize: 15
-        color: parent.checked ? Style.current.black : Style.current.darkGrey
+        color: parent.checked ? Style.current.textColor : Style.current.darkGrey
    }

    Rectangle {
--- a/ui/shared/StyledButton.qml
+++ b/ui/shared/StyledButton.qml
@ -5,7 +5,7 @@ import "../imports"

 Button {
    property string label: "My button"
-    property color btnColor: Style.current.lightBlue
+    property color btnColor: Style.current.secondaryBackground
    property color btnBorderColor: "transparent"
    property int btnBorderWidth: 0
    property color textColor: Style.current.blue
--- a/ui/shared/StyledText.qml
+++ b/ui/shared/StyledText.qml
@ -3,4 +3,5 @@ import "../imports"

 Text {
    font.family: Style.current.fontRegular.name
+    color: Style.current.textColor
 }
--- a/ui/shared/StyledTextEdit.qml
+++ b/ui/shared/StyledTextEdit.qml
@ -3,4 +3,5 @@ import "../imports"

 TextEdit {
    font.family: Style.current.fontRegular.name
+    color: Style.current.textColor
 }
--- a/ui/shared/TextWithLabel.qml
+++ b/ui/shared/TextWithLabel.qml
@ -38,7 +38,6 @@ Item {
        anchors.top: inputLabel.bottom
        anchors.topMargin: inputBox.labelMargin
        font.pixelSize: 15
-        color: Style.current.black
    }
 }