Change language picker icon (#4503)

* Added dark mode transition time when switching from light or dark mode as suggested by #4441.

Also fixes when the footer would have no margin in dark mode.

* Remove commented line

* Update to comply with linters

* Slight changes after testing on mobile.

- Changed body background from hex code to variable.
- Only remove footer on small screens.

* Use languageicon.org's language picker icon

* Change image alt

* Use dark and light SVGs for language picker icons

* Optimize SVG and insert directly into HTML

* Add transition time variable

Since dark mode transition time is used in multiple places, I added a variable so if it needs to be changed it can be changed easily.

* Use optimized SVG from XhmikosR

* Decrease svg viewbox, and scale down

* Update header.hbs

* Update header.hbs

Co-authored-by: Rich Trott <[email protected]>
Co-authored-by: XhmikosR <[email protected]>

Author: 3 people

Diff for: layouts/css/_variables.scss

@@ -19,6 +19,7 @@ $black-alpha-12: #00000012;
 $black-alpha-0f: #0000000f;
 
 // for dark-theme
+$dark-transition-time: .24s;
 $dark-black: #090c15;
 $dark-black2: #233056;
 $dark-black3: #23305671;

Diff for: layouts/css/layout/_dark-theme.scss

@@ -146,4 +146,8 @@
       background-color: $dark-code-background;
     }
   }
+
+  .header-background-fill {
+    fill: $dark-black2;
+  }
 }

Diff for: layouts/css/page-modules/_header.scss

