Skip to content

Commit 22e8a94

Browse files
karlcarstensenkarlcarstensen
committed
Adding light dark toggle
1 parent f107912 commit 22e8a94

File tree

3 files changed

+101
-13
lines changed

3 files changed

+101
-13
lines changed

‎docs-starlight/src/components/Header.astro‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
---
22
import config from 'virtual:starlight/user-config';
3+
import { Image } from 'astro:assets';
34
import type { Props } from '@astrojs/starlight/props';
4-
5-
65
import Search from 'virtual:starlight/components/Search';
76
8-
import '@styles/global.css';
9-
import TerragruntLogo from '@assets/horizontal-logo-light.svg';
10-
import PipelineIcon from '@assets/pipelines.svg';
117
import HeadphonesIcon from '@assets/headset-icon.svg';
12-
import { Image } from 'astro:assets';
8+
import ThemeToggle from '@components/ThemeToggle.astro';
9+
import PipelineIcon from '@assets/pipelines.svg';
10+
import TerragruntLogo from '@assets/horizontal-logo-light.svg';
1311
12+
import '@styles/global.css';
1413
/**
1514
* Render the `Search` component if Pagefind is enabled or the default search component has been overridden.
1615
*/
@@ -74,7 +73,6 @@ try {
7473
</svg>
7574
</a>
7675
</div>
77-
7876
<!-- SearchBar -->
7977
<div class="hidden lg:block w-[280px]">
8078
{shouldRenderSearch && <Search {...Astro.props} />}
@@ -85,6 +83,7 @@ try {
8583
</svg>
8684
<input class="text-sm font-sans text-[var(--color-gray-1)]" placeholder="Search"></input>
8785
</div> -->
86+
<ThemeToggle />
8887
</div>
8988
<div class="flex items-center gap-3 md:gap-3.5">
9089
<!-- Buttons -->

‎docs-starlight/src/components/ThemeToggle.astro‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
---
3+
4+
<button id="themeToggle" aria-label="Toggle theme">
5+
<svg width="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
6+
<path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
7+
<path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
8+
</svg>
9+
</button>
10+
11+
<style>
12+
#themeToggle {
13+
border: 0;
14+
background: none;
15+
cursor: pointer;
16+
display: flex;
17+
}
18+
.sun { fill: white; }
19+
.moon { fill: transparent; }
20+
:global([data-theme="dark"]) .sun { fill: transparent; }
21+
:global([data-theme="dark"]) .moon { fill: white; }
22+
</style>
23+
24+
<script>
25+
// Theme switching functionality
26+
(function() {
27+
const themeToggle = document.getElementById('themeToggle');
28+
const html = document.documentElement;
29+
const THEME_STORAGE_KEY = 'terragrunt-theme';
30+
31+
// Function to get user's system preference
32+
function getSystemTheme() {
33+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
34+
}
35+
36+
// Function to get stored theme or system preference
37+
function getCurrentTheme() {
38+
const stored = localStorage.getItem(THEME_STORAGE_KEY);
39+
if (stored === 'light' || stored === 'dark') {
40+
return stored;
41+
}
42+
return getSystemTheme();
43+
}
44+
45+
// Function to apply theme
46+
function applyTheme(theme) {
47+
html.setAttribute('data-theme', theme);
48+
}
49+
50+
// Function to set theme and store preference
51+
function setTheme(theme) {
52+
applyTheme(theme);
53+
localStorage.setItem(THEME_STORAGE_KEY, theme);
54+
}
55+
56+
// Function to toggle theme
57+
function toggleTheme() {
58+
const currentTheme = getCurrentTheme();
59+
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
60+
setTheme(newTheme);
61+
}
62+
63+
// Initialize theme on page load
64+
function initializeTheme() {
65+
const theme = getCurrentTheme();
66+
applyTheme(theme);
67+
}
68+
69+
// Listen for system theme changes
70+
function handleSystemThemeChange(e) {
71+
// Only update if user hasn't set a preference
72+
if (!localStorage.getItem(THEME_STORAGE_KEY)) {
73+
const newTheme = e.matches ? 'dark' : 'light';
74+
applyTheme(newTheme);
75+
}
76+
}
77+
78+
// Add event listeners
79+
if (themeToggle) {
80+
themeToggle.addEventListener('click', toggleTheme);
81+
}
82+
83+
// Listen for system theme changes
84+
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
85+
mediaQuery.addEventListener('change', handleSystemThemeChange);
86+
87+
// Initialize theme
88+
initializeTheme();
89+
})();
90+
</script>

‎docs-starlight/src/components/dv-Navbar.astro‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
---
2-
import '@styles/global.css';
32
import config from 'virtual:starlight/user-config';
43
import type { Props } from '@astrojs/starlight/props';
54
import { Image } from 'astro:assets';
6-
7-
// @ts-ignore
85
import Search from 'virtual:starlight/components/Search';
96
10-
import TerragruntLogo from '@assets/horizontal-logo-light.svg';
11-
import PipelineIcon from '@assets/pipelines.svg';
127
import HeadphonesIcon from '@assets/headset-icon.svg';
8+
import ThemeToggle from '@components/ThemeToggle.astro';
9+
import PipelineIcon from '@assets/pipelines.svg';
10+
import TerragruntLogo from '@assets/horizontal-logo-light.svg';
11+
import '@styles/global.css';
1312
1413
/**
1514
* Render the `Search` component if Pagefind is enabled or the default search component has been overridden.
@@ -81,7 +80,6 @@ try {
8180
</svg>
8281
</a>
8382
</div>
84-
8583
<!-- SearchBar -->
8684
<div class="hidden lg:block w-[280px]">
8785
{shouldRenderSearch && <Search {...Astro.props} />}
@@ -92,6 +90,7 @@ try {
9290
</svg>
9391
<input class="text-sm font-sans text-[var(--color-gray-1)]" placeholder="Search"></input>
9492
</div> -->
93+
<ThemeToggle />
9594
</div>
9695
<div class="flex items-center gap-3 md:gap-3.5">
9796
<!-- Buttons -->

0 commit comments

Comments
 (0)