Skip to content

Commit 01ede9f

Browse files
RadaplsRadapls
committed
JFRA-00: Fix theme color change and locale select.
1 parent 9abfc10 commit 01ede9f

File tree

3 files changed

+56
-59
lines changed

3 files changed

+56
-59
lines changed

‎src/components/ThemeIcon.astro‎

Lines changed: 38 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -21,69 +21,59 @@
2121
</style>
2222

2323
<script is:inline>
24-
const applyThemeFromLocalStorage = () => {
25-
const theme =
26-
(typeof localStorage !== 'undefined' && localStorage.getItem('theme')) ||
27-
'light';
28-
if (theme === 'dark') {
29-
document.documentElement.classList.add('dark');
24+
const applyThemeFromLocalStorage = () => {
25+
const theme = localStorage?.getItem("theme") ?? "light";
26+
if (theme === "dark") {
27+
document.documentElement.classList.add("dark");
3028
} else {
31-
document.documentElement.classList.remove('dark');
29+
document.documentElement.classList.remove("dark");
3230
}
3331
};
3432

33+
const getInitialTheme = () => {
34+
const stored = localStorage?.getItem("theme") ?? "";
35+
if (["dark", "light"].includes(stored)) return stored;
36+
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
37+
};
3538

36-
const theme = (() => {
37-
const localStorageTheme = localStorage?.getItem("theme") ?? '';
38-
if (['dark', 'light'].includes(localStorageTheme)) {
39-
return localStorageTheme;
40-
}
41-
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
42-
return 'dark';
43-
}
44-
return 'light';
45-
})();
46-
47-
if (theme === 'light') {
48-
document.body.classList.remove('dark');
39+
// Initial theme application
40+
const theme = getInitialTheme();
41+
localStorage.setItem("theme", theme);
42+
if (theme === "dark") {
43+
document.documentElement.classList.add("dark");
4944
} else {
50-
document.body.classList.add('dark');
45+
document.documentElement.classList.remove("dark");
5146
}
5247

53-
window.localStorage.setItem('theme', theme);
54-
5548
const handleToggleClick = () => {
56-
const element = document.body;
57-
element.classList.toggle("dark");
58-
59-
const isDark = element.classList.contains("dark");
49+
const html = document.documentElement;
50+
const isDark = html.classList.toggle("dark");
6051
localStorage.setItem("theme", isDark ? "dark" : "light");
61-
}
62-
63-
document.getElementById("themeToggle")?.addEventListener("click", handleToggleClick);
52+
};
6453

54+
const setupThemeToggleButton = () => {
55+
const btn = document.getElementById("themeToggle");
56+
if (!btn) return;
6557

66-
const setupThemeToggleButton = () => {
67-
const toggleButton = document.getElementById("themeToggle");
68-
if (toggleButton) {
69-
toggleButton.removeEventListener('click', handleToggleClick); // Prevent duplicate listeners
70-
toggleButton.addEventListener('click', handleToggleClick);
71-
}
58+
// Avoid duplicate listeners
59+
btn.removeEventListener("click", handleToggleClick);
60+
btn.addEventListener("click", handleToggleClick);
7261
};
7362

74-
// For View Transitions: Apply theme *immediately* after new DOM is swapped.
75-
document.addEventListener('astro:after-swap', applyThemeFromLocalStorage);
76-
77-
// For initial load and re-attaching button listener after page transitions:
78-
if (document.readyState === 'loading') {
79-
// Ensures button listener is attached after initial DOM is ready.
80-
// Theme is already applied by the inline script in <head> of BaseLayout.astro for initial paint.
81-
document.addEventListener('DOMContentLoaded', setupThemeToggleButton);
63+
// Attach theme toggle logic on initial page load
64+
if (document.readyState === "loading") {
65+
document.addEventListener("DOMContentLoaded", setupThemeToggleButton);
8266
} else {
83-
setupThemeToggleButton(); // If script loads after DOMContentLoaded.
67+
setupThemeToggleButton();
8468
}
85-
// astro:page-load is for scripts that need to run after the page is fully loaded and painted.
86-
// Good for re-attaching listeners to elements that might have been re-rendered.
87-
document.addEventListener('astro:page-load', setupThemeToggleButton);
8869

70+
// View Transition: Reapply theme & reattach toggle after DOM is swapped
71+
document.addEventListener("astro:after-swap", () => {
72+
applyThemeFromLocalStorage();
73+
setupThemeToggleButton();
74+
});
75+
76+
// Optional: useful for certain components being delayed
77+
document.addEventListener("astro:page-load", setupThemeToggleButton);
8978
</script>
79+

‎src/components/i18n/LocaleSelect.astro‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
---
2-
// Select UI to switch between locales.
3-
42
import { getLocalePaths, LOCALES } from '../../i18n';
53
---
64

@@ -31,15 +29,24 @@ import { getLocalePaths, LOCALES } from '../../i18n';
3129
</div>
3230

3331
<script is:inline>
34-
const selects = document.querySelectorAll('[data-languageSelect]');
35-
36-
selects.forEach((select) => {
37-
select.addEventListener('change', (event) => {
38-
// used for 404 page
39-
localStorage.selectedLang = event.target?.selectedOptions[0].dataset.lang;
40-
location.href = event.target?.value;
32+
const setupLanguageSelect = () => {
33+
const selects = document.querySelectorAll('[data-languageSelect]');
34+
selects.forEach((select) => {
35+
select.addEventListener('change', (event) => {
36+
const lang = event.target?.selectedOptions[0]?.dataset.lang;
37+
const url = event.target?.value;
38+
if (lang && url) {
39+
localStorage.setItem('selectedLang', lang);
40+
location.href = url;
41+
}
42+
});
4143
});
42-
});
44+
};
45+
46+
setupLanguageSelect();
47+
48+
// Re-run on Astro view transitions
49+
document.addEventListener('astro:after-swap', setupLanguageSelect);
4350
</script>
4451

4552
<style>

‎src/styles/colors.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
--scroll-thumb-color: hsl(var(--hue-color), 25%, 60%);
1717
}
1818

19-
body.dark{
19+
.dark{
2020
--first-color: hsl(var(--hue-color), 85%, 65%);
2121
--first-color-second: hsl(var(--hue-color), 75%, 55%);
2222
--first-color-alt: hsl(var(--hue-color), 70%, 45%);

0 commit comments

Comments
 (0)