jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add ThemeSelect component with theme toggle functionality to the Starlight's Navbar

Browse source 
A new ThemeSelect.astro file was added to let users toggle between light and dark themes in Starlight Docs. This component replaces the default ThemeProvider.astro component
This commit is contained in:
Emil Gulamov 2024-06-22 17:47:58 +04:00
parent f62575ac24
commit df9b56efd8
2 changed files with 105 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
astro.config.mjs
View file

@ -93,6 +93,7 @@ export default defineConfig({
components: {
SiteTitle: "./src/components/ui/starlight/SiteTitle.astro",
Head: "./src/components/ui/starlight/Head.astro",
ThemeSelect: "./src/components/ui/starlight/ThemeSelect.astro",
},
head: [
{

104
src/components/ui/starlight/ThemeSelect.astro Normal file
View file

@ -0,0 +1,104 @@
<!-- Dark Theme Toggle Button -->
<button
type="button"
aria-label="Dark Theme Toggle"
id="dark-theme-toggle"
class="group flex h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 hover:text-orange-400"
data-hs-theme-click-value="dark"
>
<svg
class="h-4 w-4 flex-shrink-0"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
</svg>
</button>
<!-- Light Theme Toggle Button -->
<button
type="button"
aria-label="Light Theme Toggle"
id="light-theme-toggle"
class="group flex hidden h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-400 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-700 hover:text-orange-400"
data-hs-theme-click-value="light"
>
<svg
class="h-4 w-4 flex-shrink-0"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 8a2 2 0 1 0 4 4"></path>
<path d="M12 2v2"></path>
<path d="M12 20v2"></path>
<path d="m4.93 4.93 1.41 1.41"></path>
<path d="m17.66 17.66 1.41 1.41"></path>
<path d="M2 12h2"></path>
<path d="M20 12h2"></path>
<path d="m6.34 17.66-1.41 1.41"></path>
<path d="m19.07 4.93-1.41 1.41"></path>
</svg>
</button>
<script>
// Define the Theme type
type Theme = "light" | "dark";
// Function to set the theme
function setTheme(theme: Theme): void {
document.documentElement.setAttribute("data-theme", theme);
localStorage.setItem("starlight-theme", theme);
updateButtons(theme);
}
// Function to update the button visibility
function updateButtons(theme: Theme): void {
const darkButton = document.getElementById("dark-theme-toggle");
const lightButton = document.getElementById("light-theme-toggle");
if (theme === "dark") {
darkButton?.classList.add("hidden");
lightButton?.classList.remove("hidden");
} else {
darkButton?.classList.remove("hidden");
lightButton?.classList.add("hidden");
}
}
// Event listeners for theme toggle buttons
document
.getElementById("dark-theme-toggle")
?.addEventListener("click", () => {
setTheme("dark");
});
document
.getElementById("light-theme-toggle")
?.addEventListener("click", () => {
setTheme("light");
});
// Initial theme setup
document.addEventListener("DOMContentLoaded", () => {
const storedTheme = localStorage.getItem("starlight-theme") as Theme | null;
const theme: Theme =
storedTheme ||
(window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light");
setTheme(theme);
});
</script>