diff --git a/src/components/layout/theme-toggle.tsx b/src/components/layout/theme-toggle.tsx
new file mode 100644
index 0000000..11ee4fa
--- /dev/null
+++ b/src/components/layout/theme-toggle.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { getInitialLocale, getLocaleMessages, type Locale } from "@/lib/i18n";
+
+type ThemePreference = "light" | "system" | "dark";
+type ResolvedTheme = "light" | "dark";
+
+function getInitialThemePreference(): ThemePreference {
+ if (typeof window === "undefined") return "light";
+
+ const savedTheme = window.localStorage.getItem("kr-theme");
+ return savedTheme === "light" || savedTheme === "system" || savedTheme === "dark" ? savedTheme : "light";
+}
+
+function resolveTheme(preference: ThemePreference): ResolvedTheme {
+ if (preference !== "system") return preference;
+ return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function applyTheme(preference: ThemePreference) {
+ const theme = resolveTheme(preference);
+ document.documentElement.dataset.theme = theme;
+ document.documentElement.style.colorScheme = theme;
+ window.localStorage.setItem("kr-theme", preference);
+}
+
+export function ThemeToggle() {
+ const [themePreference, setThemePreference] = useState
("light");
+ const [locale, setLocale] = useState("zh-CN");
+
+ useEffect(() => {
+ const syncTheme = () => {
+ const preference = getInitialThemePreference();
+ setThemePreference(preference);
+ applyTheme(preference);
+ };
+ const syncLocale = () => setLocale(getInitialLocale());
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+ const syncSystemTheme = () => {
+ if (getInitialThemePreference() === "system") applyTheme("system");
+ };
+
+ syncTheme();
+ syncLocale();
+ window.addEventListener("kr-locale-change", syncLocale);
+ window.addEventListener("storage", syncTheme);
+ mediaQuery.addEventListener("change", syncSystemTheme);
+
+ return () => {
+ window.removeEventListener("kr-locale-change", syncLocale);
+ window.removeEventListener("storage", syncTheme);
+ mediaQuery.removeEventListener("change", syncSystemTheme);
+ };
+ }, []);
+
+ const messages = getLocaleMessages(locale);
+ const options: { theme: ThemePreference; label: string; icon: string }[] = [
+ { theme: "dark", label: messages.common.useDarkTheme, icon: "/icon/theme/light.svg" },
+ { theme: "light", label: messages.common.useLightTheme, icon: "/icon/theme/system.svg" },
+ { theme: "system", label: messages.common.useSystemTheme, icon: "/icon/theme/dark.svg" },
+ ];
+
+ return (
+
+ {options.map((option) => (
+
+ ))}
+
+ );
+}
diff --git a/src/components/status/http-status-page.tsx b/src/components/status/http-status-page.tsx
new file mode 100644
index 0000000..ffb31df
--- /dev/null
+++ b/src/components/status/http-status-page.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { getInitialLocale, type Locale } from "@/lib/i18n";
+
+export type HttpStatusCode = 403 | 404 | 500 | 502 | 503 | 504;
+
+const statusMessages: Record> = {
+ "zh-CN": {
+ 403: "你没有权限访问此页面",
+ 404: "人与人的悲欢不尽相同",
+ 500: "服务器遇到了一点问题",
+ 502: "服务暂时无法连接",
+ 503: "服务暂时不可用",
+ 504: "服务响应超时",
+ },
+ "zh-TW": {
+ 403: "你沒有權限存取此頁面",
+ 404: "人與人的悲歡並不相同",
+ 500: "伺服器遇到了一點問題",
+ 502: "服務暫時無法連線",
+ 503: "服務暫時無法使用",
+ 504: "服務回應逾時",
+ },
+ en: {
+ 403: "You do not have permission to access this page",
+ 404: "We do not all share the same joys and sorrows",
+ 500: "The server ran into a problem",
+ 502: "The service is temporarily unreachable",
+ 503: "The service is temporarily unavailable",
+ 504: "The service took too long to respond",
+ },
+ ja: {
+ 403: "このページにアクセスする権限がありません",
+ 404: "人それぞれ、喜びも悲しみも違う",
+ 500: "サーバーで問題が発生しました",
+ 502: "サービスに一時的に接続できません",
+ 503: "サービスは一時的に利用できません",
+ 504: "サービスの応答がタイムアウトしました",
+ },
+};
+
+const backLabels: Record = {
+ "zh-CN": "回到上一页",
+ "zh-TW": "回到上一頁",
+ en: "Go back",
+ ja: "前のページに戻る",
+};
+
+function parseLocalizedMessages(source: string): Partial> {
+ const messages: Partial> = {};
+ let locale: Locale | null = null;
+
+ for (const line of source.split(/\r?\n/)) {
+ const localeMatch = line.match(/^(zh-CN|zh-TW|en|ja):\s*$/);
+ if (localeMatch) {
+ locale = localeMatch[1] as Locale;
+ messages[locale] = [];
+ continue;
+ }
+
+ const messageMatch = line.match(/^\s+-\s+(.+)$/);
+ if (locale && messageMatch) messages[locale]?.push(messageMatch[1].trim());
+ }
+
+ return messages;
+}
+
+export function HttpStatusPage({ code }: { code: HttpStatusCode }) {
+ const [locale, setLocale] = useState("zh-CN");
+ const [randomMessages, setRandomMessages] = useState>>({});
+ const [randomMessage, setRandomMessage] = useState(null);
+
+ useEffect(() => {
+ const syncLocale = () => setLocale(getInitialLocale());
+ syncLocale();
+ window.addEventListener("kr-locale-change", syncLocale);
+ window.addEventListener("storage", syncLocale);
+ return () => {
+ window.removeEventListener("kr-locale-change", syncLocale);
+ window.removeEventListener("storage", syncLocale);
+ };
+ }, []);
+
+ useEffect(() => {
+ if (code !== 404) return;
+
+ fetch("/error/404-messages.yml")
+ .then((response) => response.ok ? response.text() : Promise.reject(new Error("Could not load 404 messages")))
+ .then((source) => setRandomMessages(parseLocalizedMessages(source)))
+ .catch(() => setRandomMessages({}));
+ }, [code]);
+
+ useEffect(() => {
+ const messages = randomMessages[locale] ?? randomMessages["zh-CN"];
+ if (!messages?.length) return;
+ setRandomMessage(messages[Math.floor(Math.random() * messages.length)]);
+ }, [locale, randomMessages]);
+
+ const returnToPreviousPage = () => {
+ if (window.history.length > 1) {
+ window.history.back();
+ return;
+ }
+ window.location.assign("/");
+ };
+
+ return (
+
+
+
+
{code}
+
+
{code === 404 && randomMessage ? randomMessage : statusMessages[locale][code]}
+
+