Initial themes implementation, new default theme

README.md

@@ -26,7 +26,7 @@ After this, verify the permissions of the installed plugin files.
 Dependencies on Pypi:
 
     pip3 install --user --upgrade \
-        Pillow aiofiles dataclasses filetype lxml mistune uvloop
+        Pillow aiofiles dataclasses filetype hsluv lxml mistune uvloop
 
 Dependencies on Github (most recent version needed):
 

TODO.md

@@ -2,6 +2,7 @@
   - `QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling)`
 
 - Refactoring
+  - Use [Animators](https://doc.qt.io/qt-5/qml-qtquick-animator.html)
   - Sendbox
   - Use .mjs modules
   - SignIn/RememberAccount screens
@@ -15,6 +16,7 @@
   - When qml syntax highlighting supports string interpolation, use them
 
 - Fixes
+  - EditProfile avatar spacing in row mode
   - Message position after daybreak delegate
   - Keyboard flicking against top/bottom edge
   - Don't strip user spacing in html
@@ -25,6 +27,9 @@
   - [hr not working](https://bugreports.qt.io/browse/QTBUG-74342)
 
 - UI
+  - Messages editing
+  - Code highlighting
+  - Support GIF avatars
   - When reduced, show the full-window sidepane instead of Default page
   - Adapt shortcuts flicking speed to font size and DPI
   - Show error box if uploading avatar fails
@@ -57,22 +62,27 @@
   - Invite to room
   - Server selection
   - Register/Forgot? for SignIn dialog
-  - Scaling
-    - See [Text.fontSizeMode](https://doc.qt.io/qt-5/qml-qtquick-text.html#fontSizeMode-prop)
   - Add room
   - Leave room
   - Forget room warning popup
   - Prevent using the SendBox if no permission (power levels)
   - Spinner when loading past room events, images or clicking buttons
-  - Parse themes from JSON
+  - Theming
-      - Distribute fonts
+    - Thin white icons
+    - Copy the default theme to user data dir
+    - Distribute fonts
+    - preferredIconPack: accept multiple values
+    - Find icon packs in user data dir
+    - Correctly implement uiScale/fontScale + ctrl+-= keys
+      - See [Text.fontSizeMode](https://doc.qt.io/qt-5/qml-qtquick-text.html#fontSizeMode-prop)
+    - Selecting background image
+    - Way to round avatar corners to allow box radius
+    - If avatar is set, name color from average color?
+    - Accent color from background
   - Settings page
   - Message/text selection
 
   - Custom file picker for Linux...
-  - Way to round avatar corners to allow box radius
-  - If avatar is set, name color from average color?
-  - Accent color from background
 
 - Major features
   - E2E

src/icons/light-thin/add-account.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   fill-rule="evenodd"
+   clip-rule="evenodd"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="add-account.svg"
+   inkscape:version="">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="19.666667"
+     inkscape:cx="-6.8135592"
+     inkscape:cy="13.830509"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M 11.584746,11.584746 V 2.4491525 h 0.830508 v 9.1355935 h 9.135593 v 0.830508 h -9.135593 v 9.135593 H 11.584746 V 12.415254 H 2.4491525 v -0.830508 z"
+     id="path2"
+     inkscape:connector-curvature="0"
+     style="fill:none;fill-opacity:1;stroke:#c8c8c8;stroke-width:1.431;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" />
+</svg>

src/icons/light-thin/apply.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="invite_accept.svg"
+   inkscape:version="">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="9.8333333"
+     inkscape:cx="-28.271186"
+     inkscape:cy="12"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M9 21.035l-9-8.638 2.791-2.87 6.156 5.874 12.21-12.436 2.843 2.817z"
+     id="path2"
+     style="fill:#0d8967;fill-opacity:1" />
+</svg>

src/icons/light-thin/cancel.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg14"
+   sodipodi:docname="invite_decline.svg"
+   inkscape:version="">
+  <metadata
+     id="metadata20">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs18" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview16"
+     showgrid="false"
+     inkscape:zoom="9.8333333"
+     inkscape:cx="6.9152542"
+     inkscape:cy="17.084746"
+     inkscape:current-layer="svg14" />
+  <path
+     d="M23 20.168l-8.185-8.187 8.185-8.174-2.832-2.807-8.182 8.179-8.176-8.179-2.81 2.81 8.186 8.196-8.186 8.184 2.81 2.81 8.203-8.192 8.18 8.192z"
+     id="path12"
+     style="fill:#ab0938;fill-opacity:1" />
+</svg>

src/icons/light-thin/email.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 0 2.25)" fill="#c8c8c8" d="M12 9.713L0.015 0L23.986 0ZM6.575 7.891L0 2.562L0 15.063ZM17.425 7.891L24 15.063L24 2.562ZM15.868 9.152L12 12.287L8.132 9.152L0.022 18L23.978 18Z"/>
+</svg>

src/icons/light-thin/expand.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 3.75 0)" fill="#c8c8c8" d="M0 3L3.057 0L15 12L3.057 24L0 21L9 12Z"/>
+</svg>

src/icons/light-thin/forget-room.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="forget_room.svg"
+   inkscape:version="">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="9.8333333"
+     inkscape:cx="0.81355932"
+     inkscape:cy="12.610169"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M3 6v18h18v-18h-18zm5 14c0 .552-.448 1-1 1s-1-.448-1-1v-10c0-.552.448-1 1-1s1 .448 1 1v10zm5 0c0 .552-.448 1-1 1s-1-.448-1-1v-10c0-.552.448-1 1-1s1 .448 1 1v10zm5 0c0 .552-.448 1-1 1s-1-.448-1-1v-10c0-.552.448-1 1-1s1 .448 1 1v10zm4-18v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.315c0 .901.73 2 1.631 2h5.712z"
+     id="path2"
+     style="fill:#ab0937;fill-opacity:1" />
+</svg>

src/icons/light-thin/hourglass.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg12"
+   xml:space="preserve"
+   enable-background="new 0 0 1000 1000"
+   viewBox="0 0 1000 1000"
+   y="0px"
+   x="0px"
+   version="1.1"><defs
+   id="defs16" />
+<metadata
+   id="metadata2"> Svg Vector Icons : http://www.onlinewebfonts.com/icon <rdf:RDF><cc:Work
+     rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+       rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata>
+<g
+   style="fill:#c8c8c8;fill-opacity:1"
+   id="g10"><path
+     style="fill:#c8c8c8;fill-opacity:1"
+     id="path4"
+     d="M926,68v-8.3c0-27.4-22.4-49.8-49.8-49.8H123.7C96.4,10,74,32.4,74,59.8V68c0,27.4,22.4,49.8,49.8,49.8H143c9.9,0,9.1,9.2,9.1,13.9c0,55.3,22.7,119.2,40,160c34.8,81.9,114.1,149,179.2,196.4c11.9,8.7,9,16.7,2.1,22.2c-63.1,50.6-146.1,115.2-181.3,198c-17.1,40.2-39.3,102.7-40,157.4c-0.1,5.6,2.2,16.5-11.2,16.5h-17.1C96.4,882.2,74,904.6,74,932v8.3c0,27.4,22.4,49.8,49.8,49.8h752.5c27.4,0,49.8-22.4,49.8-49.8V932c0-27.4-22.4-49.8-49.8-49.8h-10.8c-19.8,0-17.8-14.8-17.6-22.5c1.4-51.1-13.6-109.1-35.6-152.7c-48.9-97-125.9-158.7-173.4-194.4c-10.3-7.7-11.3-17.3,0-25.1C687.8,453.8,763.4,390,812.3,293c23.4-46.5,38.9-109.3,35.1-162.6c-0.3-4.3-0.6-12.6,10.6-12.6h18.3C903.6,117.8,926,95.4,926,68z M772.6,273c-45.5,90.3-118.4,154.8-181.9,193.8c-3.8,2.3-11.1,8.1-11.1,24.3v19.3c0,17.1,7.8,20.9,11.8,23.4c63.4,39,135.8,103.4,181.1,193.3c20.9,41.6,31.8,91.8,30.7,131.8c-0.2,8.3,3,23.4-18.7,23.4H214.9c-19,0-18.3-9.5-18.2-14.7c0.3-36.4,12.9-86.8,36.3-141.8c40.6-95.5,125.9-155.1,182.7-190.7c2.5-1.6,7.4-4.4,7.4-19.5v-28.9c0-15.6-7.5-21.7-11.4-24.2c-56.7-35.8-139-94.9-178.7-188.1c-23.7-55.6-36.2-106.5-36.3-142.9c0-4.8,0.6-13.6,11.2-13.6h582.9c11.8,0,11.6,8.9,12,13.6C806.1,172.7,795.2,228,772.6,273z" /><path
+     style="fill:#c8c8c8;fill-opacity:1"
+     id="path6"
+     d="M488.4,563.6l-194,242.7c-6.4,8-3.3,14.6,7,14.6h397.2c10.3,0,13.4-6.6,7-14.6l-194-242.7C505.2,555.6,494.8,555.6,488.4,563.6z" /><path
+     style="fill:#c8c8c8;fill-opacity:1"
+     id="path8"
+     d="M486.8,450.8c7.3,7.2,19.2,7.2,26.4,0l97.6-97.3c7.3-7.2,4.8-13.2-5.5-13.2H394.7c-10.3,0-12.7,5.9-5.5,13.2L486.8,450.8z" /></g>
+</svg>

src/icons/light-thin/invite-accept.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="invite_accept.svg"
+   inkscape:version="">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="9.8333333"
+     inkscape:cx="-28.271186"
+     inkscape:cy="12"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M9 21.035l-9-8.638 2.791-2.87 6.156 5.874 12.21-12.436 2.843 2.817z"
+     id="path2"
+     style="fill:#0d8967;fill-opacity:1" />
+</svg>

src/icons/light-thin/invite-decline.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg14"
+   sodipodi:docname="invite_decline.svg"
+   inkscape:version="">
+  <metadata
+     id="metadata20">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs18" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview16"
+     showgrid="false"
+     inkscape:zoom="9.8333333"
+     inkscape:cx="6.9152542"
+     inkscape:cy="17.084746"
+     inkscape:current-layer="svg14" />
+  <path
+     d="M23 20.168l-8.185-8.187 8.185-8.174-2.832-2.807-8.182 8.179-8.176-8.179-2.81 2.81 8.186 8.196-8.186 8.184 2.81 2.81 8.203-8.192 8.18 8.192z"
+     id="path12"
+     style="fill:#ab0938;fill-opacity:1" />
+</svg>

src/icons/light-thin/join.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 0 1.5)" fill="#c8c8c8" d="M16 7L16 3L24 10L16 17L16 13L8 13L8 7ZM14 17L14 16.917C12.822 17.602 11.458 18 10 18C5.589 18 2 14.411 2 10C2 5.589 5.589 2 10 2C11.458 2 12.822 2.398 14 3.083L14 0.838C12.774 0.302 11.423 0 10 0C4.478 0 0 4.477 0 10C0 15.523 4.478 20 10 20C11.423 20 12.774 19.698 14 19.162Z"/>
+</svg>

src/icons/light-thin/phone.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 2.2503787371366 0)" fill="#c8c8c8" d="M15.4795 22.926L14.2865 23.584C7.3075 27.205 -4.7955 6.09 2.0075 2.1L3.1525 1.463L6.8665 7.93L5.7275 8.562C3.6605 9.807 8.4875 18.269 10.6065 17.107L11.7685 16.465ZM5.6715 0L3.9915 0.975L7.7055 7.441L9.3865 6.466ZM14.2845 14.997L12.6045 15.972L16.3185 22.439L17.9995 21.464Z"/>
+</svg>

