@asgerami/zemenay-blog
Version:
Plug-and-play blog system for Next.js - Get a fully functional blog running in minutes with zero configuration
70 lines (65 loc) • 2.47 kB
JavaScript
"use strict";
"use client";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemeScript = ThemeScript;
exports.ThemeProvider = ThemeProvider;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
/**
* Theme script that runs immediately to prevent flash of wrong theme
* This should be placed in the <head> of your document
*/
function ThemeScript() {
const themeScript = `
(function() {
try {
// Get saved theme or default to system
const savedTheme = localStorage.getItem('zemenay-blog-theme') || 'system';
// Function to get system preference
function getSystemTheme() {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
// Resolve theme
let resolvedTheme;
if (savedTheme === 'system') {
resolvedTheme = getSystemTheme();
} else {
resolvedTheme = savedTheme;
}
// Apply theme immediately
const root = document.documentElement;
root.classList.remove('light', 'dark');
root.classList.add(resolvedTheme);
root.setAttribute('data-theme', resolvedTheme);
// Store resolved theme for hydration
window.__ZEMENAY_THEME__ = {
theme: savedTheme,
resolvedTheme: resolvedTheme
};
} catch (e) {
// Fallback to light theme if anything goes wrong
document.documentElement.classList.add('light');
document.documentElement.setAttribute('data-theme', 'light');
}
})();
`;
return (0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: themeScript } });
}
/**
* Theme provider that hydrates with the server-side applied theme
*/
function ThemeProvider({ children }) {
const [mounted, setMounted] = react_1.default.useState(false);
// Prevent hydration mismatch by only rendering after mount
react_1.default.useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
// Return children without theme context during SSR
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
}
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
}