+
+
Not found
This paste does not exist or has expired.
diff --git a/server/app/page.tsx b/server/app/page.tsx
index 016010d..c73eedb 100644
--- a/server/app/page.tsx
+++ b/server/app/page.tsx
@@ -1,6 +1,11 @@
+import { ThemeToggle } from "@/components/ThemeToggle";
+
export default function HomePage() {
return (
+
+
PaperCut
diff --git a/server/components/LogCanvas.tsx b/server/components/LogCanvas.tsx
index 673202f..fc5f939 100644
--- a/server/components/LogCanvas.tsx
+++ b/server/components/LogCanvas.tsx
@@ -14,6 +14,7 @@ import {
type LevelFilterState,
type LineSelection,
} from "@/lib/log-lines";
+import { ThemeToggle } from "./ThemeToggle";
import { VirtualLogList } from "./VirtualLogList";
const FILTER_LEVELS: LogLevel[] = [
@@ -151,6 +152,7 @@ export function LogCanvas({
{expiresAt ? (
exp {new Date(expiresAt).toLocaleString()}
) : null}
+
diff --git a/server/components/PasswordGate.tsx b/server/components/PasswordGate.tsx
index 7cb0b21..d630b1a 100644
--- a/server/components/PasswordGate.tsx
+++ b/server/components/PasswordGate.tsx
@@ -2,6 +2,7 @@
import { useRouter } from "next/navigation";
import { FormEvent, useState } from "react";
+import { ThemeToggle } from "./ThemeToggle";
interface PasswordGateProps {
pasteId: string;
@@ -40,6 +41,9 @@ export function PasswordGate({ pasteId }: PasswordGateProps) {
return (
+
+
Protected paste
diff --git a/server/components/ThemeToggle.tsx b/server/components/ThemeToggle.tsx
new file mode 100644
index 0000000..25db8b0
--- /dev/null
+++ b/server/components/ThemeToggle.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+ applyTheme,
+ persistTheme,
+ resolveInitialTheme,
+ type Theme,
+} from "@/lib/theme";
+
+interface ThemeToggleProps {
+ className?: string;
+ /** Compact label for toolbars */
+ compact?: boolean;
+}
+
+export function ThemeToggle({ className = "", compact = false }: ThemeToggleProps) {
+ const [theme, setTheme] = useState("dark");
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setTheme(resolveInitialTheme());
+ setMounted(true);
+ }, []);
+
+ function toggle() {
+ const next: Theme = theme === "dark" ? "light" : "dark";
+ setTheme(next);
+ applyTheme(next);
+ persistTheme(next);
+ }
+
+ const label =
+ theme === "dark"
+ ? compact
+ ? "Light"
+ : "Switch to light theme"
+ : compact
+ ? "Dark"
+ : "Switch to dark theme";
+
+ return (
+
+ {!mounted ? (
+ Theme
+ ) : theme === "dark" ? (
+ {compact ? "☀ Light" : "☀ Light theme"}
+ ) : (
+ {compact ? "☾ Dark" : "☾ Dark theme"}
+ )}
+
+ );
+}
diff --git a/server/lib/theme.test.ts b/server/lib/theme.test.ts
new file mode 100644
index 0000000..61f26be
--- /dev/null
+++ b/server/lib/theme.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { isTheme, THEME_STORAGE_KEY } from "./theme";
+
+describe("theme helpers", () => {
+ it("accepts only dark and light", () => {
+ expect(isTheme("dark")).toBe(true);
+ expect(isTheme("light")).toBe(true);
+ expect(isTheme("auto")).toBe(false);
+ expect(isTheme("")).toBe(false);
+ expect(isTheme(null)).toBe(false);
+ });
+
+ it("uses a stable storage key", () => {
+ expect(THEME_STORAGE_KEY).toBe("papercut-theme");
+ });
+});
diff --git a/server/lib/theme.ts b/server/lib/theme.ts
new file mode 100644
index 0000000..7607af9
--- /dev/null
+++ b/server/lib/theme.ts
@@ -0,0 +1,37 @@
+export type Theme = "dark" | "light";
+
+export const THEME_STORAGE_KEY = "papercut-theme";
+
+export function isTheme(value: unknown): value is Theme {
+ return value === "dark" || value === "light";
+}
+
+export function applyTheme(theme: Theme): void {
+ if (typeof document === "undefined") return;
+ document.documentElement.setAttribute("data-theme", theme);
+}
+
+export function readStoredTheme(): Theme | null {
+ if (typeof window === "undefined") return null;
+ try {
+ const raw = window.localStorage.getItem(THEME_STORAGE_KEY);
+ return isTheme(raw) ? raw : null;
+ } catch {
+ return null;
+ }
+}
+
+export function persistTheme(theme: Theme): void {
+ try {
+ window.localStorage.setItem(THEME_STORAGE_KEY, theme);
+ } catch {
+ /* private mode / blocked storage */
+ }
+}
+
+export function resolveInitialTheme(): Theme {
+ return readStoredTheme() ?? "dark";
+}
+
+/** Inline script: set data-theme before paint (no FOUC). */
+export const THEME_BOOT_SCRIPT = `(function(){try{var k=${JSON.stringify(THEME_STORAGE_KEY)};var t=localStorage.getItem(k);if(t!=="light"&&t!=="dark")t="dark";document.documentElement.setAttribute("data-theme",t);}catch(e){document.documentElement.setAttribute("data-theme","dark");}})();`;
diff --git a/server/tailwind.config.ts b/server/tailwind.config.ts
index 14bb1c1..a7979eb 100644
--- a/server/tailwind.config.ts
+++ b/server/tailwind.config.ts
@@ -1,5 +1,8 @@
import type { Config } from "tailwindcss";
+const withAlpha = (channel: string) =>
+ `rgb(var(${channel}) / )`;
+
const config: Config = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
@@ -9,20 +12,20 @@ const config: Config = {
extend: {
colors: {
vscode: {
- bg: "#1e1e1e",
- sidebar: "#252526",
- line: "#2d2d2d",
- border: "#3c3c3c",
- fg: "#d4d4d4",
- muted: "#858585",
- accent: "#007acc",
- error: "#f44747",
- warn: "#cca700",
- info: "#3794ff",
- debug: "#808080",
- success: "#89d185",
- selection: "#264f78",
- gutter: "#858585",
+ bg: withAlpha("--vscode-bg"),
+ sidebar: withAlpha("--vscode-sidebar"),
+ line: withAlpha("--vscode-line"),
+ border: withAlpha("--vscode-border"),
+ fg: withAlpha("--vscode-fg"),
+ muted: withAlpha("--vscode-muted"),
+ accent: withAlpha("--vscode-accent"),
+ error: withAlpha("--vscode-error"),
+ warn: withAlpha("--vscode-warn"),
+ info: withAlpha("--vscode-info"),
+ debug: withAlpha("--vscode-debug"),
+ success: withAlpha("--vscode-success"),
+ selection: withAlpha("--vscode-selection"),
+ gutter: withAlpha("--vscode-gutter"),
},
},
fontFamily: {