src/icons/light-thin/placeholder.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 0 0)" fill="#c8c8c8" d="M12 2C17.514 2 22 6.486 22 12C22 17.514 17.514 22 12 22C6.486 22 2 17.514 2 12C2 6.486 6.486 2 12 2ZM12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0Z"/>
+</svg>

src/icons/light-thin/reduced-menu.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 0 1.5)" fill="#c8c8c8" d="M24 4L0 4L0 0L24 0ZM24 8L0 8L0 12L24 12ZM24 16L0 16L0 20L24 20Z"/>
+</svg>

src/icons/light-thin/reduced-room-buttons.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 0 6.75)" fill="#c8c8c8" d="M6 3C6 4.657 4.657 6 3 6C1.343 6 0 4.657 0 3C0 1.343 1.343 0 3 0C4.657 0 6 1.343 6 3ZM15 3C15 4.657 13.657 6 12 6C10.343 6 9 4.657 9 3C9 1.343 10.343 0 12 0C13.657 0 15 1.343 15 3ZM24 3C24 4.657 22.657 6 21 6C19.343 6 18 4.657 18 3C18 1.343 19.343 0 21 0C22.657 0 24 1.343 24 3Z"/>
+</svg>

src/icons/light-thin/room-view-files.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 1.5 0)" fill="#c8c8c8" d="M20 13L20 0L0 0L0 24L8.409 24C13.266 24 11.744 16 11.744 16C14.753 16.745 20 16.419 20 13ZM16 6L4 6L4 5L16 5ZM16 9L4 9L4 8L16 8ZM16 12L4 12L4 11L16 11ZM13.909 18.223C15.956 18.701 18.714 17.944 20 17.044C18.506 19.042 14.77 22.752 12.568 23.925C13.724 22.757 14.131 19.691 13.909 18.223Z"/>
+</svg>