@@ -3,7 +3,7 @@ header {
   text-align: center;
   position: relative;
 
-  > .container {
+  >.container {
     overflow: visible;
   }
 
@@ -29,6 +29,11 @@ header {
     }
   }
 
+  .header-background-fill {
+    transition: fill $dark-transition-time ease;
+    fill: $node-gray;
+  }
+
   .switchers {
     display: flex;
     align-items: center;

Diff for: layouts/css/styles.scss

@@ -25,7 +25,7 @@
 @import "vendor/prism-tomorrow";
 
 * {
-  transition: background-color .24s ease;
+  transition: background-color $dark-transition-time ease;
 }
 
 article a {

Diff for: layouts/partials/header.hbs

@@ -26,9 +26,14 @@
     <div class="switchers">
       <button class="dark-theme-switcher" type="button" title="{{site.toggleText}}" aria-label="Toggle dark/light mode"></button>
       <button class="lang-picker-toggler" type="button" aria-controls="lang-picker" aria-expanded="false">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="25" height="25" aria-hidden="true" focusable="false" fill="currentColor">
-          <path d="M217.982 201.586h-64.499c-5.537 0-10.026 4.489-10.026 10.026s4.489 10.026 10.026 10.026h53.547c-4.72 25.263-26.935 44.446-53.547 44.446-30.037 0-54.473-24.436-54.473-54.473s24.436-54.473 54.473-54.473c14.55 0 28.229 5.667 38.518 15.955 3.916 3.916 10.264 3.916 14.178 0 3.916-3.916 3.916-10.264 0-14.178-14.077-14.077-32.791-21.829-52.697-21.829-41.094 0-74.525 33.431-74.525 74.525 0 41.094 33.431 74.525 74.525 74.525s74.525-33.431 74.525-74.525c.001-5.536-4.488-10.025-10.025-10.025z"/>
-          <path d="M470.331 92.24H269.728l-26.935-81.355a10.025 10.025 0 00-9.518-6.875H41.669C18.693 4.01 0 22.703 0 45.679v332.412c0 22.976 18.693 41.669 41.669 41.669h203.145l27.073 81.369a10.026 10.026 0 009.513 6.861h188.932c22.976 0 41.669-18.693 41.669-41.669V133.909c-.001-22.976-18.694-41.669-41.67-41.669zM41.669 399.708c-11.919 0-21.616-9.697-21.616-21.616V45.679c0-11.919 9.697-21.616 21.616-21.616h184.364l70.691 213.516a.366.366 0 00.015.043l53.664 162.086H41.669zm295.78-116.433c.805 1.11 10.824 14.877 26.355 34.066-4.377 5.756-9.015 11.474-13.91 17.036l-29.712-89.74h87.441c-6.196 13.031-16.938 33.813-31.692 55.736-13.553-16.921-22.069-28.622-22.249-28.87-3.251-4.482-9.519-5.481-14.002-2.23-4.482 3.25-5.48 9.518-2.231 14.002zM265.946 419.76h75.162l-55.503 59.084-19.659-59.084zm226.002 46.561c0 11.919-9.697 21.616-21.616 21.616H304.575l67.015-71.339-.004-.003c.293-.312.571-.64.823-.991a10.025 10.025 0 001.39-9.022l-16.688-50.402c7.073-7.406 13.68-15.143 19.805-22.965 13.299 15.772 29.037 33.446 45.778 50.187 1.957 1.957 4.524 2.937 7.089 2.937s5.132-.979 7.089-2.937c3.916-3.916 3.916-10.264 0-14.178-17.461-17.461-34.013-36.244-47.687-52.632 21.251-30.503 35.033-59.504 40.535-71.954h21.454c5.537 0 10.026-4.489 10.026-10.026s-4.489-10.026-10.026-10.026h-66.173v-18.047c0-5.537-4.489-10.026-10.026-10.026s-10.026 4.489-10.026 10.026v18.046h-51.406l-37.178-112.292H470.33c11.919 0 21.616 9.697 21.616 21.616v332.412z"/>
+        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="22" height="25" aria-hidden="true" focusable="false" viewBox="0 0 512 593.282">
+          <path fill="none" d="m12045.7 24348.4-9327.4 3292V7339.5l9327.4 3017.7v13991.2" style="fill:#000;fill-opacity:0;fill-rule:nonzero;stroke-width:500;stroke:#fff" transform="matrix(.02123 0 0 -.02123 0 593.282)"/>
+          <path d="m11821.8 24358.6 9684.5 3291.9V7349.6l-9684.5 3017.7v13991.3M299.602 3785.7 11821.8 7626.2v16734.6L299.602 20520.3V3785.7" class="header-background-fill" style="fill-opacity:1;fill-rule:nonzero;stroke:none" transform="matrix(.02123 0 0 -.02123 0 593.282)"/>
+          <path d="m17072.1 3532.9 1633-2686.599L19566.2 3342ZM4217.4 18592.5c-61.2 60.1 79.7-491.1 275.8-689.4 347.7-350.8 619.3-396 763.9-401.8 320-12.8 714.9 79.7 949.4 178 226.9 96.8 624.5 299.8 775 595.9m3049.5-6271.9c-90.8 33-1969.4 811.2-2235.7 938.7-217.9 104.8-752.2 330.7-1003.6 433.3 708.1 1091.8 1155.1 1915.7 1214.6 2041.2 110.1 229.6 859.6 1696.2 877.1 1786.5 17 91.5 38.3 429.5 21.8 509.8-16.5 81.9-291.3-75.5-664.4-202-373.7-126-1083.9-587.9-1358.2-645.8-275.3-57.4-1155.1-390.7-1605.3-540.1-450.2-149.4-1301.8-409.3-1652.1-503.9-350.8-94.6-657-102.1-853.2-161.6 0 0 26.1-274.8 78.2-357.2 51.5-82.4 237.1-284.4 452.9-340.8 215.8-56.8 573-34 735.7 3.2 162.6 37.8 444.3 175.4 482.1 235.5 38.2 61.1-19.7 249.3 44.6 306.2 64.9 56.3 922.3 256.7 1246 354.5 323.7 99.5 1562.8 526.3 1730.8 504.5-53.2-176.5-1049.9-2150.7-1370.9-2739.7-321.1-588.9-2186.3-3179.8-2583.4-3636.4-301.4-347.1-1031.8-1235.3-1284.8-1435.7 63.8-17.6 516.1 21.2 598.5 72.2 513.5 316.3 1368.8 1381 1644.2 1705.3 818.6 960 1537.8 1968.4 2108.1 2833.8h.6c111.1-46.3 1009.4-778.2 1243.8-940.4 234.4-162.1 1159.4-678.2 1359.8-763.8 200.4-86.7 970.6-441.8 1003-321.6 32.4 121.2-139.3 829.8-230.2 864.3" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="matrix(.02123 0 0 -.02123 0 593.282)"/>
+          <path d="M5690 2220c180-110 350-200 540-290 380-190 810-390 1220-540 560-210 1120-380 1680-510 310-70 650-130 980-180 30 0 920-110 1100-110h900c350 30 680 50 1030 100 280 40 590 90 890 160 220 50 450 100 670 170 210 60 450 140 680 220 150 50 310 120 470 180 130 60 290 130 440 190 180 80 390 190 590 290 160 80 340 180 510 280 130 70 430 300 590 300 180 0 300-160 300-300 0-290-390-380-570-510-190-130-420-230-620-340-400-210-810-390-1200-540-510-190-1070-370-1570-490-190-40-380-90-570-120-100-20-1140-180-1430-180h-1320c-350 30-720 70-1070 120-310 50-640 110-950 180-240 50-500 120-730 190-400 110-790 250-1170 400-690 260-1410 600-2090 1050-120 80-130 160-130 250 0 150 110 290 290 290 160 0 480-230 540-260m6430 22180V7600c-10-50-30-100-70-150-20-30-60-70-90-80C11710 7270 450 3490 300 3490c-120 0-230 80-290 210 0 10-10 20-10 40v16810c20 50 30 120 70 160 80 110 220 130 310 160 170 60 11260 3780 11420 3780 100 0 320-70 320-250zm-610-16550L610 4220v16080l10900 3630V7850" style="fill:#fff;fill-opacity:1;fill-rule:evenodd;stroke:none" transform="matrix(.02123 0 0 -.02123 0 593.282)"/>
+          <path d="M21810 27620V7390c-10-230-170-330-320-330-130 0-1070 320-1230 370-1260 390-2530 780-3780 1170-280 90-570 180-840 270-240 70-500 150-740 230-1070 330-2160 660-3230 1020-40 10-140 150-140 180v14130c20 50 40 110 90 150 80 90 3510 1230 4860 1680 360 130 4870 1680 5010 1680 180 0 320-130 320-320zm-610-19850-9070 2820v13550l9070 3080V7770" style="fill:#fff;fill-opacity:1;fill-rule:evenodd;stroke:none" transform="matrix(.02123 0 0 -.02123 0 593.282)"/>
+          <path d="M24112.1 3532.9 11995 7395l50.7 16813 12066.4-3840.5V3532.9" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="matrix(.02123 0 0 -.02123 0 593.282)"/>
+          <path d="m17289.8 19408.1 1561.1-472.9L21695 8685l-1603.5 486.5-576.1 2104.3-3313.8 1004.4L15489 10566l-1604 486.6zm713.7-2713.6-1189.3-2874.6 2186.5-662.8z" class="header-background-fill" style="fill-opacity:1;fill-rule:evenodd;stroke:none" transform="matrix(.02123 0 0 -.02123 0 593.282)"/>
         </svg>
         <span class="sr-only">Toggle Language</span>
       </button>