UI gradient background, adjust some colors

TODO.md

@@ -1,10 +1,6 @@
 - Refactoring
   - Banners
 
-  - Theming
-    - File format
-    - Have a default background
-
   - Composer
   - Room Sidepane
     - Hide when window too small
@@ -84,6 +80,7 @@
   - Spinner when loading past room events or images 
 
   - Theming
+    - File format
     - Distribute fonts
     - icons.preferredPack: accept multiple values
     - Find icon packs in user data dir

src/qml/UI.qml

@@ -7,7 +7,8 @@ import "SidePane"
 
 Rectangle {
     id: mainUI
-    color: theme.ui.background
+    color: "transparent"
+
     Component.onCompleted: window.mainUI = mainUI
 
     property alias shortcuts: shortcuts
@@ -43,6 +44,20 @@ Rectangle {
         asynchronous: false
     }
 
+    Rectangle {
+        id: mainUIGradient
+        anchors.fill: parent
+        scale: Math.max(
+            1.6, Math.ceil(parent.parent.width / parent.parent.height)
+        )
+        rotation: theme.ui.gradientRotation
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: theme.ui.gradientLeft }
+            GradientStop { position: 1.0; color: theme.ui.gradientRight }
+        }
+    }
+
+
     HSplitView {
         id: uiSplitView
         anchors.fill: parent

src/themes/Default.qpl

@@ -37,7 +37,7 @@ fontFamily:
     string mono:  "Hack"
 
 colors:
-    int hue:        260
+    int hue:        264
     int saturation: 40
     real intensity: 1.0
     real opacity:   1.0
@@ -192,9 +192,21 @@ controls:
 // Special UI parts
 
 ui:
-    // Supported: local file path or web URL
+    // Image can be an URL or local file path.
+    // If not specified, the gradient will be shown instead.
     url image: ""
-    color background: colors.weakBackground
+
+    int gradientRotation: 45 * 3
+    color gradientRight:
+        Utils.hsluv(colors.hue - 50, 100, colors.intensity * 8, colors.opacity)
+    color gradientLeft:
+        Utils.hsluv(colors.hue + 20, 31, colors.intensity * 22, colors.opacity)
+
+    // To have a solid color instead,
+    // set gradientLeft and gradientRight to the same value.
+    // color gradientLeft: colors.weakBackground
+    // color gradientRight: colors.weakBackground
+
 
 
 sidePane:
@@ -257,13 +269,13 @@ chat:
         int radius:          theme.radius
         color background:    colors.strongBackground
         color ownBackground: hsluv(
-            colors.hue, colors.saturation + 30, colors.intensity * 6, opacity
+            colors.hue, colors.saturation + 25, colors.intensity * 6, opacity
         )
 
-        color body:          colors.text
+        color body: colors.text
-        color date:          colors.dimText
+        color date: colors.dimText
 
-        color greenText: hsluv(135, colors.saturation * 2.25, 80)
+        color greenText: hsluv(135, colors.saturation * 2.25, 75)
         color link:      colors.link
         color code:      colors.code