src/icons/light-thin/room-view-history.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 0 0)" fill="#c8c8c8" d="M24 12C24 18.627 18.627 24 12 24C5.373 24 0 18.627 0 12L2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2C9.223 2 6.713 3.141 4.901 4.977L6.962 7.038L0 8.392L1.305 1.379L3.484 3.559C5.656 1.363 8.666 -4.44089e-16 12 -4.44089e-16C18.627 -4.44089e-16 24 5.373 24 12ZM11 6L11 14L18 14L18 12L13 12L13 6Z"/>
+</svg>

src/icons/light-thin/room-view-members.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 -0.000364513370152353 0)" fill="#c8c8c8" d="M20.8225 18.096C17.3835 17.302 14.1825 16.606 15.7325 13.678C20.4525 4.766 16.9835 0 12.0005 0C6.91849 0 3.53649 4.949 8.26849 13.678C9.86549 16.623 6.54349 17.319 3.17849 18.096C0.105486 18.806 -0.00951398 20.332 0.000486018 23L0.00448602 24L23.9945 24L23.9985 23.031C24.0105 20.343 23.9065 18.809 20.8225 18.096Z"/>
+</svg>

src/icons/light-thin/room-view-notifications.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 1.5 0)" fill="#c8c8c8" d="M13.137 3.945C12.493 3.571 12.095 2.875 12.096 2.125L12.096 2.122C12.097 0.95 11.158 0 10 0C8.842 0 7.903 0.95 7.903 2.122L7.903 2.125C7.904 2.876 7.507 3.571 6.862 3.945C2.195 6.657 4.877 15.66 0 17.251L0 19L20 19L20 17.251C15.123 15.66 17.805 6.657 13.137 3.945ZM10 1C10.552 1 11 1.449 11 2C11 2.552 10.552 3 10 3C9.448 3 9 2.552 9 2C9 1.449 9.448 1 10 1ZM13 21C13 22.598 11.608 24 10.029 24C8.45 24 7 22.598 7 21Z"/>
+</svg>

src/icons/light-thin/room-view-settings.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 0 0.75)" fill="#c8c8c8" d="M6 17L4 17L4 22L2 22L2 17L0 17L0 14L6 14ZM4 0L2 0L2 12L4 12ZM15 7L9 7L9 10L11 10L11 22L13 22L13 10L15 10ZM13 0L11 0L11 5L13 5ZM24 14L18 14L18 17L20 17L20 22L22 22L22 17L24 17ZM22 0L20 0L20 12L22 12Z"/>
+</svg>

src/icons/light-thin/search.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 0 0)" fill="#c8c8c8" d="M23.822 20.88L17.469 14.526C18.399 13.061 18.936 11.326 18.936 9.467C18.937 4.248 14.689 -1.77636e-15 9.468 -1.77636e-15C4.247 -1.77636e-15 0 4.248 0 9.468C0 14.689 4.247 18.937 9.468 18.937C11.236 18.937 12.889 18.45 14.307 17.604L20.703 24ZM3.528 9.468C3.528 6.195 6.193 3.53 9.467 3.53C12.742 3.53 15.407 6.194 15.407 9.468C15.407 12.743 12.742 15.407 9.467 15.407C6.193 15.407 3.528 12.743 3.528 9.468Z"/>
+</svg>

src/icons/light-thin/set-status.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 0 0)" fill="#c8c8c8" d="M9.963 8.261C9.397 7.676 9.427 6.758 10.01 6.191L15.958 0.423C16.249 0.142 16.622 -8.88178e-16 16.993 -8.88178e-16C17.369 -8.88178e-16 17.743 0.146 18.028 0.44ZM0.185 22.957C0.062 23.075 4.71845e-16 23.234 4.71845e-16 23.393C4.71845e-16 23.726 0.271 24 0.607 24C0.759 24 0.912 23.943 1.03 23.829L2.029 22.857L1.184 21.985ZM8.625 11.723L5.206 15.037C3.369 16.818 2.432 18.544 1.566 20.953L3.075 22.512C5.509 21.722 7.262 20.839 9.099 19.057L12.517 15.742ZM18.595 1.511L9.789 10.051L14.225 14.63L23.031 6.092C23.676 5.466 24 4.634 24 3.801C24 1.017 20.627 -0.46 18.595 1.511Z"/>
+</svg>

src/icons/light-thin/settings.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 0 0)" fill="#c8c8c8" d="M24 13.616L24 10.384C22.349 9.797 21.306 9.632 20.781 8.365L20.781 8.364C20.254 7.093 20.881 6.23 21.628 4.657L19.343 2.372C17.782 3.114 16.91 3.747 15.636 3.219L15.635 3.219C14.366 2.693 14.2 1.643 13.616 8.88178e-16L10.384 8.88178e-16C9.802 1.635 9.635 2.692 8.365 3.219L8.364 3.219C7.093 3.747 6.232 3.121 4.657 2.372L2.372 4.657C3.117 6.225 3.747 7.091 3.219 8.364C2.692 9.635 1.635 9.802 8.88178e-16 10.384L8.88178e-16 13.616C1.632 14.196 2.692 14.365 3.219 15.635C3.749 16.917 3.105 17.801 2.372 19.342L4.657 21.628C6.219 20.885 7.091 20.253 8.364 20.781L8.365 20.781C9.635 21.307 9.801 22.36 10.384 24L13.616 24C14.198 22.364 14.366 21.31 15.643 20.778L15.644 20.778C16.906 20.254 17.764 20.879 19.342 21.629L21.627 19.343C20.883 17.78 20.252 16.91 20.779 15.637C21.306 14.366 22.367 14.197 24 13.616ZM12 16C9.791 16 8 14.209 8 12C8 9.791 9.791 8 12 8C14.209 8 16 9.791 16 12C16 14.209 14.209 16 12 16Z"/>
+</svg>

src/icons/light-thin/status.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<circle id="shape0" transform="matrix(0.75 0 0 0.75 0 0)" r="12" cx="12" cy="12" fill="#c8c8c8"/>
+</svg>

