diff --git a/images/logo-jami-standard-coul-white.svg b/images/logo-jami-standard-coul-white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bd9743f3892da5f4284da34875059a790952b09b
--- /dev/null
+++ b/images/logo-jami-standard-coul-white.svg
@@ -0,0 +1,417 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 1658.4 552.8" style="enable-background:new 0 0 1658.4 552.8;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#FFFFFF;}
+ .st1{fill:url(#SVGID_1_);}
+ .st2{fill:url(#SVGID_2_);}
+ .st3{fill:url(#SVGID_3_);}
+ .st4{fill:url(#SVGID_4_);}
+ .st5{fill:url(#SVGID_5_);}
+ .st6{fill:url(#SVGID_6_);}
+ .st7{opacity:0.4;fill:url(#SVGID_7_);enable-background:new ;}
+ .st8{fill:url(#SVGID_8_);}
+ .st9{fill:url(#SVGID_9_);}
+ .st10{fill:url(#SVGID_10_);}
+ .st11{fill:url(#SVGID_11_);}
+ .st12{fill:url(#SVGID_12_);}
+ .st13{fill:url(#SVGID_13_);}
+ .st14{fill:url(#SVGID_14_);}
+ .st15{fill:url(#SVGID_15_);}
+ .st16{fill:url(#SVGID_16_);}
+ .st17{opacity:0.2;fill:url(#SVGID_17_);enable-background:new ;}
+ .st18{fill:url(#SVGID_18_);}
+ .st19{fill:url(#SVGID_19_);}
+ .st20{opacity:0.25;fill:url(#SVGID_20_);enable-background:new ;}
+ .st21{fill:url(#SVGID_21_);}
+ .st22{fill:url(#SVGID_22_);}
+ .st23{opacity:0.2;fill:url(#SVGID_23_);enable-background:new ;}
+ .st24{fill:url(#SVGID_24_);}
+</style>
+<g id="Layer_1_1_">
+ <g>
+ <g>
+ <path class="st0" d="M786.3,107.5v150.2c0,86.2-69.7,156.5-155.9,156.5v-42.3c62.8-0.6,113.6-51.4,113.6-114.2V107.5H786.3z
+ M793.7,31.6c0-16-13.1-28.6-28.6-28.6c-16,0-28.6,12.6-28.6,28.6c0,15.4,12.6,28.6,28.6,28.6C780.6,60.1,793.7,47,793.7,31.6z"
+ />
+ <path class="st0" d="M1523,411.3V212.6c0-38.8-31.4-69.7-70.2-69.7c-38.8,0-70.2,31.4-70.2,70.2v198.1h-42.3V212.6
+ c0-38.8-31.4-69.7-70.2-69.7c-38.3,0-69.7,31.4-69.7,70.2v198.1h-42.3V212.6c0-62.2,50.3-111.9,111.9-111.9
+ c37.7,0,70.8,18.3,91.4,46.8c20.6-28.6,53.7-46.8,91.4-46.8c62.2,0,112.5,50.3,112.5,112.5v198.1H1523z"/>
+ <path class="st0" d="M1616.1,60.1c-16,0-28.6-12.6-28.6-28.6c0-15.4,12.6-28.6,28.6-28.6s28.6,13.1,28.6,28.6
+ C1644.6,47.5,1632.1,60.1,1616.1,60.1z M1637.2,107.5v303.8h-42.3V107.5H1637.2z"/>
+ <path class="st0" d="M974.6,143.3c63.5,0,115.2,51.7,115.2,115.2v115.2H974.6c-63.5,0-115.2-51.7-115.2-115.2
+ S911.1,143.3,974.6,143.3 M974.6,102.1c-86.4,0-156.4,70-156.4,156.4s70,156.4,156.4,156.4H1131V258.5
+ C1131.1,172.1,1061,102.1,974.6,102.1L974.6,102.1z"/>
+ </g>
+ <g>
+ <g>
+ <path class="st0" d="M883.5,535.1h-8.8v-9.7c-6,6.3-14.4,10.3-23.7,10.3c-18,0-32.7-14.7-32.7-32.7s14.7-32.6,32.7-32.6
+ s32.6,14.6,32.6,32.6L883.5,535.1L883.5,535.1z M874.6,503c0-13.1-10.6-23.7-23.7-23.7c-13.1,0-23.9,10.6-23.9,23.7
+ c0,13.1,10.7,23.8,23.9,23.8C864,526.9,874.6,516.1,874.6,503z"/>
+ <path class="st0" d="M945.9,498.6h32.2c0.1,1.4,0.2,3,0.2,4.4c0,18-14.5,32.7-32.6,32.7c-18,0-32.7-14.7-32.7-32.7
+ s14.7-32.6,32.7-32.6c13.2,0,24.7,7.9,29.8,19.3h-10c-4.3-6.3-11.6-10.5-19.8-10.5c-13.1,0-23.9,10.6-23.9,23.7
+ s10.7,23.8,23.9,23.8c11.6,0,21.2-8.3,23.4-19.4h-23.3L945.9,498.6L945.9,498.6z"/>
+ <path class="st0" d="M1049.7,535.1h-8.8v-31.8c0-13.1-10.6-23.8-23.7-23.8s-23.7,10.7-23.7,23.8v31.8h-8.8V503
+ c0-18,14.5-32.4,32.6-32.4c18.1,0,32.6,14.7,32.6,32.7v31.8L1049.7,535.1L1049.7,535.1z"/>
+ <path class="st0" d="M1055.8,471.2h8.8V503c0,13.1,10.6,23.8,23.7,23.8s23.7-10.7,23.7-23.8v-31.8h8.8v32.1
+ c0,18-14.5,32.4-32.6,32.4c-18,0-32.6-14.7-32.6-32.7v-31.8H1055.8z"/>
+ <path class="st0" d="M1150.5,549.6V503c0-18,14.5-32.6,32.6-32.6s32.7,14.6,32.7,32.6s-14.5,32.7-32.7,32.7
+ c-9.3,0-17.8-3.9-23.7-10.3v24.2L1150.5,549.6L1150.5,549.6z M1183,526.9c13.2,0,23.8-10.7,23.8-23.8s-10.6-23.7-23.8-23.7
+ c-13.1,0-23.7,10.6-23.7,23.7C1159.3,516.2,1169.9,526.9,1183,526.9z"/>
+ <path class="st0" d="M1287.1,535.1h-8.8v-9.7c-6,6.3-14.4,10.3-23.7,10.3c-18,0-32.7-14.7-32.7-32.7s14.7-32.6,32.7-32.6
+ s32.6,14.6,32.6,32.6L1287.1,535.1L1287.1,535.1z M1278.3,503c0-13.1-10.6-23.7-23.7-23.7s-23.9,10.6-23.9,23.7
+ c0,13.1,10.7,23.8,23.9,23.8C1267.7,526.9,1278.3,516.1,1278.3,503z"/>
+ <path class="st0" d="M1349.4,507.4h8.9c-2.1,16-15.9,28.3-32.3,28.3c-18,0-32.7-14.7-32.7-32.7s14.7-32.6,32.7-32.6
+ c16.5,0,30.2,12.3,32.3,28.1h-8.9c-2.1-11-11.8-19.3-23.4-19.3c-13.1,0-23.9,10.6-23.9,23.7c0,13.1,10.7,23.8,23.9,23.8
+ C1337.5,526.9,1347.2,518.5,1349.4,507.4z"/>
+ <path class="st0" d="M1424.4,524v11.1h-8.8V524c0-13.1-10.7-24-23.8-24h-18.4v35.1h-8.8v-78.3h8.8v34.7h12.9
+ c10.6,0,19.9-11,22.2-21.1h9.1c-1.4,8.6-6.7,18.6-13.4,23.5C1415.9,498.7,1424.4,510.4,1424.4,524z"/>
+ <path class="st0" d="M1495.8,535.1h-8.8v-9.7c-6,6.3-14.4,10.3-23.7,10.3c-18,0-32.7-14.7-32.7-32.7s14.7-32.6,32.7-32.6
+ s32.6,14.6,32.6,32.6L1495.8,535.1L1495.8,535.1z M1487,503c0-13.1-10.6-23.7-23.7-23.7s-23.9,10.6-23.9,23.7
+ c0,13.1,10.7,23.8,23.9,23.8C1476.4,526.9,1487,516.1,1487,503z"/>
+ <path class="st0" d="M1534.8,498.6h32.2c0.1,1.4,0.2,3,0.2,4.4c0,18-14.5,32.7-32.6,32.7c-18,0-32.7-14.7-32.7-32.7
+ s14.7-32.6,32.7-32.6c13.2,0,24.7,7.9,29.8,19.3h-10c-4.3-6.3-11.6-10.5-19.8-10.5c-13.1,0-23.9,10.6-23.9,23.7
+ s10.7,23.8,23.9,23.8c11.6,0,21.2-8.3,23.4-19.4h-23.3v-8.7H1534.8z"/>
+ </g>
+ <path class="st0" d="M1635.3,490.5c-1.8-5-4.7-9.2-8.6-12.6c-4-3.4-8.8-5.7-14.3-6.7c-5.9-1.1-11.5-0.8-16.7,1s-9.6,4.9-13.2,9.2
+ c-3.6,4.3-6,9.5-7.1,15.6s-0.8,11.8,1,17.2c1.8,5.3,5,9.9,9.4,13.6c4.4,3.7,9.9,6.2,16.3,7.4c2.5,0.5,4.9,0.7,7.3,0.7
+ c2.3,0,4.6-0.2,6.8-0.7c4.4-0.9,8.4-2.8,11.8-5.6l0.3-0.3l-4.1-7.2l-0.5,0.4c-2.7,2.1-5.8,3.6-9.2,4.3c-3.4,0.7-7,0.7-10.8,0
+ c-5.5-1.1-10.1-3.4-13.6-7c-3.3-3.4-5.3-7.6-6-12.5h52.2l0.1-0.4C1637.5,500.9,1637.1,495.5,1635.3,490.5z M1584.5,498.6
+ c0-0.2,0.1-0.5,0.1-0.7c0.9-4.5,2.6-8.3,5.1-11.4s5.7-5.3,9.3-6.6c2.2-0.8,4.6-1.2,7.1-1.2c1.5,0,3.1,0.2,4.7,0.5
+ c5.4,1,9.7,3.6,12.7,7.5c2.7,3.4,4.2,7.5,4.5,11.9"/>
+ </g>
+ </g>
+</g>
+<g id="Layer_3">
+ <g>
+
+ <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="310.5713" y1="-171.5924" x2="288.0715" y2="-145.3427" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2B3B6A"/>
+ <stop offset="1" style="stop-color:#2B3B6A"/>
+ </linearGradient>
+ <polygon class="st1" points="272.7,257.6 307.5,256.6 290.3,289.4 "/>
+
+ <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="504.3354" y1="-182.9431" x2="504.3354" y2="-363.3576" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2B3B6A"/>
+ <stop offset="7.040000e-02" style="stop-color:#2D4576"/>
+ <stop offset="0.2165" style="stop-color:#2E5589"/>
+ <stop offset="0.3608" style="stop-color:#2B5E97"/>
+ <stop offset="0.5" style="stop-color:#29629C"/>
+ <stop offset="0.6392" style="stop-color:#2B5E97"/>
+ <stop offset="0.7835" style="stop-color:#2E5589"/>
+ <stop offset="0.9296" style="stop-color:#2D4576"/>
+ <stop offset="1" style="stop-color:#2B3B6A"/>
+ </linearGradient>
+ <path class="st2" d="M423.2,265.9c128,20.6,146.1,52.5,146.1,52.5c0,2,0,3.9,0,5.9c0,1-0.5,2-1,3.4c-0.5,1.5-13.2,27.9-96.1,45.6
+ L423.2,265.9z"/>
+
+ <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="103.1957" y1="-376.9868" x2="161.7357" y2="-272.7559" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#252B59"/>
+ <stop offset="8.590000e-02" style="stop-color:#2B3A69"/>
+ <stop offset="0.2267" style="stop-color:#2E4A7C"/>
+ <stop offset="0.3658" style="stop-color:#2E5487"/>
+ <stop offset="0.5" style="stop-color:#2D578C"/>
+ <stop offset="0.6342" style="stop-color:#2E5487"/>
+ <stop offset="0.7733" style="stop-color:#2E4A7C"/>
+ <stop offset="0.9141" style="stop-color:#2B3A69"/>
+ <stop offset="1" style="stop-color:#252B59"/>
+ </linearGradient>
+ <path class="st3" d="M100.6,368.9c-28.9,77-14.2,101-13.2,103c0.5,1,1,2,2,2.5c2,0,3.9-0.5,5.9-1c0,0,52.5-2.5,113.7-89.7
+ L100.6,368.9z"/>
+
+ <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="270.5742" y1="-23.0625" x2="173.6782" y2="89.9837" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#181844"/>
+ <stop offset="2.840000e-02" style="stop-color:#1E1E4C"/>
+ <stop offset="0.1353" style="stop-color:#283261"/>
+ <stop offset="0.2468" style="stop-color:#2D4172"/>
+ <stop offset="0.3647" style="stop-color:#2E4A7C"/>
+ <stop offset="0.5" style="stop-color:#2E4D7F"/>
+ <stop offset="0.6177" style="stop-color:#2D4576"/>
+ <stop offset="0.8125" style="stop-color:#273160"/>
+ <stop offset="1" style="stop-color:#181844"/>
+ </linearGradient>
+ <path class="st4" d="M291.8,75.2c-70.1-77-104-72.6-105.9-72.1c-1,0-2.5,0.5-3.4,1c-2.5,1-4.9,8.8-4.9,8.8s-14.7,42.7,44.6,156.4
+ L291.8,75.2z"/>
+
+ <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="462.4529" y1="-389.3665" x2="387.5968" y2="-148.224" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#181844"/>
+ <stop offset="2.840000e-02" style="stop-color:#1E1E4C"/>
+ <stop offset="0.1353" style="stop-color:#283261"/>
+ <stop offset="0.2468" style="stop-color:#2D4172"/>
+ <stop offset="0.3647" style="stop-color:#2E4A7C"/>
+ <stop offset="0.5" style="stop-color:#2E4D7F"/>
+ <stop offset="0.6177" style="stop-color:#2D4576"/>
+ <stop offset="0.8125" style="stop-color:#273160"/>
+ <stop offset="1" style="stop-color:#181844"/>
+ </linearGradient>
+ <path class="st5" d="M353.1,370.3c95.1,108.8,128.4,102.5,128.4,102.5c2,0.5,4.4,1,6.4,1c1-0.5,1.5-1.5,2-2.5
+ c1.5-2,28.4-46.1-62.8-204.9L353.1,370.3z"/>
+
+ <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="127.2854" y1="-182.9417" x2="127.2854" y2="-363.3527" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2B3B6A"/>
+ <stop offset="7.040000e-02" style="stop-color:#2D4576"/>
+ <stop offset="0.2165" style="stop-color:#2E5589"/>
+ <stop offset="0.3608" style="stop-color:#2B5E97"/>
+ <stop offset="0.5" style="stop-color:#29629C"/>
+ <stop offset="0.6392" style="stop-color:#2B5E97"/>
+ <stop offset="0.7835" style="stop-color:#2E5589"/>
+ <stop offset="0.9296" style="stop-color:#2D4576"/>
+ <stop offset="1" style="stop-color:#2B3B6A"/>
+ </linearGradient>
+ <path class="st6" d="M230,387C33.9,378.7,10.4,330.1,9.4,327.7c-0.5-1-1-2-1-3.4c0.5-3.4,7.4-9.8,7.4-9.8s52-31.9,138.7-49
+ L230,387z"/>
+
+ <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="226.4924" y1="-5.8589" x2="297.318" y2="-5.8589" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2B3B6A"/>
+ <stop offset="1" style="stop-color:#2B3B6A"/>
+ </linearGradient>
+ <path class="st7" d="M286.4,69.3c-24.5,26.5-47.1,54.9-67.7,84.3h4.9c15.2-19.1,52.9-67.2,65.7-80.9L286.4,69.3z"/>
+
+ <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="319.9168" y1="-80.8058" x2="319.9168" y2="89.3622" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#252B59"/>
+ <stop offset="0.5" style="stop-color:#2D578C"/>
+ <stop offset="0.6934" style="stop-color:#2D5588"/>
+ <stop offset="0.8038" style="stop-color:#2E4F80"/>
+ <stop offset="0.8932" style="stop-color:#2D4474"/>
+ <stop offset="0.971" style="stop-color:#283463"/>
+ <stop offset="1" style="stop-color:#252B59"/>
+ </linearGradient>
+ <path class="st8" d="M365.3,157.6c51.5-121.1,31.4-149,31.4-149c-0.5-1.5-1-3.4-1.5-4.9c-1-0.5-2-0.5-3.4-1
+ c-2.5-0.5-55.9-7.4-168.7,150.5L365.3,157.6z"/>
+
+ <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="164.8027" y1="-411.2054" x2="475.6771" y2="58.704" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2867A2"/>
+ <stop offset="8.239999e-02" style="stop-color:#177EBC"/>
+ <stop offset="0.1675" style="stop-color:#0E91D1"/>
+ <stop offset="0.2527" style="stop-color:#10A2E1"/>
+ <stop offset="0.337" style="stop-color:#18ACEA"/>
+ <stop offset="0.42" style="stop-color:#24B1ED"/>
+ <stop offset="0.5" style="stop-color:#28B1ED"/>
+ <stop offset="0.58" style="stop-color:#24B1ED"/>
+ <stop offset="0.663" style="stop-color:#18ACEA"/>
+ <stop offset="0.7473" style="stop-color:#10A2E1"/>
+ <stop offset="0.8325" style="stop-color:#0E91D1"/>
+ <stop offset="0.9176" style="stop-color:#177EBC"/>
+ <stop offset="1" style="stop-color:#2867A2"/>
+ </linearGradient>
+ <path class="st9" d="M287.9,461.5c-69.6,75.5-103,71.1-104.9,71.1c-2.9-1-5.9-2.5-8.3-3.9l-84.8-53.9c35.8-7.8,79.9-50,126-104.4
+ L287.9,461.5z"/>
+
+ <linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="136.7031" y1="-420.5407" x2="259.8331" y2="-310.2963" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2C5D95"/>
+ <stop offset="8.220001e-02" style="stop-color:#246EAB"/>
+ <stop offset="0.1808" style="stop-color:#1B79B9"/>
+ <stop offset="0.3007" style="stop-color:#1080C2"/>
+ <stop offset="0.5" style="stop-color:#0E81C5"/>
+ <stop offset="0.6993" style="stop-color:#1080C2"/>
+ <stop offset="0.8192" style="stop-color:#1B79B9"/>
+ <stop offset="0.9178" style="stop-color:#246EAB"/>
+ <stop offset="1" style="stop-color:#2C5D95"/>
+ </linearGradient>
+ <path class="st10" d="M290.8,464.5c-69.6,75.5-103,71.1-104.9,71.1c-2.9-1-5.9-2.5-8.3-3.9l-87.8-57.4
+ c35.8-7.8,82.9-47.1,128.9-101.5L290.8,464.5z"/>
+
+ <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="125.3424" y1="61.8793" x2="411.2583" y2="-414.6461" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2C5D95"/>
+ <stop offset="1.760000e-02" style="stop-color:#2A6199"/>
+ <stop offset="0.1407" style="stop-color:#1C79B7"/>
+ <stop offset="0.2631" style="stop-color:#0A8CCA"/>
+ <stop offset="0.3837" style="stop-color:#0B97D4"/>
+ <stop offset="0.5" style="stop-color:#0E9AD8"/>
+ <stop offset="0.6163" style="stop-color:#0B97D4"/>
+ <stop offset="0.7369" style="stop-color:#0A8CCA"/>
+ <stop offset="0.8593" style="stop-color:#1C79B7"/>
+ <stop offset="0.9824" style="stop-color:#2A6199"/>
+ <stop offset="1" style="stop-color:#2C5D95"/>
+ </linearGradient>
+ <path class="st11" d="M105,170.3C74.1,90.9,89.3,65.9,90.3,64.4c2-2.5,4.4-4.4,6.9-5.9L182,4.6c-7.4,34.8,11.3,88.2,40.2,150.5
+ L105,170.3z"/>
+
+ <linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="434.9247" y1="-411.5564" x2="251.0804" y2="-179.9966" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2C5D95"/>
+ <stop offset="2.570000e-02" style="stop-color:#2A6199"/>
+ <stop offset="0.2053" style="stop-color:#1C79B7"/>
+ <stop offset="0.384" style="stop-color:#0A8CCA"/>
+ <stop offset="0.5599" style="stop-color:#0B97D4"/>
+ <stop offset="0.7296" style="stop-color:#0E9AD8"/>
+ <stop offset="0.7925" style="stop-color:#0B97D4"/>
+ <stop offset="0.8577" style="stop-color:#0A8CCA"/>
+ <stop offset="0.9239" style="stop-color:#1C79B7"/>
+ <stop offset="0.9905" style="stop-color:#2A6199"/>
+ <stop offset="1" style="stop-color:#2C5D95"/>
+ </linearGradient>
+ <path class="st12" d="M283.9,264.4c-42.7,0-85.3,3.4-127.5,9.3c1.5,2.5,21.1,35.3,35.3,57.4c136.3,209.8,200,201.5,203,201
+ c2.9-1,5.9-2.5,8.3-3.9l84.8-53.9C430,462,349.6,367.9,283.9,264.4z"/>
+
+ <linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="169.2539" y1="-54.6875" x2="133.4592" y2="74.1721" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2C5D95"/>
+ <stop offset="8.220001e-02" style="stop-color:#246EAB"/>
+ <stop offset="0.1808" style="stop-color:#1B79B9"/>
+ <stop offset="0.3007" style="stop-color:#1080C2"/>
+ <stop offset="0.5" style="stop-color:#0E81C5"/>
+ <stop offset="0.6993" style="stop-color:#1080C2"/>
+ <stop offset="0.8192" style="stop-color:#1B79B9"/>
+ <stop offset="0.9178" style="stop-color:#246EAB"/>
+ <stop offset="1" style="stop-color:#2C5D95"/>
+ </linearGradient>
+ <path class="st13" d="M102.1,172.8C71.2,93.3,86.4,68.3,87.3,66.9c2-2.5,4.4-4.4,6.9-5.9l88.2-56.9c-7.4,34.8,8.3,91.2,37.3,153
+ L102.1,172.8z"/>
+
+ <linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="574.6386" y1="-141.4589" x2="16.9401" y2="-141.4589" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2867A2"/>
+ <stop offset="1.280000e-02" style="stop-color:#256BA7"/>
+ <stop offset="0.1121" style="stop-color:#0B83C3"/>
+ <stop offset="0.2115" style="stop-color:#1797D8"/>
+ <stop offset="0.3099" style="stop-color:#25A3E2"/>
+ <stop offset="0.4066" style="stop-color:#27ABE7"/>
+ <stop offset="0.5" style="stop-color:#2AAEEA"/>
+ <stop offset="0.5934" style="stop-color:#27ABE7"/>
+ <stop offset="0.6901" style="stop-color:#25A3E2"/>
+ <stop offset="0.7885" style="stop-color:#1797D8"/>
+ <stop offset="0.8879" style="stop-color:#0B83C3"/>
+ <stop offset="0.9872" style="stop-color:#256BA7"/>
+ <stop offset="1" style="stop-color:#2867A2"/>
+ </linearGradient>
+ <path class="st14" d="M422.7,276.2c66.2,9.3,121.1,23,146.1,48V223.8c0-2.9-0.5-6.4-1-9.3c-0.5-1.5-13.2-27.5-93.2-44.6
+ L422.7,276.2z"/>
+
+ <linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="414.7642" y1="-133.5602" x2="574.166" y2="-142.1506" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2E5284"/>
+ <stop offset="6.100000e-03" style="stop-color:#2E5486"/>
+ <stop offset="9.120000e-02" style="stop-color:#29649D"/>
+ <stop offset="0.1876" style="stop-color:#236FAD"/>
+ <stop offset="0.3049" style="stop-color:#1D77B6"/>
+ <stop offset="0.5" style="stop-color:#1C78B9"/>
+ <stop offset="0.6951" style="stop-color:#1D77B6"/>
+ <stop offset="0.8124" style="stop-color:#236FAD"/>
+ <stop offset="0.9088" style="stop-color:#29649D"/>
+ <stop offset="0.9939" style="stop-color:#2E5486"/>
+ <stop offset="1" style="stop-color:#2E5284"/>
+ </linearGradient>
+ <path class="st15" d="M422.7,272.8c66.2,9.3,121.1,27,146.1,52v-105c0-2.9-0.5-6.4-1-9.3c-0.5-1.5-13.2-27.5-93.2-44.6
+ L422.7,272.8z"/>
+
+ <linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="16.4854" y1="-134.0589" x2="304.0796" y2="-134.0589" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2867A2"/>
+ <stop offset="2.250000e-02" style="stop-color:#256BA7"/>
+ <stop offset="0.1971" style="stop-color:#0B83C3"/>
+ <stop offset="0.3718" style="stop-color:#1797D8"/>
+ <stop offset="0.5447" style="stop-color:#25A3E2"/>
+ <stop offset="0.7147" style="stop-color:#27ABE7"/>
+ <stop offset="0.8788" style="stop-color:#2AAEEA"/>
+ <stop offset="0.9015" style="stop-color:#27ABE7"/>
+ <stop offset="0.9249" style="stop-color:#25A3E2"/>
+ <stop offset="0.9487" style="stop-color:#1797D8"/>
+ <stop offset="0.9728" style="stop-color:#0B83C3"/>
+ <stop offset="0.9969" style="stop-color:#256BA7"/>
+ <stop offset="1" style="stop-color:#2867A2"/>
+ </linearGradient>
+ <path class="st16" d="M362.9,156.1c-14.7-0.5-46.6-2-74-2c-250.5,0-278,57.9-279.5,60.8c-1,2.9-1,5.9-1,9.3v101
+ c24.5-24.5,78-37.8,143.2-47.6c42.2-5.9,84.3-9.3,127-9.8c7.8,0,15.7,0,23.5,0C302.1,267.4,377.6,156.6,362.9,156.1z"/>
+
+ <linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="218.7356" y1="-59.4308" x2="110.6509" y2="-44.2314" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2B3B6A"/>
+ <stop offset="1" style="stop-color:#2B3B6A"/>
+ </linearGradient>
+ <path class="st17" d="M219.7,148.3c-52.5,2.5-90.2,6.4-121.6,15.2l1.5,3.9c2.9-0.5,6.4-1.5,9.3-2c37.8-5.9,75.5-9.8,113.3-11.3
+ L219.7,148.3z"/>
+
+ <linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="328.6856" y1="-152.0787" x2="23.2429" y2="-109.1258" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2867A2"/>
+ <stop offset="3.820000e-02" style="stop-color:#2174B1"/>
+ <stop offset="0.1177" style="stop-color:#0B86C4"/>
+ <stop offset="0.2081" style="stop-color:#0A94D2"/>
+ <stop offset="0.3177" style="stop-color:#0C9BDB"/>
+ <stop offset="0.5" style="stop-color:#109EDE"/>
+ <stop offset="0.6823" style="stop-color:#0C9BDB"/>
+ <stop offset="0.7919" style="stop-color:#0A94D2"/>
+ <stop offset="0.8823" style="stop-color:#0B86C4"/>
+ <stop offset="0.9618" style="stop-color:#2174B1"/>
+ <stop offset="1" style="stop-color:#2867A2"/>
+ </linearGradient>
+ <path class="st18" d="M362.9,152.2c-14.7-0.5-46.6-2-74-2c-250.5,0-278,57.9-279.5,60.8c-1,2.9-1,5.9-1,9.3v104.9
+ c24.5-24.5,78-41.7,143.2-51.5c42.2-5.9,84.3-9.3,127-9.8c7.8,0,15.7,0,23.5,0C313.4,264,377.6,152.7,362.9,152.2z"/>
+
+ <linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="470.1697" y1="59.8145" x2="324.9195" y2="-190.3387" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2867A2"/>
+ <stop offset="0.1238" style="stop-color:#177EBC"/>
+ <stop offset="0.2516" style="stop-color:#0E91D1"/>
+ <stop offset="0.3797" style="stop-color:#10A2E1"/>
+ <stop offset="0.5064" style="stop-color:#18ACEA"/>
+ <stop offset="0.631" style="stop-color:#24B1ED"/>
+ <stop offset="0.7513" style="stop-color:#28B1ED"/>
+ <stop offset="0.7911" style="stop-color:#24B1ED"/>
+ <stop offset="0.8324" style="stop-color:#18ACEA"/>
+ <stop offset="0.8743" style="stop-color:#10A2E1"/>
+ <stop offset="0.9167" style="stop-color:#0E91D1"/>
+ <stop offset="0.959" style="stop-color:#177EBC"/>
+ <stop offset="1" style="stop-color:#2867A2"/>
+ </linearGradient>
+ <path class="st19" d="M288.8,272.3C357,169.8,407.5,62.5,395.2,4.1L480,58c2.5,1.5,4.9,3.4,6.9,5.9c1.5,2.5,34.8,57.4-101.5,267.2
+ c-9.8,15.7-19.1,33.8-22.6,35.3c-20.1-19.6-61.8-76.5-72.1-90.7C289.3,273.8,288.8,272.3,288.8,272.3z"/>
+
+ <linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="488.7314" y1="-66.1837" x2="435.847" y2="-165.4269" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2B3B6A"/>
+ <stop offset="1" style="stop-color:#2B3B6A"/>
+ </linearGradient>
+ <path class="st20" d="M477.6,166.4c-15.2,38.2-33.3,75-54.4,109.8l6.4,1c27-46.6,42.7-80.9,53.4-109.8L477.6,166.4z"/>
+
+ <linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="465.6816" y1="54.1673" x2="319.9706" y2="-219.2739" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2867A2"/>
+ <stop offset="3.820000e-02" style="stop-color:#2174B1"/>
+ <stop offset="0.1177" style="stop-color:#0B86C4"/>
+ <stop offset="0.2081" style="stop-color:#0A94D2"/>
+ <stop offset="0.3177" style="stop-color:#0C9BDB"/>
+ <stop offset="0.5" style="stop-color:#109EDE"/>
+ <stop offset="0.6823" style="stop-color:#0C9BDB"/>
+ <stop offset="0.7919" style="stop-color:#0A94D2"/>
+ <stop offset="0.8823" style="stop-color:#0B86C4"/>
+ <stop offset="0.9618" style="stop-color:#2174B1"/>
+ <stop offset="1" style="stop-color:#2867A2"/>
+ </linearGradient>
+ <path class="st21" d="M388.9,334.1c136.3-209.8,103-264.7,101.5-267.2c-2-2.5-4.4-4.4-6.9-5.9L395.2,4.1
+ C407.5,62,359,173.7,291.3,276.2c22.6,34.8,46.1,68.6,71.1,97.6C367.3,367.9,379.5,348.3,388.9,334.1z"/>
+
+ <linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="476.9116" y1="48.0479" x2="329.9179" y2="-227.801" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2867A2"/>
+ <stop offset="3.820000e-02" style="stop-color:#2174B1"/>
+ <stop offset="0.1177" style="stop-color:#0B86C4"/>
+ <stop offset="0.2081" style="stop-color:#0A94D2"/>
+ <stop offset="0.3177" style="stop-color:#0C9BDB"/>
+ <stop offset="0.5" style="stop-color:#109EDE"/>
+ <stop offset="0.6823" style="stop-color:#0C9BDB"/>
+ <stop offset="0.7919" style="stop-color:#0A94D2"/>
+ <stop offset="0.8823" style="stop-color:#0B86C4"/>
+ <stop offset="0.9618" style="stop-color:#2174B1"/>
+ <stop offset="1" style="stop-color:#2867A2"/>
+ </linearGradient>
+ <path class="st22" d="M359.9,377.2c0.5-0.5,1-0.5,1-1c-26-30.9-50-63.2-72.1-96.6c-0.5,0.5-1,1-1,2
+ C287.4,281.1,334.9,356.1,359.9,377.2z"/>
+
+ <linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="239.5275" y1="-265.5889" x2="277.2304" y2="-367.7321" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2B3B6A"/>
+ <stop offset="1" style="stop-color:#2B3B6A"/>
+ </linearGradient>
+ <path class="st23" d="M288.8,466.4c-1-1.5-51-60.3-74-95.1l-3.9,4.4c22.6,32.8,47.6,64.2,75,94.1L288.8,466.4z"/>
+
+ <linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="311.1502" y1="-160.5167" x2="355.5364" y2="-436.8544" gradientTransform="matrix(1 0 0 -1 -8.0854 105.5911)">
+ <stop offset="0" style="stop-color:#2E5284"/>
+ <stop offset="2.440000e-02" style="stop-color:#2C5C92"/>
+ <stop offset="8.880000e-02" style="stop-color:#2075B1"/>
+ <stop offset="0.1599" style="stop-color:#0B86C4"/>
+ <stop offset="0.2403" style="stop-color:#0A94D2"/>
+ <stop offset="0.3378" style="stop-color:#0E9CDA"/>
+ <stop offset="0.5" style="stop-color:#109EDE"/>
+ <stop offset="0.6718" style="stop-color:#0C9BDB"/>
+ <stop offset="0.7751" style="stop-color:#0A94D2"/>
+ <stop offset="0.8603" style="stop-color:#0B86C4"/>
+ <stop offset="0.9351" style="stop-color:#2174B1"/>
+ <stop offset="1" style="stop-color:#2C5D95"/>
+ </linearGradient>
+ <path class="st24" d="M360.9,376.2c-26-30.9-50-63.2-72.1-96.6c-2.5-3.9-5.4-7.8-7.8-11.8c-42.7,0-85.3,3.4-127.5,9.3
+ c1.5,2.5,21.1,35.3,35.3,57.4c136.3,209.8,200,201.5,203,201c2.9-1,5.9-2.5,8.3-3.9l87.8-56.9C452.1,466.4,406,428.7,360.9,376.2z
+ "/>
+ </g>
+</g>
+</svg>
diff --git a/resources.qrc b/resources.qrc
index 3a1b358c5923b5bce8d82f9b117062c4608360c0..efc77e06afa7ce8ae8c256f66c310563303498c9 100644
--- a/resources.qrc
+++ b/resources.qrc
@@ -134,5 +134,6 @@
<file>images/icons/delete-24px.svg</file>
<file>images/icons/settings_backup_restore-24px.svg</file>
<file>images/logo-jami-standard-coul.svg</file>
+ <file>images/logo-jami-standard-coul-white.svg</file>
</qresource>
</RCC>
diff --git a/src/appsettingsmanager.h b/src/appsettingsmanager.h
index 69817f1d5935afdc898ade7078826136984d82f6..53a1fbb9d3be52490ae3a0ce390acbe98904570e 100644
--- a/src/appsettingsmanager.h
+++ b/src/appsettingsmanager.h
@@ -37,6 +37,7 @@ const QString defaultDownloadPath = QStandardPaths::writableLocation(
X(EnableNotifications, true) \
X(EnableTypingIndicator, true) \
X(DisplayImagesChatview, true) \
+ X(EnableDarkTheme, false) \
X(AutoUpdate, true) \
X(NeverShowMeAgain, false)
diff --git a/src/constant/JamiStrings.qml b/src/constant/JamiStrings.qml
index 9c2ac2b2bbc773bfffe009c7e7052cfa4785b1ae..1a7ee0811ceb5181c9262e0f71071226ee2a903e 100644
--- a/src/constant/JamiStrings.qml
+++ b/src/constant/JamiStrings.qml
@@ -265,6 +265,7 @@ Item {
// SystemSettings
property string selectFolder: qsTr("Select a folder")
property string enableNotifications: qsTr("Enable notifications")
+ property string enableDarkTheme: qsTr("Enable dark theme")
property string keepMinimized: qsTr("Keep minimized on close")
property string tipRunStartup: qsTr("Run application on system startup")
property string runStartup: qsTr("Launch at startup")
diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml
index 8b8c0a5cf0920e681c2b74716758b93c4383c4fd..70ce90aa013906d05442d34275c5756b76a4567d 100644
--- a/src/constant/JamiTheme.qml
+++ b/src/constant/JamiTheme.qml
@@ -19,27 +19,32 @@
// JamiTheme as a singleton is to provide global theme property entry.
pragma Singleton
+import net.jami.Adapters 1.0
+import net.jami.Enums 1.0
+
import QtQuick 2.14
Item {
+ property bool darkTheme: SettingsAdapter.getAppValue(Settings.EnableDarkTheme)
+
// General
property color blackColor: "#000000"
property color whiteColor: "#ffffff"
property color transparentColor: "transparent"
- property color primaryForegroundColor: blackColor
- property color primaryBackgroundColor: whiteColor
- property color backgroundColor: lightGrey_
+ property color primaryForegroundColor: darkTheme? whiteColor : blackColor
+ property color primaryBackgroundColor: darkTheme? bgDarkMode_ : whiteColor
+ property color backgroundColor: darkTheme? bgSideBarDarkMode_ : lightGrey_
property color shadowColor: "#80000000"
- property color secondaryBackgroundColor: "white"
+ property color secondaryBackgroundColor: darkTheme? bgDarkMode_ : "white"
property color greyBorderColor: "#333"
- property color selectionBlue: "#109ede"
+ property color selectionBlue: darkTheme? "#0061a5" : "#109ede"
- property color hoverColor: "#c7c7c7"
- property color pressColor: "#c0c0c0"
- property color selectedColor: "#e0e0e0"
- property color editBackgroundColor: lightGrey_
+ property color hoverColor: darkTheme? "#515151" : "#c7c7c7"
+ property color pressColor: darkTheme? "#777" : "#c0c0c0"
+ property color selectedColor: darkTheme? "#0e81c5" : "#e0e0e0"
+ property color editBackgroundColor: darkTheme? "#373737" : lightGrey_
property color textColor: primaryForegroundColor
- property color tabbarBorderColor: "#e3e3e3"
+ property color tabbarBorderColor: darkTheme? "black" : "#e3e3e3"
// Side panel
property color presenceGreen: "#4cd964"
@@ -49,9 +54,9 @@ Item {
property color draftRed: "#cf5300"
// General buttons
- property color pressedButtonColor: "#a0a0a0"
- property color hoveredButtonColor: "#c7c7c7"
- property color normalButtonColor: "#e0e0e0"
+ property color pressedButtonColor: darkTheme? pressColor : "#a0a0a0"
+ property color hoveredButtonColor: darkTheme? hoverColor : "#c7c7c7"
+ property color normalButtonColor: darkTheme? backgroundColor : "#e0e0e0"
property color invertedPressedButtonColor: Qt.rgba(0, 0, 0, 0.5)
property color invertedHoveredButtonColor: Qt.rgba(0, 0, 0, 0.6)
@@ -60,13 +65,13 @@ Item {
property color buttonTintedBlue: "#00aaff"
property color buttonTintedBlueHovered: "#0e81c5"
property color buttonTintedBluePressed: "#273261"
- property color buttonTintedGrey: "#999"
+ property color buttonTintedGrey: darkTheme? "#555" : "#999"
property color buttonTintedGreyHovered: "#777"
property color buttonTintedGreyPressed: "#777"
- property color buttonTintedGreyInactive: "#bbb"
- property color buttonTintedBlack: "#333"
- property color buttonTintedBlackHovered: "#111"
- property color buttonTintedBlackPressed: "#000"
+ property color buttonTintedGreyInactive: darkTheme? "#777" : "#bbb"
+ property color buttonTintedBlack: darkTheme? "#fff" : "#333"
+ property color buttonTintedBlackHovered: darkTheme? "#ddd" : "#111"
+ property color buttonTintedBlackPressed: darkTheme? "#ddd" : "#000"
property color buttonTintedRed: "red"
property color buttonTintedRedHovered: "#c00"
property color buttonTintedRedPressed: "#b00"
@@ -100,9 +105,27 @@ Item {
property color rubberBandSelectionBlue: "steelblue"
property color screenSelectionBorderGreen: "green"
+ // Chatview
+ property color jamiLightBlue: darkTheme? "#003b4e" : Qt.rgba(59, 193, 211, 0.3)
+ property color jamiDarkBlue: darkTheme? "#28b1ed" : "#003b4e"
+ property color chatviewTextColor: textColor
+ property color timestampColor: darkTheme? "#bbb" : "#333"
+ property color messageOutBgColor: darkTheme? "#28b1ed" : "#cfd8dc"
+ property color messageOutTxtColor: textColor
+ property color messageInBgColor: darkTheme? "#616161" : "#cfebf5"
+ property color messageInTxtColor: textColor
+ property color fileOutTimestampColor: darkTheme? "#eee" : "#555"
+ property color fileInTimestampColor: darkTheme? "#999" : "#555"
+ property color chatviewBgColor: darkTheme? "#202020" : "white"
+ property color nonActionIconColor: darkTheme? "white" : "#212121"
+ property color placeholderTextColor: darkTheme? "#2b2b2b" : "#d3d3d3"
+ property color inviteHoverColor: darkTheme? blackColor : whiteColor
+ property color hairlineColor: darkTheme? "262626" : "#d9d9d9"
+ property color chatviewButtonColor: darkTheme? "#28b1ed" : "#003b4e"
+
// Font.
- property color faddedFontColor: "#a0a0a0"
- property color faddedLastInteractionFontColor: "#505050"
+ property color faddedFontColor: darkTheme? "#c0c0c0" : "#a0a0a0"
+ property color faddedLastInteractionFontColor: darkTheme? "#c0c0c0" : "#505050"
// Jami theme colors
function rgb256(r, g, b) {
@@ -110,13 +133,15 @@ Item {
}
property color darkGrey: rgb256(63, 63, 63)
- property color blueLogo_: rgb256(0, 7, 71)
+ property color blueLogo_: darkTheme? "white" : rgb256(0, 7, 71)
property color lightGrey_: rgb256(242, 242, 242)
property color grey_: rgb256(160, 160, 160)
property color red_: rgb256(251, 72, 71)
property color urgentOrange_: rgb256(255, 165, 0)
property color green_: rgb256(127, 255, 0)
property color presenceGreen_: rgb256(76, 217, 100)
+ property color bgSideBarDarkMode_: rgb256(24, 24, 24)
+ property color bgDarkMode_: rgb256(32, 32, 32)
property int fadeDuration: 150
@@ -138,4 +163,8 @@ Item {
property int preferredDialogWidth: 400
property int preferredDialogHeight: 300
property int minimumPreviewWidth: 120
+
+ function setTheme(dark) {
+ darkTheme = dark
+ }
}
diff --git a/src/mainview/components/AboutPopUp.qml b/src/mainview/components/AboutPopUp.qml
index 8d758c49461c3fe54936b90a84a45e050fd5c992..a5a80d8e89a53fc99ff67a78e533101f680159e7 100644
--- a/src/mainview/components/AboutPopUp.qml
+++ b/src/mainview/components/AboutPopUp.qml
@@ -68,7 +68,7 @@ ModalPopup {
smooth: true
antialiasing: true
- source: "qrc:/images/logo-jami-standard-coul.svg"
+ source: JamiTheme.darkTheme? "qrc:/images/logo-jami-standard-coul-white.svg" : "qrc:/images/logo-jami-standard-coul.svg"
}
Label {
diff --git a/src/mainview/components/MessageWebView.qml b/src/mainview/components/MessageWebView.qml
index fdefc577e18067a7d28c8d8ff86c29655820421b..afaab3e27bf2acf79c928deea0aa7f009bc818a6 100644
--- a/src/mainview/components/MessageWebView.qml
+++ b/src/mainview/components/MessageWebView.qml
@@ -62,6 +62,34 @@ Rectangle {
messageWebViewHeader.resetBackToWelcomeViewButtonSource(reset)
}
+ function updateChatviewTheme() {
+ var theme = 'setTheme("\
+ --jami-light-blue:' + JamiTheme.jamiLightBlue + ';\
+ --jami-dark-blue: ' + JamiTheme.jamiDarkBlue + ';\
+ --text-color: ' + JamiTheme.chatviewTextColor + ';\
+ --timestamp-color:' + JamiTheme.timestampColor + ';\
+ --message-out-bg:' + JamiTheme.messageOutBgColor + ';\
+ --message-out-txt:' + JamiTheme.messageOutTxtColor + ';\
+ --message-in-bg:' + JamiTheme.messageInBgColor + ';\
+ --message-in-txt:' + JamiTheme.messageInTxtColor + ';\
+ --file-in-timestamp-color:' + JamiTheme.fileOutTimestampColor + ';\
+ --file-out-timestamp-color:' + JamiTheme.fileInTimestampColor + ';\
+ --bg-color:' + JamiTheme.chatviewBgColor + ';\
+ --non-action-icon-color:' + JamiTheme.nonActionIconColor + ';\
+ --placeholder-text-color:' + JamiTheme.placeholderTextColor + ';\
+ --invite-hover-color:' + JamiTheme.inviteHoverColor + ';\
+ --hairline-color:' + JamiTheme.hairlineColor + ';")'
+ messageWebView.runJavaScript(theme);
+ }
+
+ Connections {
+ target: JamiTheme
+
+ function onDarkThemeChanged() {
+ updateChatviewTheme()
+ }
+ }
+
JamiFileDialog {
id: jamiFileDialog
@@ -209,7 +237,7 @@ Rectangle {
width: messageWebViewRect.width
height: messageWebViewRect.height - messageWebViewHeaderPreferredHeight
- backgroundColor: JamiTheme.backgroundColor
+ backgroundColor: "transparent"
settings.javascriptEnabled: true
settings.javascriptCanOpenWindows: true
@@ -264,6 +292,7 @@ Rectangle {
function() {
messageWebView.runJavaScript("init_i18n();")
MessagesAdapter.setDisplayLinks()
+ updateChatviewTheme()
messageWebView.runJavaScript("displayNavbar(false);")
jsLoaded = true
})
diff --git a/src/mainview/components/SelectScreen.qml b/src/mainview/components/SelectScreen.qml
index 60c06aadeba3d59b4010aabc72be36a1758e673f..e69de84922cfa5da4bc874334b0b443c54125688 100644
--- a/src/mainview/components/SelectScreen.qml
+++ b/src/mainview/components/SelectScreen.qml
@@ -66,6 +66,8 @@ Window {
anchors.fill: parent
+ color: JamiTheme.backgroundColor
+
Text {
id: screenListText
@@ -76,6 +78,7 @@ Window {
font.pointSize: JamiTheme.textFontSize + 2
font.bold: true
text: JamiStrings.selectScreen
+ color: JamiTheme.textColor
}
ScrollView {
@@ -129,6 +132,8 @@ Window {
property string borderColor: JamiTheme.tabbarBorderColor
+ color: JamiTheme.secondaryBackgroundColor
+
height: screenSelectionScrollView.height
width: screenSelectionScrollView.width / 2 -
screenInfoRow.spacing / 2 - JamiTheme.preferredMarginSize
@@ -164,6 +169,7 @@ Window {
font.pointSize: JamiTheme.textFontSize - 2
text: qsTr("Screen") + " " + calculateScreenNumber(index, false)
+ color: JamiTheme.textColor
}
MouseArea {
@@ -187,6 +193,8 @@ Window {
property string borderColor: JamiTheme.tabbarBorderColor
+ color: JamiTheme.secondaryBackgroundColor
+
height: screenSelectionScrollView.height
width: screenSelectionScrollView.width / 2 -
screenInfoRow.spacing / 2 - JamiTheme.preferredMarginSize
@@ -230,6 +238,7 @@ Window {
font.pointSize: JamiTheme.textFontSize - 2
text: qsTr("Screen") + " " + (calculateScreenNumber(index, true))
+ color: JamiTheme.textColor
}
MouseArea {
diff --git a/src/mainview/components/WelcomePage.qml b/src/mainview/components/WelcomePage.qml
index 191d99c93bbbed4437396b3ee71b6d004be52ff1..a736c36cf9d45f9bc0a629b781edeb4bb9a36f97 100644
--- a/src/mainview/components/WelcomePage.qml
+++ b/src/mainview/components/WelcomePage.qml
@@ -54,7 +54,7 @@ Rectangle {
smooth: true
antialiasing: true
- source: "qrc:/images/logo-jami-standard-coul.svg"
+ source: JamiTheme.darkTheme? "qrc:/images/logo-jami-standard-coul-white.svg" : "qrc:/images/logo-jami-standard-coul.svg"
}
Label {
diff --git a/src/settingsview/components/SystemSettings.qml b/src/settingsview/components/SystemSettings.qml
index 997c6f42413aa5256367d698cf78597e30e81778..aa9d00990f8f0cb2439e7bcda41caca805f48a5e 100644
--- a/src/settingsview/components/SystemSettings.qml
+++ b/src/settingsview/components/SystemSettings.qml
@@ -64,6 +64,24 @@ ColumnLayout {
verticalAlignment: Text.AlignVCenter
}
+ ToggleSwitch {
+ id: darkThemeCheckBox
+ Layout.fillWidth: true
+ Layout.leftMargin: JamiTheme.preferredMarginSize
+
+ checked: SettingsAdapter.getAppValue(Settings.EnableDarkTheme)
+
+ labelText: qsTr("Enable dark theme")
+ fontPointSize: JamiTheme.settingsFontSize
+
+ tooltipText: JamiStrings.enableDarkTheme
+
+ onSwitchToggled: {
+ JamiTheme.setTheme(checked)
+ SettingsAdapter.setAppValue(Settings.Key.EnableDarkTheme, checked)
+ }
+ }
+
ToggleSwitch {
id: notificationCheckBox
Layout.fillWidth: true
diff --git a/src/wizardview/components/WelcomePage.qml b/src/wizardview/components/WelcomePage.qml
index 7b87b587e203334e954c9167f88392804e63f91b..d9c1ab91a36782e426545d15cbeae373a9e727df 100644
--- a/src/wizardview/components/WelcomePage.qml
+++ b/src/wizardview/components/WelcomePage.qml
@@ -71,7 +71,7 @@ Rectangle {
smooth: true
antialiasing: true
- source: "qrc:/images/logo-jami-standard-coul.svg"
+ source: JamiTheme.darkTheme? "qrc:/images/logo-jami-standard-coul-white.svg" : "qrc:/images/logo-jami-standard-coul.svg"
}
MaterialButton {