Improve overall theme and pane colors

src/gui/Base/HUserAvatar.qml

@@ -35,9 +35,9 @@ HAvatar {
                 "user-power-50"
 
             colorize:
-                invited ? theme.chat.roomPane.member.invitedIcon :
+                invited ? theme.chat.roomPane.listView.member.invitedIcon :
-                admin ? theme.chat.roomPane.member.adminIcon :
+                admin ? theme.chat.roomPane.listView.member.adminIcon :
-                theme.chat.roomPane.member.moderatorIcon
+                theme.chat.roomPane.listView.member.moderatorIcon
 
             HoverHandler { id: membershipIcon }
 

src/gui/Base/MultiviewPane.qml

@@ -6,32 +6,12 @@ import QtQuick.Layouts 1.12
 
 HDrawer {
     id: pane
-
     defaultSize: buttonRepeater.summedImplicitWidth
     minimumSize:
         buttonRepeater.count > 0 ? buttonRepeater.itemAt(0).implicitWidth : 0
 
-    background: HColumnLayout{
-        Rectangle {
-            color: buttonsBackgroundColor
-
-            Layout.fillWidth: true
-            Layout.preferredHeight: buttonFlow.height
-
-            Behavior on Layout.preferredHeight { HNumberAnimation {} }
-        }
-
-        Rectangle {
-            color: backgroundColor
-
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-        }
-    }
-
 
     property color buttonsBackgroundColor
-    property color backgroundColor
 
     readonly property alias buttonRepeater: buttonRepeater
     readonly property alias swipeView: swipeView
@@ -42,14 +22,20 @@ HDrawer {
     HColumnLayout {
         anchors.fill: parent
 
-        HFlow {
+        Rectangle {
-            id: buttonFlow
+            color: buttonsBackgroundColor
-            populate: null
 
             Layout.fillWidth: true
+            Layout.preferredHeight: childrenRect.height
 
-            HRepeater {
+            HFlow {
-                id: buttonRepeater
+                id: buttonFlow
+                width: parent.width
+                populate: null
+
+                HRepeater {
+                    id: buttonRepeater
+                }
             }
         }
 

src/gui/MainPane/Account.qml

@@ -8,16 +8,16 @@ import "../Base"
 HTileDelegate {
     id: account
     rightPadding: 0
-    backgroundColor: theme.mainPane.account.background
+    backgroundColor: theme.mainPane.listView.account.background
     opacity: collapsed && ! mainPane.filter ?
-             theme.mainPane.account.collapsedOpacity : 1
+             theme.mainPane.listView.account.collapsedOpacity : 1
 
     title.text: model.display_name || model.id
     title.font.pixelSize: theme.fontSize.big
     title.color:
         hovered ?
         utils.nameColor(model.display_name || model.id.substring(1)) :
-        theme.mainPane.account.name
+        theme.mainPane.listView.account.name
 
     image: HUserAvatar {
         userId: model.id

src/gui/MainPane/AccountRoomsDelegate.qml

@@ -27,7 +27,7 @@ Column {
         view: accountRooms.view
 
         opacity: collapsed || noFilterResults ?
-                 theme.mainPane.account.collapsedOpacity : 1
+                 theme.mainPane.listView.account.collapsedOpacity : 1
     }
 
     HListView {

src/gui/MainPane/AccountRoomsList.qml

@@ -231,4 +231,10 @@ HListView {
         interval: 200
         onTriggered: activate()
     }
+
+    Rectangle {
+        anchors.fill: parent
+        z: -100
+        color: theme.mainPane.listView.background
+    }
 }

src/gui/MainPane/BottomBar.qml

@@ -4,60 +4,67 @@ import QtQuick 2.12
 import QtQuick.Layouts 1.12
 import "../Base"
 
-HRowLayout {
+Rectangle {
     // Hide filter field overflowing for a sec on size changes
     clip: true
+    color: theme.mainPane.bottomBar.background
+
 
     property AccountRoomsList mainPaneList
     readonly property alias addAccountButton: addAccountButton
     readonly property alias filterField: filterField
     property alias roomFilter: filterField.text
 
-    HButton {
-        id: addAccountButton
-        icon.name: "add-account"
-        toolTip.text: qsTr("Add another account")
-        backgroundColor: theme.mainPane.settingsButton.background
-        onClicked: pageLoader.showPage("AddAccount/AddAccount")
 
-        Layout.fillHeight: true
+    HRowLayout {
-    }
+        anchors.fill: parent
 
-    HTextField {
+        HButton {
-        id: filterField
+            id: addAccountButton
-        saveName: "roomFilterField"
+            icon.name: "add-account"
+            toolTip.text: qsTr("Add another account")
+            backgroundColor: theme.mainPane.bottomBar.settingsButtonBackground
+            onClicked: pageLoader.showPage("AddAccount/AddAccount")
 
-        placeholderText: qsTr("Filter rooms")
+            Layout.fillHeight: true
-        backgroundColor: theme.mainPane.filterRooms.background
-        bordered: false
-        opacity: width >= 16 * theme.uiScale ? 1 : 0
-
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-
-        Keys.onUpPressed: mainPaneList.previous(false)  // do not activate
-        Keys.onDownPressed: mainPaneList.next(false)
-
-        Keys.onEnterPressed: Keys.onReturnPressed(event)
-        Keys.onReturnPressed: {
-            if (event.modifiers & Qt.ShiftModifier) {
-                mainPaneList.toggleCollapseAccount()
-                return
-            }
-
-            if (window.settings.clearRoomFilterOnEnter) {
-                mainPaneList.setCollapseAccount(false)
-                text = ""
-            }
-
-            mainPaneList.requestActivate()
         }
 
-        Keys.onEscapePressed: {
+        HTextField {
-            if (window.settings.clearRoomFilterOnEscape) text = ""
+            id: filterField
-            mainUI.pageLoader.forceActiveFocus()
+            saveName: "roomFilterField"
-        }
 
-        Behavior on opacity { HNumberAnimation {} }
+            placeholderText: qsTr("Filter rooms")
+            backgroundColor: theme.mainPane.bottomBar.filterFieldBackground
+            bordered: false
+            opacity: width >= 16 * theme.uiScale ? 1 : 0
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            Keys.onUpPressed: mainPaneList.previous(false)  // do not activate
+            Keys.onDownPressed: mainPaneList.next(false)
+
+            Keys.onEnterPressed: Keys.onReturnPressed(event)
+            Keys.onReturnPressed: {
+                if (event.modifiers & Qt.ShiftModifier) {
+                    mainPaneList.toggleCollapseAccount()
+                    return
+                }
+
+                if (window.settings.clearRoomFilterOnEnter) {
+                    mainPaneList.setCollapseAccount(false)
+                    text = ""
+                }
+
+                mainPaneList.requestActivate()
+            }
+
+            Keys.onEscapePressed: {
+                if (window.settings.clearRoomFilterOnEscape) text = ""
+                mainUI.pageLoader.forceActiveFocus()
+            }
+
+            Behavior on opacity { HNumberAnimation {} }
+        }
     }
 }

src/gui/MainPane/Room.qml

@@ -7,8 +7,8 @@ import ".."
 import "../Base"
 
 HTileDelegate {
-    backgroundColor: theme.mainPane.room.background
+    backgroundColor: theme.mainPane.listView.room.background
-    opacity: model.left ? theme.mainPane.room.leftRoomOpacity : 1
+    opacity: model.left ? theme.mainPane.listView.room.leftRoomOpacity : 1
 
     topPadding: theme.spacing / (model.index === 0 ? 1 : 1.5)
     bottomPadding: theme.spacing / (model.index === view.count - 1 ? 1 : 1.5)
@@ -21,7 +21,7 @@ HTileDelegate {
         mxc: model.avatar_url
     }
 
-    title.color: theme.mainPane.room.name
+    title.color: theme.mainPane.listView.room.name
     title.text: model.display_name || qsTr("Empty room")
 
     additionalInfo.children: HIcon {
@@ -33,7 +33,7 @@ HTileDelegate {
         Behavior on Layout.maximumWidth { HNumberAnimation {} }
     }
 
-    subtitle.color: theme.mainPane.room.subtitle
+    subtitle.color: theme.mainPane.listView.room.subtitle
     subtitle.textFormat: Text.StyledText
     subtitle.font.italic:
         lastEvent && lastEvent.event_type === "RoomMessageEmote"
@@ -55,11 +55,12 @@ HTileDelegate {
 
         return text.replace(
             /< *span +class=['"]?quote['"]? *>(.+?)<\/ *span *>/g,
-            `<font color="${theme.mainPane.room.subtitleQuote}">$1</font>`,
+            `<font color="${theme.mainPane.listView.room.subtitleQuote}">` +
+            `$1</font>`,
         )
     }
 
-    rightInfo.color: theme.mainPane.room.lastEventDate
+    rightInfo.color: theme.mainPane.listView.room.lastEventDate
     rightInfo.text: {
         model.last_event_date < new Date(1) ?
         "" :

src/gui/MainPane/TopBar.qml

@@ -12,6 +12,7 @@ Rectangle {
         anchors.fill: parent
 
         HButton {
+            backgroundColor: "transparent"
             icon.name: "placeholder-logo"
             icon.color: theme.mainPane.topBar.placeholderLogo
 
@@ -29,6 +30,7 @@ Rectangle {
         }
 
         HButton {
+            backgroundColor: "transparent"
             icon.name: "developper-console"
             toolTip.text: qsTr("Developper console")
 
@@ -38,6 +40,7 @@ Rectangle {
         }
 
         HButton {
+            backgroundColor: "transparent"
             icon.name: "reload-config-files"
             toolTip.text: qsTr("Reload config files")
 
@@ -47,6 +50,7 @@ Rectangle {
         }
 
         HButton {
+            backgroundColor: "transparent"
             icon.name: "settings"
             toolTip.text: qsTr("Open config folder")
 

src/gui/Pages/Chat/RoomPane/MemberDelegate.qml

@@ -6,9 +6,9 @@ import "../../../Base"
 
 HTileDelegate {
     id: memberDelegate
-    backgroundColor: theme.chat.roomPane.member.background
+    backgroundColor: theme.chat.roomPane.listView.member.background
     contentOpacity:
-        model.invited ? theme.chat.roomPane.member.invitedOpacity : 1
+        model.invited ? theme.chat.roomPane.listView.member.invitedOpacity : 1
 
     image: HUserAvatar {
         userId: model.id
@@ -23,10 +23,10 @@ HTileDelegate {
     title.color:
         memberDelegate.hovered ?
         utils.nameColor(model.display_name || model.id.substring(1)) :
-        theme.chat.roomPane.member.name
+        theme.chat.roomPane.listView.member.name
 
     subtitle.text: model.display_name ? model.id : ""
-    subtitle.color: theme.chat.roomPane.member.subtitle
+    subtitle.color: theme.chat.roomPane.listView.member.subtitle
 
     contextMenu: HMenu {
         HMenuItem {

src/gui/Pages/Chat/RoomPane/MemberView.qml

@@ -27,56 +27,72 @@ HColumnLayout {
 
         Layout.fillWidth: true
         Layout.fillHeight: true
+
+        Rectangle {
+            anchors.fill: parent
+            z: -100
+            color: theme.chat.roomPane.listView.background
+        }
     }
 
-    HRowLayout {
+    Rectangle {
+        color: theme.chat.roomPane.bottomBar.background
+
+        Layout.fillWidth: true
         Layout.minimumHeight: theme.baseElementsHeight
         Layout.maximumHeight: Layout.minimumHeight
 
-        HTextField {
+        HRowLayout {
-            id: filterField
+            anchors.fill: parent
-            saveName: "memberFilterField"
-            saveId: chat.roomId
 
-            placeholderText: qsTr("Filter members")
+            HTextField {
-            backgroundColor: theme.chat.roomPane.filterMembers.background
+                id: filterField
-            bordered: false
+                saveName: "memberFilterField"
-            opacity: width >= 16 * theme.uiScale ? 1 : 0
+                saveId: chat.roomId
 
-            Layout.fillWidth: true
+                placeholderText: qsTr("Filter members")
-            Layout.fillHeight: true
+                backgroundColor:
+                    theme.chat.roomPane.bottomBar.filterMembers.background
+                bordered: false
+                opacity: width >= 16 * theme.uiScale ? 1 : 0
 
-            Behavior on opacity { HNumberAnimation {} }
+                Layout.fillWidth: true
-        }
+                Layout.fillHeight: true
 
-        HButton {
+                Behavior on opacity { HNumberAnimation {} }
-            id: inviteButton
+            }
-            icon.name: "room-send-invite"
-            backgroundColor: theme.chat.roomPane.inviteButton.background
-            enabled: chat.roomInfo.can_invite
 
-            toolTip.text:
+            HButton {
-                enabled ?
+                id: inviteButton
-                qsTr("Invite members to this room") :
+                icon.name: "room-send-invite"
-                qsTr("No permission to invite members to this room")
+                backgroundColor:
+                    theme.chat.roomPane.bottomBar.inviteButton.background
+                enabled: chat.roomInfo.can_invite
 
-            topPadding: 0 // XXX
+                toolTip.text:
-            bottomPadding: 0
+                    enabled ?
+                    qsTr("Invite members to this room") :
+                    qsTr("No permission to invite members to this room")
 
-            onClicked: utils.makePopup(
+                topPadding: 0 // XXX
-                "Popups/InviteToRoomPopup.qml",
+                bottomPadding: 0
-                chat,
-                {
-                    userId: chat.userId,
-                    roomId: chat.roomId,
-                    roomName: chat.roomInfo.display_name,
-                    invitingAllowed: Qt.binding(() => inviteButton.enabled),
-                },
-            )
 
-            // onEnabledChanged: if (openedPopup && ! enabled)
+                onClicked: utils.makePopup(
+                    "Popups/InviteToRoomPopup.qml",
+                    chat,
+                    {
+                        userId: chat.userId,
+                        roomId: chat.roomId,
+                        roomName: chat.roomInfo.display_name,
+                        invitingAllowed:
+                            Qt.binding(() => inviteButton.enabled),
+                    },
+                )
 
-            Layout.fillHeight: true
+                // onEnabledChanged: if (openedPopup && ! enabled)
+
+                Layout.fillHeight: true
+            }
         }
     }
 }

src/gui/Pages/Chat/RoomPane/RoomPane.qml

@@ -9,8 +9,8 @@ MultiviewPane {
     saveName: "roomPane"
     edge: Qt.RightEdge
 
-    buttonsBackgroundColor: theme.chat.roomPaneButtons.background
+    buttonsBackgroundColor: theme.chat.roomPane.topBar.background
-    backgroundColor: theme.chat.roomPane.background
+    background: Rectangle { color: theme.chat.roomPane.background }
 
 
     buttonRepeater.model: [

src/gui/Pages/Chat/Timeline/EventContent.qml

@@ -154,7 +154,7 @@ HRowLayout {
                     (pureMedia ? 0 : parent.leftPadding + parent.rightPadding),
                 )
                 height: contentColumn.height
-                z: -1
+                z: -100
                 color: isOwn?
                        theme.chat.message.ownBackground :
                        theme.chat.message.background

src/themes/Glass.qpl

@@ -30,49 +30,47 @@ fontFamily:
     string mono:  "Hack"
 
 colors:
-    int hue:          240
+    int hue: 240
-    int saturation:   60
+
-    int bgSaturation: saturation / 1.5
+    real intensity:            1.0
-    real intensity:   1.0
+    real coloredTextIntensity: intensity * 75
-    real opacity:     0.7
+
-    real bgOpacity:   0.5
+    int saturation:            60
+    int bgSaturation:          saturation / 1.5
+    int coloredTextSaturation: saturation + 20
+
+    real opacity: 0.7
 
     color weakBackground:   hsluv(hue, bgSaturation, intensity * 9, opacity)
     color mediumBackground: hsluv(hue, bgSaturation, intensity * 6.8, opacity)
-    color strongBackground:
+    color strongBackground: hsluv(hue, bgSaturation * 2, 0, opacity)
-        hsluv(hue, bgSaturation * 2, intensity * 2, Math.max(0.6, opacity))
 
-    color accentBackground:
+    color accentBackground:    hsluv(hue, saturation, intensity * 42, 1)
-        hsluv(hue, saturation * 1.5, intensity * 42, 1)
+    color accentElement:       hsluv(hue, saturation * 1.5, intensity * 52, 1)
-
+    color strongAccentElement: hsluv(hue, saturation * 1.5, intensity * 72, 1)
-    color accentElement:
-        hsluv(hue, saturation * 1.5, intensity * 52, 1)
-
-    color strongAccentElement:
-        hsluv(hue, saturation * 1.5, intensity * 72, 1)
 
     color positiveBackground:
-        hsluv(155, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
+        hsluv(155, saturation * 1.5, intensity * 52, opacity)
 
     color middleBackground:
-        hsluv(60, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
+        hsluv(60, saturation * 1.5, intensity * 52, opacity)
 
     color negativeBackground:
-        hsluv(0, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
+        hsluv(0, saturation * 1.5, intensity * 52, opacity)
 
     color alertBackground: negativeBackground
 
-
     color brightText:  hsluv(0, 0, intensity * 100)
     color text:        hsluv(0, 0, intensity * 85)
     color halfDimText: hsluv(0, 0, intensity * 72)
     color dimText:     hsluv(0, 0, intensity * 60)
 
-    color warningText: hsluv(60, saturation * 1.5, 72)
+    color warningText: hsluv(60, coloredTextSaturation, coloredTextIntensity)
-    color errorText:   hsluv(0, saturation * 1.5, 72)
+    color errorText:   hsluv(0, coloredTextSaturation, coloredTextIntensity)
-    color accentText:  hsluv(hue, saturation * 1.5, 72)
+    color accentText:  hsluv(hue, coloredTextSaturation, coloredTextIntensity)
-    color link:        accentText
+
-    color code:        hsluv(hue + 5, saturation * 1.5, intensity * 60)
+    color link: hsluv(hue, coloredTextSaturation, coloredTextIntensity)
+    color code: hsluv(hue + 10, coloredTextSaturation, coloredTextIntensity)
 
     // Example of an animation, set running: true to enable
     NumberAnimation on hue
@@ -156,7 +154,9 @@ controls:
         color subtitle: colors.dimText
 
     listView:
-        color highlight:          colors.strongBackground
+        color highlight: hsluv(
+            colors.hue, colors.bgSaturation * 2, 0, colors.opacity / 2,
+        )
         color smallPaneHighlight: colors.accentBackground
 
     textField:
@@ -234,8 +234,8 @@ controls:
             real opacity:   1.0
 
     displayName:
-        int saturation: colors.saturation + 12
+        int saturation: colors.coloredTextSaturation
-        int lightness:  Math.min(72, colors.intensity * 72)
+        int lightness:  colors.coloredTextIntensity - 4
 
 
 // Specific interface parts
@@ -249,39 +249,40 @@ ui:
     point gradientStart: Qt.point(0, 0)
     point gradientEnd:   Qt.point(window.width, window.height)
 
-    color gradientStartColor: hsluv(0, 0, 0, colors.bgOpacity)
+    color gradientStartColor: hsluv(0, 0, 0, 0.5)
-    color gradientEndColor: hsluv(0, 0, 0, colors.bgOpacity)
+    color gradientEndColor: hsluv(0, 0, 0, 0.5)
-
 
 
 mainPane:
-    color background: colors.mediumBackground
+    color background: "transparent"
 
     topBar:
         color background:       colors.strongBackground
-        color placeholderLogo:  colors.strongAccentElement
+        color placeholderLogo:  icons.colorize
         color nameVersionLabel: colors.text
 
-    account:
+    listView:
-        real collapsedOpacity: 0.3
+        color background: colors.mediumBackground
-        color background:      "transparent"
-        color name:            colors.text
 
-    room:
+        account:
-        real leftRoomOpacity: 0.65
+            real collapsedOpacity: 0.3
+            color background:      "transparent"
+            color name:            colors.text
 
-        color background:     "transparent"
+        room:
-        color name:           colors.text
+            real leftRoomOpacity: 0.65
-        color lastEventDate:  colors.halfDimText
 
-        color subtitle:      colors.dimText
+            color background:     "transparent"
-        color subtitleQuote: hsluv(135, colors.saturation * 2.25, 65)
+            color name:           colors.text
+            color lastEventDate:  colors.halfDimText
 
-    settingsButton:
+            color subtitle:      colors.dimText
-        color background: colors.strongBackground
+            color subtitleQuote: chat.message.quote
-
+
-    filterRooms:
+    bottomBar:
         color background: colors.strongBackground
+        color settingsButtonBackground: "transparent"
+        color filterFieldBackground: "transparent"
 
 
 chat:
@@ -290,29 +291,35 @@ chat:
         color name:       colors.text
         color topic:      colors.dimText
 
-    roomPaneButtons:
-        color background: chat.roomHeader.background
-
     roomPane:
-        color background: colors.mediumBackground
+        color background: "transparent"
 
-        member:
+        topBar:
-            real invitedOpacity: 0.5
-
-            color background: "transparent"
-            color name:       colors.text
-            color subtitle:   colors.dimText
-
-            color adminIcon:     hsluv(60, colors.saturation * 2.25, 60)
-            color moderatorIcon: adminIcon
-            color invitedIcon:   hsluv(0, colors.saturation * 2.25, 60)
-
-        inviteButton:
             color background: colors.strongBackground
 
-        filterMembers:
+        listView:
+            color background: colors.mediumBackground
+
+            member:
+                real invitedOpacity: 0.5
+
+                color background: "transparent"
+                color name:       colors.text
+                color subtitle:   colors.dimText
+
+                color adminIcon:     hsluv(60, colors.saturation * 2.25, 60)
+                color moderatorIcon: adminIcon
+                color invitedIcon:   hsluv(0, colors.saturation * 2.25, 60)
+
+        bottomBar:
             color background: colors.strongBackground
 
+            inviteButton:
+                color background: "transparent"
+
+            filterMembers:
+                color background: "transparent"
+
     eventList:
         int ownEventsOnRightUnderWidth: 768 * theme.uiScale
         color background:               "transparent"
@@ -323,12 +330,7 @@ chat:
 
         int radius:          theme.radius
         color background:    colors.mediumBackground
-        color ownBackground: hsluv(
+        color ownBackground: colors.strongBackground
-            colors.hue,
-            colors.bgSaturation * 2,
-            colors.intensity * 5,
-            Math.max(0.6, opacity),
-        )
 
         color body: colors.text
         color date: colors.dimText
@@ -336,7 +338,9 @@ chat:
         color noticeBody:    colors.halfDimText
         int noticeLineWidth: 1
 
-        color quote: hsluv(135, colors.saturation * 1.5, colors.intensity * 80)
+        color quote: hsluv(
+            135, colors.coloredTextSaturation, colors.coloredTextIntensity,
+        )
         color link:  colors.link
         color code:  colors.code
 

src/themes/Midnight.qpl

@@ -30,49 +30,47 @@ fontFamily:
     string mono:  "Hack"
 
 colors:
-    int hue:          240
+    int hue: 240
-    int saturation:   60
+
-    int bgSaturation: saturation
+    real intensity:            1.0
-    real intensity:   1.0
+    real coloredTextIntensity: intensity * 75
-    real opacity:     1.0
+
-    real bgOpacity:   1.0
+    int saturation:            60
+    int bgSaturation:          saturation
+    int coloredTextSaturation: saturation + 20
+
+    real opacity: 1.0
 
     color weakBackground:   hsluv(hue, bgSaturation, intensity * 9, opacity)
     color mediumBackground: hsluv(hue, bgSaturation, intensity * 6.8, opacity)
-    color strongBackground:
+    color strongBackground: hsluv(hue, bgSaturation * 2,intensity * 2, opacity)
-        hsluv(hue, bgSaturation * 2, intensity * 2, Math.max(0.6, opacity))
 
-    color accentBackground:
+    color accentBackground:    hsluv(hue, saturation, intensity * 32, 1)
-        hsluv(hue, saturation * 1.5, intensity * 32, Math.max(0.9, opacity))
+    color accentElement:       hsluv(hue, saturation * 1.5, intensity * 52, 1)
-
+    color strongAccentElement: hsluv(hue, saturation * 1.5, intensity * 72, 1)
-    color accentElement:
-        hsluv(hue, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
-
-    color strongAccentElement:
-        hsluv(hue, saturation * 1.5, intensity * 72, Math.max(0.6, opacity))
 
     color positiveBackground:
-        hsluv(155, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
+        hsluv(155, saturation * 1.5, intensity * 52, opacity)
 
     color middleBackground:
-        hsluv(60, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
+        hsluv(60, saturation * 1.5, intensity * 52, opacity)
 
     color negativeBackground:
-        hsluv(0, saturation * 1.5, intensity * 52, Math.max(0.6, opacity))
+        hsluv(0, saturation * 1.5, intensity * 52, opacity)
 
     color alertBackground: negativeBackground
 
-
     color brightText:  hsluv(0, 0, intensity * 100)
     color text:        hsluv(0, 0, intensity * 85)
     color halfDimText: hsluv(0, 0, intensity * 72)
     color dimText:     hsluv(0, 0, intensity * 60)
 
-    color warningText: hsluv(60, saturation * 1.5, 72)
+    color warningText: hsluv(60, coloredTextSaturation, coloredTextIntensity)
-    color errorText:   hsluv(0, saturation * 1.5, 72)
+    color errorText:   hsluv(0, coloredTextSaturation, coloredTextIntensity)
-    color accentText:  hsluv(hue, saturation * 1.5, 72)
+    color accentText:  hsluv(hue, coloredTextSaturation, coloredTextIntensity)
-    color link:        accentText
+
-    color code:        hsluv(hue + 5, saturation * 1.5, intensity * 60)
+    color link: hsluv(hue, coloredTextSaturation, coloredTextIntensity)
+    color code: hsluv(hue + 10, coloredTextSaturation, coloredTextIntensity)
 
     // Example of an animation, set running: true to enable
     NumberAnimation on hue
@@ -152,11 +150,16 @@ controls:
         color boxHoveredBorder: colors.accentElement
         color boxPressedBorder: colors.strongAccentElement
 
-        color text: controls.button.text
+        color text:     controls.button.text
         color subtitle: colors.dimText
 
     listView:
-        color highlight:          colors.strongBackground
+        color highlight: hsluv(
+            colors.hue,
+            colors.bgSaturation * 2,
+            colors.intensity * 2,
+            colors.opacity / 2,
+        )
         color smallPaneHighlight: colors.accentBackground
 
     textField:
@@ -234,8 +237,8 @@ controls:
             real opacity:   1.0
 
     displayName:
-        int saturation: colors.saturation + 12
+        int saturation: colors.coloredTextSaturation
-        int lightness:  Math.min(72, colors.intensity * 72)
+        int lightness:  colors.coloredTextIntensity - 4
 
 
 // Specific interface parts
@@ -250,45 +253,46 @@ ui:
     point gradientEnd:   Qt.point(window.width, window.height)
 
     color gradientStartColor:
-        hsluv(colors.hue - 50, 100, colors.intensity * 8, colors.bgOpacity)
+        hsluv(colors.hue - 50, 100, colors.intensity * 8)
     color gradientEndColor:
-        hsluv(colors.hue + 20, 30, colors.intensity * 22, colors.bgOpacity)
+        hsluv(colors.hue + 20, 30, colors.intensity * 22)
 
     // To have a solid color instead,
     // set gradientStartColor and gradientEndColor to the same value, e.g.:
-    // color gradientStartColor: hsluv(0, 0, 0, colors.bgOpacity)
+    // color gradientStartColor: hsluv(0, 0, 0, 0.5)
-    // color gradientEndColor: hsluv(0, 0, 0, colors.bgOpacity)
+    // color gradientEndColor: hsluv(0, 0, 0, 0.5)
-
 
 
 mainPane:
-    color background: colors.mediumBackground
+    color background: "transparent"
 
     topBar:
         color background:       colors.strongBackground
-        color placeholderLogo:  colors.strongAccentElement
+        color placeholderLogo:  icons.colorize
         color nameVersionLabel: colors.text
 
-    account:
+    listView:
-        real collapsedOpacity: 0.3
+        color background: colors.mediumBackground
-        color background:      "transparent"
-        color name:            colors.text
 
-    room:
+        account:
-        real leftRoomOpacity: 0.65
+            real collapsedOpacity: 0.3
+            color background:      "transparent"
+            color name:            colors.text
 
-        color background:     "transparent"
+        room:
-        color name:           colors.text
+            real leftRoomOpacity: 0.65
-        color lastEventDate:  colors.halfDimText
 
-        color subtitle:      colors.dimText
+            color background:     "transparent"
-        color subtitleQuote: hsluv(135, colors.saturation * 2.25, 65)
+            color name:           colors.text
+            color lastEventDate:  colors.halfDimText
 
-    settingsButton:
+            color subtitle:      colors.dimText
-        color background: colors.strongBackground
+            color subtitleQuote: chat.message.quote
-
+
-    filterRooms:
+    bottomBar:
         color background: colors.strongBackground
+        color settingsButtonBackground: "transparent"
+        color filterFieldBackground: "transparent"
 
 
 chat:
@@ -297,29 +301,35 @@ chat:
         color name:       colors.text
         color topic:      colors.dimText
 
-    roomPaneButtons:
-        color background: chat.roomHeader.background
-
     roomPane:
-        color background: colors.mediumBackground
+        color background: "transparent"
 
-        member:
+        topBar:
-            real invitedOpacity: 0.5
-
-            color background: "transparent"
-            color name:       colors.text
-            color subtitle:   colors.dimText
-
-            color adminIcon:     hsluv(60, colors.saturation * 2.25, 60)
-            color moderatorIcon: adminIcon
-            color invitedIcon:   hsluv(0, colors.saturation * 2.25, 60)
-
-        inviteButton:
             color background: colors.strongBackground
 
-        filterMembers:
+        listView:
+            color background: colors.mediumBackground
+
+            member:
+                real invitedOpacity: 0.5
+
+                color background: "transparent"
+                color name:       colors.text
+                color subtitle:   colors.dimText
+
+                color adminIcon:     hsluv(60, colors.saturation * 2.25, 60)
+                color moderatorIcon: adminIcon
+                color invitedIcon:   hsluv(0, colors.saturation * 2.25, 60)
+
+        bottomBar:
             color background: colors.strongBackground
 
+            inviteButton:
+                color background: "transparent"
+
+            filterMembers:
+                color background: "transparent"
+
     eventList:
         int ownEventsOnRightUnderWidth: 768 * theme.uiScale
         color background:               "transparent"
@@ -330,12 +340,7 @@ chat:
 
         int radius:          theme.radius
         color background:    colors.mediumBackground
-        color ownBackground: hsluv(
+        color ownBackground: colors.strongBackground
-            colors.hue,
-            colors.bgSaturation * 2,
-            colors.intensity * 5,
-            Math.max(0.6, opacity),
-        )
 
         color body: colors.text
         color date: colors.dimText
@@ -343,7 +348,9 @@ chat:
         color noticeBody:    colors.halfDimText
         int noticeLineWidth: 1
 
-        color quote: hsluv(135, colors.saturation * 1.5, colors.intensity * 80)
+        color quote: hsluv(
+            135, colors.coloredTextSaturation, colors.coloredTextIntensity,
+        )
         color link:  colors.link
         color code:  colors.code