Feature/UI branding

astro.config.mjs

@@ -24,11 +24,12 @@ export default defineConfig({
 					errorOnInvalidHashes: false,
 				}),
 			],
-			title: 'Testomatio',
+			title: 'Docs',
 			pagefind: false,
 
 			logo: {
-				src: './src/assets/logo.svg',
+				light: './src/assets/logo-light.svg',
+				dark: './src/assets/logo-dark.svg',
 			},
 			customCss: [
 				'./src/styles/custom.css',
@@ -72,7 +73,7 @@ export default defineConfig({
 				SocialIcons: './src/components/Links.astro',
 				Search: './src/components/Search.astro',
 				PageTitle: './src/components/PageTitle.astro',
-
+				ThemeSelect: './src/components/ThemeSelect.astro',
 			},
 
 			sidebar: [

src/components/ThemeSelect.astro

@@ -0,0 +1,103 @@
+---
+---
+
+<starlight-theme-select>
+	<button id="theme-toggle" aria-label="Toggle theme" title="Toggle theme">
+		<!-- sun icon -->
+		<span class="icon-sun">
+			<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+				<path d="M5 12a1 1 0 0 0-1-1H3a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Zm.64 5-.71.71a1 1 0 0 0 0 1.41 1 1 0 0 0 1.41 0l.71-.71A1 1 0 0 0 5.64 17ZM12 5a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v1a1 1 0 0 0 1 1Zm5.66 2.34a1 1 0 0 0 .7-.29l.71-.71a1 1 0 1 0-1.41-1.41l-.66.71a1 1 0 0 0 0 1.41 1 1 0 0 0 .66.29Zm-12-.29a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.71-.71a1.004 1.004 0 1 0-1.43 1.41l.73.71ZM21 11h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2Zm-2.64 6A1 1 0 0 0 17 18.36l.71.71a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.76-.66ZM12 6.5a5.5 5.5 0 1 0 5.5 5.5A5.51 5.51 0 0 0 12 6.5Zm0 9a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Zm0 3.5a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1Z"/>
+			</svg>
+		</span>
+		<!-- moon icon -->
+		<span class="icon-moon">
+			<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+				<path d="M21.64 13a1 1 0 0 0-1.05-.14 8.049 8.049 0 0 1-3.37.73 8.15 8.15 0 0 1-8.14-8.1 8.59 8.59 0 0 1 .25-2A1 1 0 0 0 8 2.36a10.14 10.14 0 1 0 14 11.69 1 1 0 0 0-.36-1.05Zm-9.5 6.69A8.14 8.14 0 0 1 7.08 5.22v.27a10.15 10.15 0 0 0 10.14 10.14 9.784 9.784 0 0 0 2.1-.22 8.11 8.11 0 0 1-7.18 4.32v-.04Z"/>
+			</svg>
+		</span>
+	</button>
+</starlight-theme-select>
+
+<style>
+	starlight-theme-select {
+		display: flex;
+		align-items: center;
+	}
+
+	#theme-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border: none;
+		outline: none;
+		border-radius: 8px;
+		background: transparent;
+		color: var(--sl-color-gray-3);
+		cursor: pointer;
+		padding: 0;
+		transition: color 0.2s, background 0.2s;
+	}
+
+	#theme-toggle:hover {
+		background: var(--sl-color-gray-6);
+	}
+
+	/* Light theme → show moon (to switch to dark) */
+	:root[data-theme='light'] .icon-moon { display: flex; }
+	:root[data-theme='light'] .icon-sun  { display: none;  }
+
+	/* Dark theme → show sun (to switch to light) */
+	:root[data-theme='dark'] .icon-sun  { display: flex; }
+	:root[data-theme='dark'] .icon-moon { display: none;  }
+
+	/* Default fallback */
+	.icon-moon { display: flex; }
+	.icon-sun  { display: none;  }
+</style>
+
+{/* Inlined to avoid FOUC */}
+<script is:inline>
+	StarlightThemeProvider.updatePickers();
+</script>
+
+<script>
+	type Theme = 'dark' | 'light' | 'auto';
+
+	const storageKey = 'starlight-theme';
+
+	const loadTheme = (): Theme =>
+		(typeof localStorage !== 'undefined' && (localStorage.getItem(storageKey) as Theme)) || 'auto';
+
+	function storeTheme(theme: Theme): void {
+		if (typeof localStorage !== 'undefined') {
+			localStorage.setItem(storageKey, theme === 'light' || theme === 'dark' ? theme : '');
+		}
+	}
+
+	const getPreferredColorScheme = (): 'dark' | 'light' =>
+		matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+
+	function onThemeChange(theme: Theme): void {
+		StarlightThemeProvider.updatePickers(theme);
+		document.documentElement.dataset.theme = theme === 'auto' ? getPreferredColorScheme() : theme;
+		storeTheme(theme);
+	}
+
+	matchMedia('(prefers-color-scheme: light)').addEventListener('change', () => {
+		if (loadTheme() === 'auto') onThemeChange('auto');
+	});
+
+	class StarlightThemeSelect extends HTMLElement {
+		constructor() {
+			super();
+			onThemeChange(loadTheme());
+			this.querySelector('#theme-toggle')?.addEventListener('click', () => {
+				const current = document.documentElement.dataset.theme as 'dark' | 'light';
+				onThemeChange(current === 'dark' ? 'light' : 'dark');
+			});
+		}
+	}
+	customElements.define('starlight-theme-select', StarlightThemeSelect);
+</script>