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,16 +22,22 @@ HDrawer {
     HColumnLayout {
         anchors.fill: parent
 
-        HFlow {
+        Rectangle {
-            id: buttonFlow
+            color: buttonsBackgroundColor
-            populate: null
 
             Layout.fillWidth: true
+            Layout.preferredHeight: childrenRect.height
+
+            HFlow {
+                id: buttonFlow
+                width: parent.width
+                populate: null
 
                 HRepeater {
                     id: buttonRepeater
                 }
             }
+        }
 
         HSwipeView {
             id: swipeView

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,20 +4,26 @@ 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
 
+
+    HRowLayout {
+        anchors.fill: parent
+
         HButton {
             id: addAccountButton
             icon.name: "add-account"
             toolTip.text: qsTr("Add another account")
-        backgroundColor: theme.mainPane.settingsButton.background
+            backgroundColor: theme.mainPane.bottomBar.settingsButtonBackground
             onClicked: pageLoader.showPage("AddAccount/AddAccount")
 
             Layout.fillHeight: true
@@ -28,7 +34,7 @@ HRowLayout {
             saveName: "roomFilterField"
 
             placeholderText: qsTr("Filter rooms")
-        backgroundColor: theme.mainPane.filterRooms.background
+            backgroundColor: theme.mainPane.bottomBar.filterFieldBackground
             bordered: false
             opacity: width >= 16 * theme.uiScale ? 1 : 0
 
@@ -61,3 +67,4 @@ HRowLayout {
             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,19 +27,32 @@ 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
 
+        HRowLayout {
+            anchors.fill: parent
+
             HTextField {
                 id: filterField
                 saveName: "memberFilterField"
                 saveId: chat.roomId
 
                 placeholderText: qsTr("Filter members")
-            backgroundColor: theme.chat.roomPane.filterMembers.background
+                backgroundColor:
+                    theme.chat.roomPane.bottomBar.filterMembers.background
                 bordered: false
                 opacity: width >= 16 * theme.uiScale ? 1 : 0
 
@@ -52,7 +65,8 @@ HColumnLayout {
             HButton {
                 id: inviteButton
                 icon.name: "room-send-invite"
-            backgroundColor: theme.chat.roomPane.inviteButton.background
+                backgroundColor:
+                    theme.chat.roomPane.bottomBar.inviteButton.background
                 enabled: chat.roomInfo.can_invite
 
                 toolTip.text:
@@ -70,7 +84,8 @@ HColumnLayout {
                         userId: chat.userId,
                         roomId: chat.roomId,
                         roomName: chat.roomInfo.display_name,
-                    invitingAllowed: Qt.binding(() => inviteButton.enabled),
+                        invitingAllowed:
+                            Qt.binding(() => inviteButton.enabled),
                     },
                 )
 
@@ -80,3 +95,4 @@ HColumnLayout {
             }
         }
     }
+}

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

@@ -31,48 +31,46 @@ fontFamily:
 
 colors:
     int hue: 240
+
+    real intensity:            1.0
+    real coloredTextIntensity: intensity * 75
+
     int saturation:            60
     int bgSaturation:          saturation / 1.5
-    real intensity:   1.0
+    int coloredTextSaturation: saturation + 20
+
     real opacity: 0.7
-    real bgOpacity:   0.5
 
     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,19 +249,21 @@ 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
 
+    listView:
+        color background: colors.mediumBackground
+
         account:
             real collapsedOpacity: 0.3
             color background:      "transparent"
@@ -275,13 +277,12 @@ mainPane:
             color lastEventDate:  colors.halfDimText
 
             color subtitle:      colors.dimText
-        color subtitleQuote: hsluv(135, colors.saturation * 2.25, 65)
+            color subtitleQuote: chat.message.quote
 
-    settingsButton:
+    bottomBar:
-        color background: colors.strongBackground
-
-    filterRooms:
         color background: colors.strongBackground
+        color settingsButtonBackground: "transparent"
+        color filterFieldBackground: "transparent"
 
 
 chat:
@@ -290,10 +291,13 @@ chat:
         color name:       colors.text
         color topic:      colors.dimText
 
-    roomPaneButtons:
-        color background: chat.roomHeader.background
-
     roomPane:
+        color background: "transparent"
+
+        topBar:
+            color background: colors.strongBackground
+
+        listView:
             color background: colors.mediumBackground
 
             member:
@@ -307,11 +311,14 @@ chat:
                 color moderatorIcon: adminIcon
                 color invitedIcon:   hsluv(0, colors.saturation * 2.25, 60)
 
-        inviteButton:
+        bottomBar:
             color background: colors.strongBackground
 
+            inviteButton:
+                color background: "transparent"
+
             filterMembers:
-            color background: colors.strongBackground
+                color background: "transparent"
 
     eventList:
         int ownEventsOnRightUnderWidth: 768 * theme.uiScale
@@ -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

@@ -31,48 +31,46 @@ fontFamily:
 
 colors:
     int hue: 240
+
+    real intensity:            1.0
+    real coloredTextIntensity: intensity * 75
+
     int saturation:            60
     int bgSaturation:          saturation
-    real intensity:   1.0
+    int coloredTextSaturation: saturation + 20
+
     real opacity: 1.0
-    real bgOpacity:   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
@@ -156,7 +154,12 @@ controls:
         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,25 +253,27 @@ 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
 
+    listView:
+        color background: colors.mediumBackground
+
         account:
             real collapsedOpacity: 0.3
             color background:      "transparent"
@@ -282,13 +287,12 @@ mainPane:
             color lastEventDate:  colors.halfDimText
 
             color subtitle:      colors.dimText
-        color subtitleQuote: hsluv(135, colors.saturation * 2.25, 65)
+            color subtitleQuote: chat.message.quote
 
-    settingsButton:
+    bottomBar:
-        color background: colors.strongBackground
-
-    filterRooms:
         color background: colors.strongBackground
+        color settingsButtonBackground: "transparent"
+        color filterFieldBackground: "transparent"
 
 
 chat:
@@ -297,10 +301,13 @@ chat:
         color name:       colors.text
         color topic:      colors.dimText
 
-    roomPaneButtons:
-        color background: chat.roomHeader.background
-
     roomPane:
+        color background: "transparent"
+
+        topBar:
+            color background: colors.strongBackground
+
+        listView:
             color background: colors.mediumBackground
 
             member:
@@ -314,11 +321,14 @@ chat:
                 color moderatorIcon: adminIcon
                 color invitedIcon:   hsluv(0, colors.saturation * 2.25, 60)
 
-        inviteButton:
+        bottomBar:
             color background: colors.strongBackground
 
+            inviteButton:
+                color background: "transparent"
+
             filterMembers:
-            color background: colors.strongBackground
+                color background: "transparent"
 
     eventList:
         int ownEventsOnRightUnderWidth: 768 * theme.uiScale
@@ -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