From a39da8703a288552359fa8c15114ace01ecbcfcc Mon Sep 17 00:00:00 2001
From: Aurindam Jana <aurindam.jana@slint.dev>
Date: Wed, 11 Dec 2024 11:07:18 +0100
Subject: [PATCH] Docs: Cosmetic changes

---
 docs/astro/astro.config.mjs                   |  7 +-
 .../src/assets/slint-logo-simple-dark.svg     | 17 +++++
 .../src/assets/slint-logo-simple-light.svg    | 17 +++++
 docs/astro/src/components/Footer.astro        | 22 ++++--
 docs/astro/src/components/Header.astro        |  2 +-
 docs/astro/src/components/ThemeSelect.astro   | 75 +++++++++++++++++++
 6 files changed, 129 insertions(+), 11 deletions(-)
 create mode 100644 docs/astro/src/assets/slint-logo-simple-dark.svg
 create mode 100644 docs/astro/src/assets/slint-logo-simple-light.svg
 create mode 100644 docs/astro/src/components/ThemeSelect.astro

diff --git a/docs/astro/astro.config.mjs b/docs/astro/astro.config.mjs
index a2b4858fe05..38f7e403596 100644
--- a/docs/astro/astro.config.mjs
+++ b/docs/astro/astro.config.mjs
@@ -34,10 +34,11 @@ export default defineConfig({
     },
     integrations: [
         starlight({
-            title: "Docs",
+            title: "Slint Docs",
             logo: {
-                light: "./src/assets/slint-logo-simple-light.webp",
-                dark: "./src/assets/slint-logo-simple-dark.webp",
+                light: "./src/assets/slint-logo-simple-light.svg",
+                dark: "./src/assets/slint-logo-simple-dark.svg",
+                replacesTitle: true
             },
             customCss: ["./src/styles/custom.css"],
 
diff --git a/docs/astro/src/assets/slint-logo-simple-dark.svg b/docs/astro/src/assets/slint-logo-simple-dark.svg
new file mode 100644
index 00000000000..44c335c706f
--- /dev/null
+++ b/docs/astro/src/assets/slint-logo-simple-dark.svg
@@ -0,0 +1,17 @@
+<svg width="141" height="42" viewBox="0 0 141 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_151)">
+<path d="M5.48586 41.6226L28.5963 25.5046C28.5963 25.5046 29.6393 24.9017 29.6393 23.9503C29.6393 22.6832 28.3204 22.2711 28.3204 22.2711L15.6065 17.2077C15.1528 17.0288 14.5285 17.5304 15.1131 18.1662L19.3222 22.4053C19.3222 22.4053 20.4914 23.5617 20.4914 24.32C20.4914 25.0783 19.7735 25.7542 19.7735 25.7542L4.45696 40.6476C3.91211 41.1775 4.64871 42.1384 5.48586 41.6226Z" fill="#2379F4"/>
+<path d="M24.1534 0.760004L1.04293 16.8757C1.04293 16.8757 0 17.4786 0 18.43C0 19.697 1.31886 20.1092 1.31886 20.1092L14.0328 25.1749C14.4864 25.3515 15.1131 24.8499 14.5262 24.2164L10.3171 19.9632C10.3171 19.9632 9.14785 18.8092 9.14785 18.0485C9.14785 17.2878 9.86574 16.6143 9.86574 16.6143L25.1729 1.73264C25.7272 1.20276 24.9929 0.241891 24.1534 0.760004Z" fill="#2379F4"/>
+<path d="M60.924 25.868C59.4368 24.7437 57.3527 24.004 54.672 23.649L49.7309 23.0138C48.4052 22.8492 47.388 22.5478 46.6793 22.1095C46.3434 21.918 46.0663 21.6371 45.8783 21.2975C45.6903 20.958 45.5986 20.5729 45.6134 20.1845C45.6134 18.1984 47.4862 17.2063 51.232 17.2082C53.3615 17.1784 55.479 17.5335 57.484 18.2567C58.0994 18.4743 58.6917 18.753 59.2522 19.0888C59.5519 19.266 59.8349 19.4703 60.0978 19.6991C60.2561 19.628 60.4035 19.5346 60.5357 19.4217C60.7416 19.2606 60.9266 19.0743 61.0865 18.8669C61.2735 18.623 61.4359 18.361 61.5713 18.0847C61.7229 17.7656 61.7974 17.4148 61.7888 17.0612C61.7888 15.8573 60.8607 14.8809 59.0043 14.132C57.148 13.3831 54.5398 13.0132 51.1796 13.0225C49.4559 12.9872 47.7356 13.1925 46.0678 13.6327C44.8283 13.9562 43.6666 14.5289 42.6526 15.3164C41.8226 15.9693 41.1612 16.8143 40.7247 17.7796C40.3196 18.7097 40.1131 19.7152 40.1187 20.7309C40.0891 21.8015 40.3138 22.8638 40.7742 23.8293C41.204 24.6851 41.8254 25.4286 42.5892 26.0012C43.4334 26.6195 44.376 27.0886 45.3765 27.3881C46.5364 27.7462 47.7297 27.9832 48.9377 28.0954L52.7165 28.5365C54.4608 28.7214 55.6717 29.0542 56.3493 29.535C56.6811 29.7641 56.9488 30.0753 57.1268 30.4386C57.3047 30.802 57.387 31.2053 57.3656 31.6099C57.3656 32.6842 56.8331 33.4406 55.7681 33.8788C54.7032 34.3171 53.3261 34.5362 51.6368 34.5362C50.4372 34.5434 49.2393 34.4459 48.0564 34.245C47.0651 34.0744 46.0862 33.8381 45.1259 33.5377C44.3934 33.307 43.6736 33.0376 42.9693 32.7305C42.547 32.5575 42.1413 32.3458 41.7575 32.098L39.6753 35.8538C40.0706 36.1379 40.4921 36.3832 40.934 36.5861C41.7576 36.9803 42.608 37.315 43.4789 37.5874C44.6929 37.9687 45.9303 38.2699 47.1833 38.4889C48.7512 38.762 50.3403 38.8929 51.9315 38.88C55.5469 38.88 58.3167 38.1478 60.241 36.6832C61.1602 36.0189 61.9038 35.1377 62.4065 34.1169C62.9092 33.0961 63.1558 31.9667 63.1246 30.8276C63.143 28.6456 62.4095 26.9924 60.924 25.868Z" fill="white"/>
+<path d="M72.164 2.22674C71.2276 2.22674 70.5115 2.44032 69.9827 2.86194C69.4539 3.28357 69.2087 3.93541 69.2087 4.80362V38.1893H74.7309V2.76486C74.5684 2.70106 74.2462 2.59288 73.7614 2.44864C73.2427 2.29616 72.7044 2.22139 72.164 2.22674Z" fill="white"/>
+<path d="M84.9243 2.71494C84.4838 2.70974 84.0467 2.79328 83.6387 2.96066C83.2306 3.12805 82.86 3.3759 82.5485 3.68963C82.237 4.00337 81.9909 4.37666 81.8247 4.78757C81.6585 5.19848 81.5755 5.6387 81.5807 6.08236C81.5835 6.63498 81.7212 7.17841 81.9819 7.66471C82.2425 8.15102 82.618 8.56525 83.0751 8.87086C83.5323 9.17648 84.0571 9.36408 84.6033 9.41712C85.1495 9.47017 85.7002 9.38702 86.207 9.17501C86.7137 8.96301 87.1608 8.62866 87.5089 8.20147C87.857 7.77428 88.0954 7.26738 88.203 6.72549C88.3105 6.18359 88.2841 5.62336 88.1258 5.09421C87.9676 4.56506 87.6825 4.08327 87.2957 3.69133C86.9875 3.3742 86.6181 3.12398 86.2103 2.95606C85.8024 2.78814 85.3648 2.70608 84.9243 2.71494V2.71494Z" fill="white"/>
+<path d="M85.1088 13.6993C84.1724 13.6993 83.4563 13.9045 82.9275 14.3095C82.3987 14.7145 82.1618 15.3636 82.1618 16.2789V38.1921H87.684V14.2318C87.5215 14.1653 87.1993 14.0599 86.7145 13.9129C86.1923 13.7639 85.6515 13.6919 85.1088 13.6993Z" fill="white"/>
+<path d="M115.149 15.7685C114.044 14.8424 112.768 14.1457 111.395 13.7187C109.859 13.2348 108.256 12.9961 106.647 13.0113C105.045 12.9945 103.451 13.2333 101.923 13.7187C100.558 14.1495 99.2901 14.8459 98.1913 15.7685C97.138 16.6624 96.292 17.7777 95.7125 19.0361C95.0997 20.4093 94.7968 21.9023 94.8256 23.4076V38.1921H100.348V24.8223C100.348 22.6032 100.873 20.9195 101.923 19.7711C102.973 18.6228 104.548 18.0458 106.647 18.0403C108.712 18.0403 110.279 18.6172 111.345 19.7711C112.412 20.925 112.946 22.6088 112.946 24.8223V38.1921H118.468V23.4076C118.497 21.9051 118.204 20.4139 117.608 19.0361C117.042 17.775 116.202 16.6583 115.149 15.7685V15.7685Z" fill="white"/>
+<path d="M138.766 32.675C138.224 33.0274 137.637 33.3072 137.023 33.5071C136.183 33.8049 135.299 33.9542 134.409 33.9482C133.846 33.9507 133.285 33.8855 132.737 33.754C132.225 33.6333 131.745 33.4003 131.333 33.0716C130.915 32.7267 130.59 32.2812 130.388 31.7763C130.14 31.1149 130.025 30.4107 130.049 29.7042V18.817H139.35C139.498 18.4918 139.628 18.1584 139.739 17.8184C139.903 17.3222 139.985 16.802 139.981 16.2789C139.981 15.4468 139.763 14.7921 139.325 14.3539C138.888 13.9156 138.136 13.6993 137.07 13.6993H130.046V7.31947C129.884 7.2529 129.553 7.14749 129.052 7.00048C128.524 6.85159 127.978 6.77783 127.43 6.78135C126.672 6.7383 125.921 6.95322 125.298 7.39159C124.769 7.7827 124.522 8.429 124.522 9.35268V30.8193C124.522 33.2233 125.249 35.1649 126.703 36.6443C128.157 38.1237 130.305 38.8634 133.148 38.8634C134.073 38.8666 134.996 38.7737 135.902 38.586C136.677 38.4248 137.438 38.2051 138.18 37.9286C138.777 37.7056 139.352 37.427 139.898 37.0965C140.367 36.8024 140.734 36.5583 141 36.3642L138.766 32.675Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1_151">
+<rect width="141" height="42" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/astro/src/assets/slint-logo-simple-light.svg b/docs/astro/src/assets/slint-logo-simple-light.svg
new file mode 100644
index 00000000000..b9a466515e1
--- /dev/null
+++ b/docs/astro/src/assets/slint-logo-simple-light.svg
@@ -0,0 +1,17 @@
+<svg width="141" height="42" viewBox="0 0 141 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_149)">
+<path d="M5.48586 41.6226L28.5963 25.5046C28.5963 25.5046 29.6393 24.9017 29.6393 23.9503C29.6393 22.6832 28.3204 22.2711 28.3204 22.2711L15.6065 17.2077C15.1528 17.0288 14.5285 17.5304 15.1131 18.1662L19.3222 22.4053C19.3222 22.4053 20.4914 23.5617 20.4914 24.32C20.4914 25.0783 19.7735 25.7542 19.7735 25.7542L4.45696 40.6476C3.91211 41.1775 4.64871 42.1384 5.48586 41.6226Z" fill="#2379F4"/>
+<path d="M24.1534 0.760004L1.04293 16.8757C1.04293 16.8757 0 17.4786 0 18.43C0 19.697 1.31886 20.1092 1.31886 20.1092L14.0328 25.1749C14.4864 25.3515 15.1131 24.8499 14.5262 24.2164L10.3171 19.9632C10.3171 19.9632 9.14785 18.8092 9.14785 18.0485C9.14785 17.2878 9.86574 16.6143 9.86574 16.6143L25.1729 1.73264C25.7272 1.20276 24.9929 0.241891 24.1534 0.760004Z" fill="#2379F4"/>
+<path d="M60.924 25.868C59.4368 24.7437 57.3527 24.004 54.672 23.649L49.7309 23.0138C48.4052 22.8492 47.388 22.5478 46.6793 22.1095C46.3434 21.9179 46.0663 21.637 45.8783 21.2975C45.6903 20.958 45.5986 20.5729 45.6134 20.1845C45.6134 18.1984 47.4862 17.2063 51.232 17.2082C53.3615 17.1783 55.479 17.5335 57.484 18.2567C58.0994 18.4743 58.6917 18.753 59.2522 19.0888C59.5519 19.266 59.8349 19.4702 60.0978 19.699C60.2561 19.628 60.4035 19.5346 60.5357 19.4217C60.7416 19.2606 60.9266 19.0742 61.0865 18.8669C61.2735 18.623 61.4359 18.361 61.5713 18.0847C61.7229 17.7655 61.7974 17.4148 61.7888 17.0611C61.7888 15.8573 60.8607 14.8809 59.0043 14.132C57.148 13.3831 54.5398 13.0132 51.1796 13.0225C49.4559 12.9872 47.7356 13.1925 46.0678 13.6327C44.8283 13.9562 43.6666 14.5289 42.6526 15.3164C41.8226 15.9693 41.1612 16.8143 40.7247 17.7796C40.3196 18.7097 40.1131 19.7152 40.1187 20.7309C40.0891 21.8015 40.3138 22.8638 40.7742 23.8293C41.204 24.685 41.8254 25.4285 42.5892 26.0012C43.4334 26.6195 44.376 27.0885 45.3765 27.3881C46.5364 27.7462 47.7297 27.9832 48.9377 28.0954L52.7165 28.5364C54.4608 28.7214 55.6717 29.0542 56.3493 29.535C56.6811 29.7641 56.9488 30.0753 57.1268 30.4386C57.3047 30.802 57.387 31.2053 57.3656 31.6098C57.3656 32.6842 56.8331 33.4406 55.7681 33.8788C54.7032 34.3171 53.3261 34.5362 51.6368 34.5362C50.4372 34.5434 49.2393 34.4459 48.0564 34.245C47.0651 34.0744 46.0862 33.8381 45.1259 33.5376C44.3934 33.307 43.6736 33.0376 42.9693 32.7305C42.547 32.5575 42.1413 32.3458 41.7575 32.098L39.6753 35.8538C40.0706 36.1379 40.4921 36.3831 40.934 36.5861C41.7576 36.9803 42.608 37.3149 43.4789 37.5874C44.6929 37.9687 45.9303 38.2699 47.1833 38.4889C48.7512 38.762 50.3403 38.8929 51.9315 38.88C55.5469 38.88 58.3167 38.1477 60.241 36.6832C61.1602 36.0188 61.9038 35.1377 62.4065 34.1169C62.9092 33.0961 63.1558 31.9667 63.1246 30.8276C63.143 28.6455 62.4095 26.9923 60.924 25.868Z" fill="#151D21"/>
+<path d="M72.164 2.22674C71.2276 2.22674 70.5115 2.44032 69.9827 2.86194C69.4539 3.28357 69.2087 3.93541 69.2087 4.80362V38.1893H74.7309V2.76486C74.5684 2.70106 74.2462 2.59288 73.7614 2.44864C73.2427 2.29616 72.7044 2.22139 72.164 2.22674Z" fill="#151D21"/>
+<path d="M84.9243 2.71493C84.4838 2.70972 84.0467 2.79326 83.6387 2.96065C83.2306 3.12803 82.86 3.37588 82.5485 3.68962C82.237 4.00335 81.9909 4.37665 81.8247 4.78756C81.6585 5.19846 81.5755 5.63869 81.5807 6.08235C81.5835 6.63496 81.7212 7.17839 81.9819 7.6647C82.2425 8.151 82.618 8.56523 83.0751 8.87085C83.5323 9.17646 84.0571 9.36407 84.6033 9.41711C85.1495 9.47015 85.7002 9.387 86.207 9.175C86.7137 8.96299 87.1608 8.62865 87.5089 8.20146C87.857 7.77427 88.0954 7.26737 88.203 6.72547C88.3105 6.18358 88.2841 5.62334 88.1258 5.0942C87.9676 4.56505 87.6825 4.08325 87.2957 3.69131C86.9875 3.37419 86.6181 3.12396 86.2103 2.95604C85.8024 2.78812 85.3648 2.70607 84.9243 2.71493V2.71493Z" fill="#151D21"/>
+<path d="M85.1088 13.6993C84.1724 13.6993 83.4563 13.9045 82.9275 14.3095C82.3987 14.7145 82.1618 15.3636 82.1618 16.2789V38.1921H87.684V14.2318C87.5215 14.1653 87.1993 14.0599 86.7145 13.9129C86.1923 13.7639 85.6515 13.6919 85.1088 13.6993Z" fill="#151D21"/>
+<path d="M115.149 15.7685C114.044 14.8424 112.768 14.1457 111.395 13.7187C109.859 13.2348 108.256 12.9961 106.647 13.0113C105.045 12.9945 103.451 13.2333 101.923 13.7187C100.558 14.1495 99.2901 14.8459 98.1913 15.7685C97.138 16.6624 96.292 17.7777 95.7125 19.0361C95.0997 20.4093 94.7968 21.9023 94.8256 23.4076V38.1921H100.348V24.8223C100.348 22.6032 100.873 20.9195 101.923 19.7711C102.973 18.6228 104.548 18.0458 106.647 18.0403C108.712 18.0403 110.279 18.6172 111.345 19.7711C112.412 20.9251 112.946 22.6088 112.946 24.8223V38.1921H118.468V23.4076C118.497 21.9051 118.204 20.4139 117.608 19.0361C117.042 17.775 116.202 16.6583 115.149 15.7685V15.7685Z" fill="#151D21"/>
+<path d="M138.766 32.675C138.224 33.0274 137.637 33.3072 137.023 33.5071C136.183 33.8049 135.299 33.9542 134.409 33.9482C133.846 33.9507 133.285 33.8855 132.737 33.754C132.225 33.6333 131.745 33.4003 131.333 33.0716C130.915 32.7267 130.59 32.2812 130.388 31.7763C130.14 31.1149 130.025 30.4107 130.049 29.7042V18.817H139.35C139.498 18.4918 139.628 18.1584 139.739 17.8184C139.903 17.3222 139.985 16.802 139.981 16.2789C139.981 15.4468 139.763 14.7921 139.325 14.3539C138.888 13.9156 138.136 13.6993 137.07 13.6993H130.046V7.31947C129.884 7.2529 129.553 7.14749 129.052 7.00048C128.524 6.85159 127.978 6.77783 127.43 6.78135C126.672 6.7383 125.921 6.95322 125.298 7.39159C124.769 7.7827 124.522 8.429 124.522 9.35268V30.8193C124.522 33.2233 125.249 35.1649 126.703 36.6443C128.157 38.1237 130.305 38.8634 133.148 38.8634C134.073 38.8666 134.996 38.7737 135.902 38.586C136.677 38.4248 137.438 38.2051 138.18 37.9286C138.777 37.7056 139.352 37.427 139.898 37.0965C140.367 36.8024 140.734 36.5583 141 36.3642L138.766 32.675Z" fill="#151D21"/>
+</g>
+<defs>
+<clipPath id="clip0_1_149">
+<rect width="141" height="42" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/astro/src/components/Footer.astro b/docs/astro/src/components/Footer.astro
index d1f8038e6c3..571471b693d 100644
--- a/docs/astro/src/components/Footer.astro
+++ b/docs/astro/src/components/Footer.astro
@@ -3,15 +3,23 @@
 // SPDX-License-Identifier: MIT
 import type { Props } from "@astrojs/starlight/props";
 import Default from "@astrojs/starlight/components/Footer.astro";
+const year = new Date().getFullYear();
 ---
-<div>
-	<Default {...Astro.props}/>
-	<slot />
-	  <div class="meta sl-flex">
-		<p>Copyright © SixtyFPS GmbH</p>
-	</div>
-</div>
 
+<Default {...Astro.props}><slot /></Default>
 
+<hr />
 
+<p>&copy; {year} SixtyFPS GmbH</p>
 
+<style>
+  p {
+    text-align: center;
+    color: var(--sl-color-gray-2);
+    font-size: var(--sl-text-sm);
+  }
+  hr {
+    border: 0;
+    border-bottom: 1px solid var(--sl-color-hairline);
+  }
+</style>
diff --git a/docs/astro/src/components/Header.astro b/docs/astro/src/components/Header.astro
index 2546b5fd06c..8ab0712f6c4 100644
--- a/docs/astro/src/components/Header.astro
+++ b/docs/astro/src/components/Header.astro
@@ -7,7 +7,7 @@ import LanguageSelect from "@astrojs/starlight/components/LanguageSelect.astro";
 import Search from "@astrojs/starlight/components/Search.astro";
 import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
 import SocialIcons from "@astrojs/starlight/components/SocialIcons.astro";
-import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
+import ThemeSelect from "./ThemeSelect.astro";
 import VersionSelector from "./VersionSelector.astro";
 ---
 
diff --git a/docs/astro/src/components/ThemeSelect.astro b/docs/astro/src/components/ThemeSelect.astro
new file mode 100644
index 00000000000..ed3ff2585d6
--- /dev/null
+++ b/docs/astro/src/components/ThemeSelect.astro
@@ -0,0 +1,75 @@
+---
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: MIT
+import type { Props } from '@astrojs/starlight/props';
+import { Icon } from '@astrojs/starlight/components';
+---
+
+<script>
+  class ThemeSwitcher extends HTMLElement {
+    constructor() {
+      super();
+      const storedTheme =
+        typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme');
+      const theme =
+        storedTheme ||
+        (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+      document.documentElement.dataset.theme = theme === 'light' ? 'light' : 'dark';
+      this.handleMouseDown = this.handleMouseDown.bind(this);
+    }
+    connectedCallback() {
+      this.addEventListener('click', this.handleMouseDown);
+    }
+    disconnectedCallback() {
+      this.removeEventListener('click', this.handleMouseDown);
+    }
+    private handleMouseDown(e: MouseEvent) {
+      const theme = document.documentElement.dataset.theme === 'light' ? 'dark' : 'light';
+      document.documentElement.dataset.theme = theme;
+      localStorage.setItem('starlight-theme', theme);
+    }
+  }
+  customElements.define('theme-switcher', ThemeSwitcher);
+</script>
+
+<theme-switcher class="sl-flex">
+  <Icon name="sun" class="theme-selector-light" />
+  <Icon name="moon" class="theme-selector-dark" />
+</theme-switcher>
+
+<style>
+  theme-switcher {
+    align-items: center;
+  }
+  .theme-selector-light,
+  .theme-selector-dark {
+    user-select: none;
+    z-index: 999999;
+    position: relative;
+    cursor: pointer;
+  }
+  .theme-selector-light:hover,
+  .theme-selector-dark:hover {
+    color: var(--sl-color-accent-high);
+  }
+  :root {
+    .theme-selector-light {
+      display: none;
+    }
+    .theme-selector-dark {
+      display: inline-block;
+    }
+  }
+  :root[data-theme='light'] {
+    .theme-selector-light {
+      display: inline-block;
+    }
+    .theme-selector-dark {
+      display: none;
+    }
+    .theme-selector-light:hover,
+    .theme-selector-dark:hover {
+      color: var(--sl-color-accent);
+    }
+  }
+</style>