Docs: Cosmetic changes (#7059)

Co-authored-by: Olivier Goffart <olivier.goffart@slint.dev>
Co-authored-by: Nigel Breslaw <nigel.breslaw@slint.dev>

docs/astro/astro.config.mjs

@@ -34,12 +34,13 @@ 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",
+                replacesTitle: true,
             },
-            customCss: ["./src/styles/custom.css"],
+            customCss: ["./src/styles/custom.css", "./src/styles/theme.css"],
 
             components: {
                 Footer: "./src/components/Footer.astro",

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>

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";
 ---
 

docs/astro/src/components/ThemeSelect.astro

@@ -0,0 +1,38 @@
+---
+// 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>

docs/astro/src/styles/theme.css

@@ -0,0 +1,34 @@
+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);
+    }
+}