Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 07:33:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: optimize theme script to prevent render-blocking (#601)

Browse Source 
* refactor: optimize theme script to prevent render-blocking

- Move theme script from `public/` to `src/scripts/`
- Split into minimal inline script (FOUC prevention) + external script (non-blocking)
- Rename `primaryColorScheme` to `initialColorScheme`
- Rename `toggle-theme.js` to `theme.ts`
- Use TypeScript for theme script
- Update docs for theme customization
This commit is contained in:
Sat Naing
2026-01-10 07:26:25 +07:00
committed by GitHub
parent 25d25437cf
commit 5bb8e405bb
6 changed files with 182 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/toggle-theme.js
-88
View File
@@ -1,88 +0,0 @@
const primaryColorScheme = ""; // "light" | "dark"
// Get theme data from local storage
const currentTheme = localStorage.getItem("theme");
function getPreferTheme() {
// return theme value in local storage if it is set
if (currentTheme) return currentTheme;
// return primary color scheme if it is set
if (primaryColorScheme) return primaryColorScheme;
// return user device's prefer color scheme
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
}
let themeValue = getPreferTheme();
function setPreference() {
localStorage.setItem("theme", themeValue);
reflectPreference();
}
function reflectPreference() {
document.firstElementChild.setAttribute("data-theme", themeValue);
document.querySelector("#theme-btn")?.setAttribute("aria-label", themeValue);
// Get a reference to the body element
const body = document.body;
// Check if the body element exists before using getComputedStyle
if (body) {
// Get the computed styles for the body element
const computedStyles = window.getComputedStyle(body);
// Get the background color property
const bgColor = computedStyles.backgroundColor;
// Set the background color in <meta theme-color ... />
document
.querySelector("meta[name='theme-color']")
?.setAttribute("content", bgColor);
}
}
// set early so no page flashes / CSS is made aware
reflectPreference();
window.onload = () => {
function setThemeFeature() {
// set on load so screen readers can get the latest value on the button
reflectPreference();
// now this script can find and listen for clicks on the control
document.querySelector("#theme-btn")?.addEventListener("click", () => {
themeValue = themeValue === "light" ? "dark" : "light";
setPreference();
});
}
setThemeFeature();
// Runs on view transitions navigation
document.addEventListener("astro:after-swap", setThemeFeature);
};
// Set theme-color value before page transition
// to avoid navigation bar color flickering in Android dark mode
document.addEventListener("astro:before-swap", event => {
const bgColor = document
.querySelector("meta[name='theme-color']")
?.getAttribute("content");
event.newDocument
.querySelector("meta[name='theme-color']")
?.setAttribute("content", bgColor);
});
// sync with system changes
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", ({ matches: isDark }) => {
themeValue = isDark ? "dark" : "light";
setPreference();
});