src/icons/light-thin/typing.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 0 0)" fill="#c8c8c8" d="M9.963 8.261C9.397 7.676 9.427 6.758 10.01 6.191L15.958 0.423C16.249 0.142 16.622 -8.88178e-16 16.993 -8.88178e-16C17.369 -8.88178e-16 17.743 0.146 18.028 0.44ZM0.185 22.957C0.062 23.075 4.71845e-16 23.234 4.71845e-16 23.393C4.71845e-16 23.726 0.271 24 0.607 24C0.759 24 0.912 23.943 1.03 23.829L2.029 22.857L1.184 21.985ZM8.625 11.723L5.206 15.037C3.369 16.818 2.432 18.544 1.566 20.953L3.075 22.512C5.509 21.722 7.262 20.839 9.099 19.057L12.517 15.742ZM18.595 1.511L9.789 10.051L14.225 14.63L23.031 6.092C23.676 5.466 24 4.634 24 3.801C24 1.017 20.627 -0.46 18.595 1.511Z"/>
+</svg>

src/icons/light-thin/unknown-devices-inspect.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="unknown_devices_inspect.svg"
+   inkscape:version="">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="1.8756036"
+     inkscape:cx="-105.68924"
+     inkscape:cy="18.344365"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z"
+     id="path2"
+     style="fill:#9a8308;fill-opacity:1" />
+</svg>

src/icons/light-thin/unknown-devices-warning.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 2.25 0)" fill="#c8c8c8" d="M15 10L15 6C15 2.687 12.313 0 9 0C5.687 0 3 2.687 3 6L3 10L0 10L0 24L18 24L18 10ZM10 17.723L10 20L8 20L8 17.723C7.405 17.376 7 16.739 7 16C7 14.896 7.896 14 9 14C10.104 14 11 14.896 11 16C11 16.738 10.596 17.376 10 17.723ZM5 10L5 6C5 3.794 6.794 2 9 2C11.205 2 13 3.794 13 6L13 10Z"/>
+</svg>

src/icons/light-thin/upload-avatar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#e6e6e6" d="M16 16h-3v5h-2v-5h-3l4-4 4 4zm3.479-5.908c-.212-3.951-3.473-7.092-7.479-7.092s-7.267 3.141-7.479 7.092c-2.57.463-4.521 2.706-4.521 5.408 0 3.037 2.463 5.5 5.5 5.5h3.5v-2h-3.5c-1.93 0-3.5-1.57-3.5-3.5 0-2.797 2.479-3.833 4.433-3.72-.167-4.218 2.208-6.78 5.567-6.78 3.453 0 5.891 2.797 5.567 6.78 1.745-.046 4.433.751 4.433 3.72 0 1.93-1.57 3.5-3.5 3.5h-3.5v2h3.5c3.037 0 5.5-2.463 5.5-5.5 0-2.702-1.951-4.945-4.521-5.408z"/></svg>

src/icons/light-thin/username.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Krita: http://krita.org -->
+<svg xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:krita="http://krita.org/namespaces/svg/krita"
+    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+    width="18pt"
+    height="18pt"
+    viewBox="0 0 18 18">
+<defs/>
+<path id="shape0" transform="matrix(0.75 0 0 0.75 -0.000364513370152353 0)" fill="#c8c8c8" d="M20.8225 18.096C17.3835 17.302 14.1825 16.606 15.7325 13.678C20.4525 4.766 16.9835 0 12.0005 0C6.91849 0 3.53649 4.949 8.26849 13.678C9.86549 16.623 6.54349 17.319 3.17849 18.096C0.105486 18.806 -0.00951398 20.332 0.000486018 23L0.00448602 24L23.9945 24L23.9985 23.031C24.0105 20.343 23.9065 18.809 20.8225 18.096Z"/>
+</svg>

src/icons/none.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>

src/python/backend.py

@@ -3,7 +3,9 @@
 
 import asyncio
 import random
-from typing import Dict, Optional, Set, Tuple
+from typing import Dict, List, Optional, Set, Tuple
+
+import hsluv
 
 from .app import App
 from .events import users
@@ -127,3 +129,9 @@ class Backend:
     @staticmethod
     def inlinify(html: str) -> str:
         return HTML_FILTER.filter_inline(html)
+
+
+    @staticmethod
+    def hsluv(hue: int, saturation: int, lightness: int) -> List[float]:
+        # (0-360, 0-100, 0-100) -> [0-1, 0-1, 0-1]
+        return hsluv.hsluv_to_rgb([hue, saturation, lightness])

src/python/theme_parser.py

@@ -9,14 +9,14 @@ PROPERTY_TYPES = {"bool", "double", "int", "list", "real", "string", "url",
 
 
 def _add_property(line: str) -> str:
-    if re.match(r"^\s*[a-zA-Z0-9_]+\s*:$", line):
+    if re.match(r"^\s*[a-zA-Z\d_]+\s*:$", line):
         return re.sub(r"^(\s*)(\S*\s*):$",
                       r"\1readonly property QtObject \2: QtObject",
                       line)
 
     types = "|".join(PROPERTY_TYPES)
     if re.match(fr"^\s*({types}) [a-zA-Z\d_]+\s*:", line):
-        return re.sub(r"^(\s*)(\S*)", r"\1readonly property \2", line)
+        return re.sub(r"^(\s*)(\S*)", r"\1property \2", line)
 
     return line
 
@@ -60,8 +60,12 @@ def _process_lines(content: str) -> Generator[str, None, None]:
 def convert_to_qml(theme_content: str) -> str:
     lines  = [
         "import QtQuick 2.12",
-        'import "utils.js" as Ut',
+        'import "Base"',
+        'import "utils.js" as Utils',
         "QtObject {",
+        "    function hsluv(h, s, l, a) { return Utils.hsluv(h, s, l, a) }",
+        "    function hsl(h, s, l)      { return Utils.hsl(h, s, l) }",
+        "    function hsla(h, s, l, a)  { return Utils.hsla(h, s, l, a) }",
         "    id: theme",
     ]
     lines += [f"    {line}" for line in _process_lines(theme_content)]

src/qml/Base/HAvatar.qml

@@ -8,8 +8,8 @@ import "../utils.js" as Utils
 
 HRectangle {
     id: avatar
-    implicitWidth: theme.avatar.size
+    implicitWidth: theme.controls.avatar.size
-    implicitHeight: theme.avatar.size
+    implicitHeight: theme.controls.avatar.size
 
     property string name: ""
     property var imageUrl: ""
@@ -20,18 +20,27 @@ HRectangle {
 
     readonly property var params: Utils.thumbnailParametersFor(width, height)
 
-    color: imageUrl ? "transparent" :
+    color: avatarImage.visible ? "transparent" : Utils.hsla(
-           name ? Utils.avatarColor(name) :
+       name ? Utils.hueFrom(name) : 0,
-           theme.avatar.background.unknown
+       name ? theme.controls.avatar.background.saturation : 0,
+       theme.controls.avatar.background.lightness,
+       theme.controls.avatar.background.opacity
+   )
 
     HLabel {
         z: 1
         anchors.centerIn: parent
-        visible: ! imageUrl
+        visible: ! avatarImage.visible
 
         text: name ? name.charAt(0) : "?"
-        color: theme.avatar.letter
         font.pixelSize: parent.height / 1.4
+
+        color: Utils.hsla(
+           name ? Utils.hueFrom(name) : 0,
+           name ? theme.controls.avatar.letter.saturation : 0,
+           theme.controls.avatar.letter.lightness,
+           theme.controls.avatar.letter.opacity
+       )
     }
 
     HImage {

src/qml/Base/HBusyIndicator.qml

@@ -1,4 +1,24 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 
-BusyIndicator {}
+BusyIndicator {
+    id: indicator
+    implicitWidth: Math.min(192, Math.max(64, parent.width / 5))
+    implicitHeight: 10
+
+    contentItem: Item {
+        Rectangle {
+            id: rect
+            width: indicator.height
+            height: indicator.height
+            radius: height / 2
+
+            XAnimator on x {
+                from: 0
+                to: indicator.width - rect.width
+                duration: 500
+                onStopped: {[from, to] = [to, from]; start()}
+            }
+        }
+    }
+}

src/qml/Base/HIcon.qml

@@ -4,10 +4,14 @@
 import QtQuick 2.12
 
 HImage {
-    property var svgName: null
+    property string svgName: ""
     property int dimension: 20
 
-    source: "../../icons/" + (svgName || "none") + ".svg"
+    source:
+        svgName ?
+        ("../../icons/" + theme.preferredIconPack + "/" + svgName + ".svg") :
+        ""
+
     sourceSize.width: svgName ? dimension : 0
     sourceSize.height: svgName ? dimension : 0
 }

src/qml/Base/HInteractiveRectangle.qml

@@ -8,18 +8,20 @@ HRectangle {
     property bool checked: false
 
     readonly property QtObject _ir: theme.controls.interactiveRectangle
+    color: _ir.background
 
-    property color normalColor: _ir.background
+    HRectangle {
-    property color hoveredColor: _ir.hoveredBackground
+        anchors.fill: parent
-    property color pressedColor: _ir.pressedBackground
+        visible: opacity > 0
-    property color checkedColor: _ir.checkedBackground
 
-    color: checked ? checkedColor :
+        color: checked ? _ir.checkedOverlay : _ir.hoveredOverlay
-           // tap.pressed ? pressedColor :
-           hover.hovered ? hoveredColor :
-           normalColor
 
-    Behavior on color { HColorAnimation { factor: 0.66 } }
+        opacity: checked ?       _ir.checkedOpacity :
+                 hover.hovered ? _ir.hoveredOpacity :
+                 0
+
+        Behavior on opacity { HNumberAnimation { factor: 0.66 } }
+    }
 
     HoverHandler { id: hover }
     TapHandler { id: tap }

src/qml/Base/HInterfaceBox.qml

@@ -56,7 +56,7 @@ HScalingBox {
                     onClicked: buttonCallbacks[modelData.name](button)
 
                     Layout.fillWidth: true
-                    Layout.preferredHeight: theme.avatar.size
+                    Layout.preferredHeight: theme.controls.avatar.size
                 }
             }
         }

src/qml/Base/HLabel.qml

@@ -2,16 +2,15 @@
 // This file is part of harmonyqml, licensed under LGPLv3.
 
 import QtQuick.Controls 2.12
+import QtQuick 2.12
 
 Label {
     font.family: theme.fontFamily.sans
     font.pixelSize: theme.fontSize.normal
     textFormat: Label.PlainText
 
-    color: theme.colors.foreground
+    color: theme.colors.text
-    style: Label.Outline
+    linkColor: theme.colors.link
-    styleColor: theme.colors.textBorder
-    linkColor: theme.colors.accentDarker
 
     maximumLineCount: elide == Label.ElideNone ? Number.MAX_VALUE : 1
 }

src/qml/Base/HNoticePage.qml

@@ -30,8 +30,8 @@ HRowLayout {
 
         background: Rectangle {
             id: noticeLabelBackground
-            color: theme.box.background
+            color: theme.controls.box.background
-            radius: theme.box.radius
+            radius: theme.controls.box.radius
         }
     }
 }

src/qml/Base/HPage.qml

@@ -38,7 +38,7 @@ SwipeView {
 
         header: HRectangle {
             implicitWidth: parent ? parent.width : 0
-            color: theme.pageHeadersBackground
+            color: theme.controls.header.background
 
             height: ! hideHeaderUnderHeight ||
                     window.height >=

src/qml/Base/HRectangle.qml

@@ -5,5 +5,5 @@ import QtQuick 2.12
 
 Rectangle {
     id: rectangle
-    color: theme.sidePane.background
+    color: theme.controls.box.background
 }

src/qml/Base/HScalingBox.qml

@@ -11,7 +11,7 @@ HRectangle {
     readonly property int baseWidth: baseHeight * widthForHeight
     readonly property int margins: baseHeight * 0.03
 
-    color: theme.box.background
+    color: theme.controls.box.background
     height: Math.min(parent.height, baseHeight)
     width: Math.min(parent.width, baseWidth)
     scale: Math.max(1, parent.height / startScalingUpAboveHeight)

src/qml/Base/HScrollableTextArea.qml

@@ -24,7 +24,7 @@ ScrollView {
         font.family: theme.fontFamily.sans
         font.pixelSize: theme.fontSize.normal
 
-        color: theme.colors.foreground
+        color: theme.controls.textArea.text
         background: Rectangle {
             id: textAreaBackground
             color: theme.controls.textArea.background

src/qml/Base/HTextField.qml

@@ -18,16 +18,17 @@ TextField {
     property color focusedBorderColor: _tf.focusedBorder
     property alias radius: textFieldBackground.radius
 
-    color: theme.colors.foreground
+    color: activeFocus ? _tf.focusedText : _tf.text
+
     background: Rectangle {
         id: textFieldBackground
         color: field.activeFocus ? focusedBackgroundColor : backgroundColor
         border.color: field.activeFocus ? focusedBorderColor : borderColor
         border.width: bordered ? theme.controls.textField.borderWidth : 0
 
-        Behavior on color { HColorAnimation {} }
+        Behavior on color { HColorAnimation { factor: 0.5 } }
-        Behavior on border.color { HColorAnimation {} }
+        Behavior on border.color { HColorAnimation { factor: 0.5 } }
-        Behavior on border.width { HNumberAnimation {} }
+        Behavior on border.width { HNumberAnimation { factor: 0.5 } }
     }
 
     selectByMouse: true

src/qml/Base/HUIButton.qml

@@ -51,7 +51,8 @@ HBaseButton {
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
                 color: enabled ?
-                       theme.colors.foreground : theme.colors.foregroundDim2
+                       theme.controls.button.text :
+                       theme.controls.button.disabledText
                 Behavior on color { HNumberAnimation {} }
 
                 Layout.fillWidth: true

src/qml/Chat/ChatSplitView.qml

@@ -16,6 +16,9 @@ HSplitView {
         Layout.fillWidth: true
 
         EventList {
+            // Avoid a certain binding loop
+            Layout.minimumWidth: theme.minimumSupportedWidth
+
             Layout.fillWidth: true
             Layout.fillHeight: true
         }
@@ -79,11 +82,11 @@ HSplitView {
             to: target.oldWidth
 
             onStopped: target.Layout.minimumWidth = Qt.binding(
-                () => theme.avatar.size
+                () => theme.controls.avatar.size
             )
        }
 
-        collapsed: width < theme.avatar.size + theme.spacing
+        collapsed: width < theme.controls.avatar.size + theme.spacing
 
         property bool wasSnapped: false
         property int referenceWidth: roomHeader.buttonsWidth
@@ -110,7 +113,7 @@ HSplitView {
         }
 
         width: referenceWidth // Initial width
-        Layout.minimumWidth: theme.avatar.size
+        Layout.minimumWidth: theme.controls.avatar.size
         Layout.maximumWidth:
             parent.width - theme.minimumSupportedWidthPlusSpacing
     }

src/qml/Chat/RoomHeader.qml

@@ -38,6 +38,7 @@ HRectangle {
             id: roomName
             text: displayName
             font.pixelSize: theme.fontSize.big
+            color: theme.chat.roomHeader.name
             elide: Text.ElideRight
             verticalAlignment: Text.AlignVCenter
 
@@ -54,6 +55,7 @@ HRectangle {
             id: roomTopic
             text: topic
             font.pixelSize: theme.fontSize.small
+            color: theme.chat.roomHeader.topic
             elide: Text.ElideRight
             verticalAlignment: Text.AlignVCenter
 
@@ -78,6 +80,7 @@ HRectangle {
                     "members", "files", "notifications", "history", "settings"
                 ]
                 HUIButton {
+                    backgroundColor: theme.chat.selectViewBar.background
                     iconName: "room-view-" + modelData
                     iconDimension: 22
                     autoExclusive: true
@@ -96,9 +99,13 @@ HRectangle {
     HUIButton {
         id: expandButton
         z: 1
+        width: theme.controls.avatar.size
+        height: width
         anchors.right: parent.right
         opacity: collapseButtons ? 1 : 0
         visible: opacity > 0
+
+        backgroundColor: theme.chat.selectViewBar.background
         iconName: "reduced-room-buttons"
 
         Behavior on opacity {

src/qml/Chat/RoomSidePane/RoomSidePane.qml

@@ -7,6 +7,7 @@ import "../../Base"
 
 HRectangle {
     id: roomSidePane
+    color: theme.chat.roomSidePane.background
 
     property bool collapsed: false
     property var activeView: null

src/qml/Chat/Timeline/Daybreak.qml

@@ -6,7 +6,7 @@ import "../../Base"
 
 HNoticePage {
     text: model.date.toLocaleDateString()
-    color: theme.chat.daybreak.foreground
+    color: theme.chat.daybreak.text
     backgroundColor: theme.chat.daybreak.background
     radius: theme.chat.daybreak.radius
 }

src/qml/LoadingScreen.qml

@@ -3,9 +3,11 @@
 
 import QtQuick 2.12
 import "Base"
+import "utils.js" as Utils
 
-Rectangle {
+HRectangle {
-    color: "lightgray"
+    color: theme ? theme.controls.box.background : "#0f1222"
+    Behavior on color { HNumberAnimation {} }
 
     HBusyIndicator {
         anchors.centerIn: parent

src/qml/Pages/EditAccount/EditAccount.qml

@@ -24,7 +24,7 @@ HPage {
         )
 
     HRectangle {
-        color: ready ? theme.box.background : "transparent"
+        color: ready ? theme.controls.box.background : "transparent"
         Behavior on color { HColorAnimation {} }
 
         Layout.alignment: Qt.AlignCenter

src/qml/Shortcuts.qml

@@ -31,4 +31,21 @@ Item {
         sequence: "Alt+Shift+D"
         onActivated: if (window.debug) { py.call("APP.pdb") }
     }
+
+    /*
+    Shortcut {
+        sequence: "Ctrl+-"
+        onActivated: theme.fontScale = Math.max(0.1, theme.fontScale - 0.1)
+    }
+
+    Shortcut {
+        sequence: "Ctrl++"
+        onActivated: theme.fontScale = Math.min(10, theme.fontScale + 0.1)
+    }
+
+    Shortcut {
+        sequence: "Ctrl+="
+        onActivated: theme.fontScale = 1.0
+    }
+    */
 }

src/qml/SidePane/AccountDelegate.qml

@@ -8,6 +8,7 @@ import "../Base"
 Column {
     id: accountDelegate
     width: parent.width
+    spacing: theme.spacing / 2
 
     property var userInfo: users.find(model.userId)
     property bool expanded: true
@@ -23,8 +24,7 @@ Column {
     HInteractiveRectangle {
         width: parent.width
         height: childrenRect.height
-
+        color: theme.sidePane.account.background
-        normalColor: theme.sidePane.account.background
 
         TapHandler {
             onTapped: pageStack.showPage(
@@ -48,6 +48,7 @@ Column {
 
                 HLabel {
                     id: accountLabel
+                    color: theme.sidePane.account.name
                     text: userInfo.displayName || model.userId
                     font.pixelSize: theme.fontSize.big
                     elide: HLabel.ElideRight

src/qml/SidePane/RoomCategoryDelegate.qml

@@ -42,6 +42,8 @@ Column {
             text: model.name
             font.weight: Font.DemiBold
             elide: Text.ElideRight
+            topPadding: theme.spacing / 2
+            bottomPadding: topPadding
 
             Layout.leftMargin: sidePane.currentSpacing
             Layout.fillWidth: true

src/qml/SidePane/RoomDelegate.qml

@@ -10,6 +10,7 @@ HInteractiveRectangle {
     id: roomDelegate
     width: roomList.width
     height: childrenRect.height
+    color: theme.sidePane.room.background
 
     TapHandler {
         onTapped: pageStack.showRoom(
@@ -38,6 +39,7 @@ HInteractiveRectangle {
 
                 HLabel {
                     id: roomLabel
+                    color: theme.sidePane.room.name
                     text: model.displayName || "<i>Empty room</i>"
                     textFormat:
                         model.displayName? Text.PlainText : Text.StyledText
@@ -68,6 +70,7 @@ HInteractiveRectangle {
                     onLastEvChanged: text = getText(lastEv)
 
                     id: subtitleLabel
+                    color: theme.sidePane.room.subtitle
                     visible: Boolean(text)
                     textFormat: Text.StyledText
 

src/qml/SidePane/SidePane.qml

@@ -11,6 +11,8 @@ HRectangle {
     opacity: mainUI.accountsPresent && ! reduce ? 1 : 0
     visible: opacity > 0
 
+    color: theme.sidePane.background
+
     property real autoWidthRatio: theme.sidePane.autoWidthRatio
     property bool manuallyResizing: false
     property bool manuallyResized: false

src/qml/UI.qml

@@ -8,8 +8,9 @@ import QtQuick.Window 2.7
 import "Base"
 import "SidePane"
 
-Item {
+HRectangle {
     id: mainUI
+    color: theme.ui.background
 
     Connections {
         target: py
@@ -34,6 +35,7 @@ Item {
         accounts.count > 0 || py.loadingAccounts
 
     HImage {
+        visible: false
         id: mainUIBackground
         fillMode: Image.PreserveAspectCrop
         source: "../images/background.jpg"

src/qml/Window.qml

@@ -8,13 +8,14 @@ import "Models"
 
 ApplicationWindow {
     id: window
+    flags: Qt.WA_TranslucentBackground
     minimumWidth: theme ? theme.minimumSupportedWidth : 240
     minimumHeight: theme ? theme.minimumSupportedHeight : 120
     width: 640
     height: 480
     visible: true
     title: "Harmony QML"
-    color: "black"
+    color: "transparent"
 
     Component.onCompleted: {
         Qt.application.organization = "harmonyqml"

src/qml/utils.js

@@ -1,7 +1,11 @@
 // Copyright 2019 miruka
 // This file is part of harmonyqml, licensed under LGPLv3.
 
-"use strict"
+
+function hsluv(hue, saturation, lightness, alpha=1.0) {
+    let rgb = py.call_sync("APP.backend.hsluv", [hue, saturation, lightness])
+    return Qt.rgba(rgb[0], rgb[1], rgb[2], alpha)
+}
 
 
 function hsl(hue, saturation, lightness) {
@@ -30,31 +34,20 @@ function arrayToModelItem(keysName, array) {
 
 
 function hueFrom(string) {
-    // Calculate and return a unique hue between 0 and 1 for the string
+    // Calculate and return a unique hue between 0 and 360 for the string
     let hue = 0
     for (let i = 0; i < string.length; i++) {
         hue += string.charCodeAt(i) * 99
     }
-    return hue % 360 / 360
+    return hue % 360
-}
-
-
-function avatarColor(name) {
-   return Qt.hsla(
-       hueFrom(name),
-       theme.avatar.background.saturation,
-       theme.avatar.background.lightness,
-       theme.avatar.background.alpha
-   )
 }
 
 
 function nameColor(name) {
-    return Qt.hsla(
+    return hsl(
         hueFrom(name),
-        theme.displayName.saturation,
+        theme.controls.displayName.saturation,
-        theme.displayName.lightness,
+        theme.controls.displayName.lightness,
-        1
     )
 }
 

src/themes/Default.qpl

@@ -2,109 +2,183 @@
 // This file is part of harmonyqml, licensed under LGPLv3.
 // vim: syntax=qml
 
-int minimumSupportedWidth: 240
+real uiScale: 1.0  /* TODO: Implement correctly, do not change for now */
-int minimumSupportedHeight: 120
+real fontScale: uiScale
-int contentIsWideAbove: 439
 
-int minimumSupportedWidthPlusSpacing: 240 + spacing * 2
+Behavior on uiScale   { HNumberAnimation {} }
-int minimumSupportedHeightPlusSpacing: 120 + spacing * 2
+Behavior on fontScale { HNumberAnimation {} }
 
-int baseElementsHeight: 36
+int minimumSupportedWidth:  240 * uiScale
-int spacing: 8
+int minimumSupportedHeight: 120 * uiScale
-int radius: 5
+int contentIsWideAbove:     439 * uiScale
-int animationDuration: 100
 
-color pageHeadersBackground: colors.background2
+int minimumSupportedWidthPlusSpacing:  minimumSupportedWidth + spacing * 2
+int minimumSupportedHeightPlusSpacing: minimumSupportedHeight + spacing * 2
+
+int baseElementsHeight: 36 * uiScale
+int spacing:            12 * uiScale
+int radius:             5
+int animationDuration:  100
+
+string preferredIconPack: "light-thin"
 
 fontSize:
-    int smallest: 6
+    int smaller: 8  * fontScale
-    int smaller: 8
+    int small:   13 * fontScale
-    int small: 13
+    int normal:  16 * fontScale
-    int normal: 16
+    int big:     22 * fontScale
-    int big: 22
+    int bigger:  32 * fontScale
-    int bigger: 32
+    int biggest: 48 * fontScale
-    int biggest: 48
 
 fontFamily:
-    string sans: "SFNS Display"
+    string sans:  "Roboto"
     string serif: "Roboto Slab"
-    string mono: "Hack"
+    string mono:  "Hack"
 
 colors:
-    color background0: Ut.hsla(0, 0, 90, 0.5)
+    int hue:        260
-    color background1: Ut.hsla(0, 0, 90, 0.6)
+    int saturation: 40
-    color background2: Ut.hsla(0, 0, 90, 0.7)
+    real intensity: 1.0
-    color foreground: "black"
+    real opacity:   1.0
-    color foregroundDim: Ut.hsl(0, 0, 20)
+
-    color foregroundDim2: Ut.hsl(0, 0, 30)
+    color weakBackground:   hsluv(hue, saturation, intensity * 12, opacity)
-    color foregroundError: Ut.hsl(342, 64, 32)
+    color mediumBackground: hsluv(hue, saturation, intensity * 9, opacity)
-    color textBorder: Ut.hsla(0, 0, 0, 0.07)
+    color strongBackground: hsluv(hue, saturation, intensity * 6, opacity)
-    color accent: Ut.hsl(25, 60, 50)
+    color fullBackground:   hsluv(hue, saturation, intensity * 2, opacity)
-    color accentDarker: Ut.hsl(25, 60, 35)
+
+    color brightText: hsluv(0, 0, intensity * 100)
+    color text:       hsluv(0, 0, intensity * 80)
+    color dimText:    hsluv(0, 0, intensity * 55)
+    color dimmerText: hsluv(0, 0, intensity * 30)
+    color accentText: hsluv(hue - 10, saturation * 2.25, 60)
+    color link:       accentText
+    color code:       hsluv(hue + 5, saturation * 1.5, intensity * 60)
+
+    NumberAnimation on intensity  // For testing
+        running: false
+        from: 0
+        to: 10
+        duration: 20000
+        loops: Animation.Infinite
+
 
 controls:
+    box:
+        color background: colors.strongBackground
+        int radius:       theme.radius
+
+    header:
+        color background: colors.mediumBackground
+
     button:
-        color background: colors.background2
+        color background: colors.fullBackground
+        color text: colors.text
+        color disabledText: colors.dimmerText
 
     interactiveRectangle:
         color background: "transparent"
-        color hoveredBackground: Ut.hsla(0, 0, 0, 0.2)
+
-        color pressedBackground: Ut.hsla(0, 0, 0, 0.4)
+        color hoveredOverlay: hsluv(0, 0, 100)
-        color checkedBackground: Ut.hsla(0, 0, 0, 0.4)
+        color pressedOverlay: hsluv(0, 0, 100)
+        color checkedOverlay: hsluv(0, 0, 100)
+
+        real hoveredOpacity: 0.1
+        real pressedOpacity: 0.2
+        real checkedOpacity: 0.2
 
     textField:
-        color background: colors.background2
+        color background:        colors.fullBackground
-        color border: "transparent"
         color focusedBackground: background
-        color focusedBorder: colors.accent
+
-        int borderWidth: 1
+        int borderWidth:     1
+        color border:        "transparent"
+        color focusedBorder: colors.accentText
+
+        color text:        colors.text
+        color focusedText: colors.text
 
     textArea:
-        color background: colors.background2
+        color background: colors.fullBackground
+        color text:       colors.text
+
+    avatar:
+        int size:   baseElementsHeight
+        int radius: theme.radius
+
+        background:
+            int saturation: colors.saturation - 5
+            int lightness:  Math.min(50, colors.intensity * 20)
+            real opacity:   1.0
+
+        letter:
+            int saturation: colors.saturation * 1.5
+            int lightness:  colors.intensity * 60
+            real opacity:   1.0
+
+    displayName:
+        int saturation: 45
+        int lightness:  55
+
+
+ui:
+    color background: colors.weakBackground
+
 
 sidePane:
-    real autoWidthRatio: 0.33
+    real autoWidthRatio:  0.33 * uiScale
-    int maximumAutoWidth: 320
+    int maximumAutoWidth: 320 * uiScale
 
-    int autoCollapseBelowWidth: 128
+    int autoCollapseBelowWidth: 128 * uiScale
-    int collapsedWidth: avatar.size
+    int collapsedWidth:         controls.avatar.size
 
     int autoReduceBelowWindowWidth:
         minimumSupportedWidthPlusSpacing + collapsedWidth
 
-    color background: colors.background2
+    color background: colors.strongBackground
 
     account:
-        color background: Qt.lighter(colors.background2, 1.05)
+        color background: sidePane.background
+        color name:       colors.text
+
+    room:
+        color background: sidePane.background
+        color name:       colors.text
+        color subtitle:   colors.dimText
 
     settingsButton:
-        color background: colors.background2
+        color background: sidePane.background
 
     filterRooms:
-        color background: colors.background2
+        color background: sidePane.background
+
 
 chat:
-    selectViewBar:
-        color background: colors.background2
-
     roomHeader:
-        color background: colors.background2
+        color background: colors.strongBackground
+        color name:       colors.text
+        color topic:      colors.dimText
+
+    roomSidePane:
+        color background: colors.mediumBackground
+
+    selectViewBar:
+        color background: chat.roomHeader.background
 
     eventList:
         int ownEventsOnRightUnderWidth: 768
-        color background: "transparent"
+        color background:               "transparent"
 
     message:
-        color ownBackground: Ut.hsla(25, 40, 82, 0.7)
+        int radius:          theme.radius
-        color background: colors.background2
+        color background:    colors.strongBackground
-        color body: colors.foreground
+        /* color ownBackground: hsluv(25, 40, 82, colors.opacity) */
-        color date: colors.foregroundDim
+        color ownBackground: background
+        color body:          colors.text
+        color date:          colors.dimText
 
-        color link: colors.accentDarker
+        color greenText: hsluv(80, 60, 25)
-        // color code: Ut.hsl(0, 0, 80)
+        color link:      colors.link
-        // color codeBackground: Ut.hsl(0, 0, 10)
+        color code:      colors.code
-        color code: Ut.hsl(265, 60, 35)
-        color greenText: Ut.hsl(80, 60, 25)
 
         string styleSheet:
             "a { color: " + link  + " }" +
@@ -112,8 +186,13 @@ chat:
             "code { font-family: " + fontFamily.mono + "; " +
                    "color: "       + code            + " }" +
 
-            "h1, h2 { font-weight: normal }" +
+            "h1, h2, h3 { font-weight: normal }" +
-            "h6 { font-size: small }" +
+            "h1 { font-size: " + fontSize.biggest + "px }" +
+            "h2 { font-size: " + fontSize.bigger + "px }" +
+            "h3 { font-size: " + fontSize.big + "px }" +
+            "h4 { font-size: " + fontSize.normal + "px }" +
+            "h5 { font-size: " + fontSize.small + "px }" +
+            "h6 { font-size: " + fontSize.smaller + "px }" +
 
             ".greentext { color: " + greenText + " }"
 
@@ -121,40 +200,21 @@ chat:
             '<style type"text/css">\n' + styleSheet + '\n</style>\n'
 
     daybreak:
-        color background: colors.background2
+        color background: colors.strongBackground
-        color foreground: colors.foreground
+        color text:       colors.text
-        int radius: theme.radius
+        int radius:       theme.radius
 
     inviteBanner:
-        color background: colors.background2
+        color background: colors.mediumBackground
 
     leftBanner:
-        color background: colors.background2
+        color background: colors.mediumBackground
 
     unknownDevices:
-        color background: colors.background2
+        color background: colors.mediumBackground
 
     typingMembers:
-        color background: colors.background1
+        color background: colors.mediumBackground
 
     sendBox:
-        color background: colors.background2
+        color background: colors.strongBackground
-
-box:
-    color background: colors.background0
-    int radius: theme.radius
-
-avatar:
-    int size: baseElementsHeight
-    int radius: theme.radius
-    color letter: "white"
-
-    background:
-        real saturation: 0.22
-        real lightness: 0.5
-        real alpha: 1
-        color unknown: Ut.hsl(0, 0, 22)
-
-displayName:
-    real saturation: 0.32
-    real lightness: 0.3