git-viewer 12.0.0 → 13.0.0

package/dist/entry.bundled.js

@@ -1615,6 +1615,7 @@ var AppStore = class extends TypedEventTarget {
     __publicField(this, "search", "");
     __publicField(this, "selectedCommit", null);
     __publicField(this, "fullscreenDiff", false);
+    __publicField(this, "theme", "light");
   }
   setRefs(refs) {
     this.refs = refs;
@@ -1628,6 +1629,15 @@ var AppStore = class extends TypedEventTarget {
     this.search = search;
     this.dispatchEvent(new Event("filter"));
   }
+  setTheme(theme) {
+    this.theme = theme;
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, theme);
+    } catch {
+    }
+    applyTheme(theme);
+    this.dispatchEvent(new Event("theme"));
+  }
   selectCommit(commit) {
     this.selectedCommit = commit;
     this.dispatchEvent(new Event("selectedCommit"));
@@ -1639,7 +1649,8 @@ var AppStore = class extends TypedEventTarget {
     });
   }
 };
-var colors = {
+var THEME_STORAGE_KEY = "git-viewer-theme";
+var lightPalette = {
   bg: "#ffffff",
   bgLight: "#f6f8fa",
   bgLighter: "#eaeef2",
@@ -1649,9 +1660,30 @@ var colors = {
   accent: "#0969da",
   accentDim: "#ddf4ff",
   green: "#1a7f37",
-  red: "#cf222e"
+  red: "#cf222e",
+  diffAddBg: "#dafbe1",
+  diffDelBg: "#ffebe9",
+  diffAddText: "#116329",
+  diffDelText: "#a40e26"
 };
-var graphColors = [
+var darkPalette = {
+  bg: "#0b0f14",
+  bgLight: "#111821",
+  bgLighter: "#1a2431",
+  border: "#283241",
+  text: "#e6edf3",
+  textMuted: "#9aa7b4",
+  accent: "#7aa2ff",
+  accentDim: "#0b1b33",
+  green: "#3fb950",
+  red: "#ff7b72",
+  diffAddBg: "#132a1f",
+  diffDelBg: "#2a1619",
+  diffAddText: "#7ee787",
+  diffDelText: "#ffa198"
+};
+var colors = lightPalette;
+var graphColorsLight = [
   "#0969da",
   // blue
   "#8250df",
@@ -1669,30 +1701,71 @@ var graphColors = [
   "#0550ae"
   // dark blue
 ];
+var graphColorsDark = [
+  "#7aa2ff",
+  // blue
+  "#b488ff",
+  // purple
+  "#ff8bd3",
+  // pink
+  "#ff7b72",
+  // red
+  "#f5b85b",
+  // orange
+  "#f2cc8f",
+  // amber
+  "#3fb950",
+  // green
+  "#5cc8ff"
+  // cyan
+];
+var graphColors = graphColorsLight;
+function loadTheme() {
+  try {
+    let stored = localStorage.getItem(THEME_STORAGE_KEY);
+    if (stored === "light" || stored === "dark") return stored;
+  } catch {
+  }
+  let media = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+  return media && media.matches ? "dark" : "light";
+}
+function applyTheme(theme) {
+  document.documentElement.dataset.theme = theme;
+  document.documentElement.style.colorScheme = theme;
+  document.body.style.backgroundColor = theme === "dark" ? darkPalette.bg : lightPalette.bg;
+}
 function App(handle) {
   let store = new AppStore();
   handle.context.set(store);
+  store.setTheme(loadTheme());
+  handle.on(store, {
+    theme: () => handle.update()
+  });
   handle.queueTask(async (signal) => {
     let refs = await fetchRefs(signal);
     store.setRefs(refs);
   });
-  return () => /* @__PURE__ */ jsx(
-    "div",
-    {
-      css: {
-        display: "flex",
-        height: "100vh",
-        background: colors.bg,
-        color: colors.text,
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-        fontSize: "13px"
-      },
-      children: [
-        /* @__PURE__ */ jsx(Sidebar, {}),
-        /* @__PURE__ */ jsx(MainPanel, {})
-      ]
-    }
-  );
+  return () => {
+    colors = store.theme === "dark" ? darkPalette : lightPalette;
+    graphColors = store.theme === "dark" ? graphColorsDark : graphColorsLight;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        css: {
+          display: "flex",
+          height: "100vh",
+          background: colors.bg,
+          color: colors.text,
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          fontSize: "13px"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Sidebar, {}),
+          /* @__PURE__ */ jsx(MainPanel, {})
+        ]
+      }
+    );
+  };
 }
 function Sidebar(handle) {
   let store = handle.context.get(App);
@@ -1915,6 +1988,7 @@ function CommitList(handle) {
                 }
               ),
               /* @__PURE__ */ jsx("div", { css: { flex: 1 } }),
+              /* @__PURE__ */ jsx(ThemeToggle, {}),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -1991,6 +2065,68 @@ function CommitList(handle) {
     }
   );
 }
+function ThemeToggle(handle) {
+  let store = handle.context.get(App);
+  handle.on(store, {
+    theme: () => handle.update()
+  });
+  return () => {
+    let isDark = store.theme === "dark";
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": "Toggle theme",
+        title: isDark ? "Switch to light mode" : "Switch to dark mode",
+        css: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: "4px 10px",
+          border: `1px solid ${colors.border}`,
+          borderRadius: "999px",
+          background: colors.bg,
+          color: colors.text,
+          fontSize: "12px",
+          cursor: "pointer",
+          "&:hover": {
+            borderColor: colors.accent,
+            background: colors.bgLighter
+          }
+        },
+        on: { click: () => store.setTheme(isDark ? "light" : "dark") },
+        children: [
+          isDark ? /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              children: /* @__PURE__ */ jsx("path", { d: "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" })
+            }
+          ) : /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              children: [
+                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+                /* @__PURE__ */ jsx("path", { d: "M12 2v2m0 16v2m10-10h-2M4 12H2m15.5-7.5-1.5 1.5M8 16l-1.5 1.5M16 16l1.5 1.5M8 8 6.5 6.5" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: isDark ? "Dark" : "Light" })
+        ]
+      }
+    );
+  };
+}
 function FilterButton(handle) {
   let store = handle.context.get(App);
   handle.on(store, {
@@ -2355,6 +2491,7 @@ function DiffPanel(handle) {
               "section",
               {
                 connect: (node) => diffContentRef = node,
+                class: store.theme === "dark" ? "d2h-dark-color-scheme" : "",
                 css: {
                   "& .d2h-wrapper": { background: "transparent" },
                   "& .d2h-file-header": {
@@ -2366,16 +2503,30 @@ function DiffPanel(handle) {
                     zIndex: 1
                   },
                   "& .d2h-file-name": { color: colors.text },
-                  "& .d2h-code-line": { padding: "0 8px" },
+                  "& .d2h-code-line": {
+                    padding: "0 8px",
+                    background: colors.bg
+                  },
                   "& .d2h-code-line-ctn": { color: colors.text },
-                  "& .d2h-ins": { background: "#dafbe1" },
-                  "& .d2h-del": { background: "#ffebe9" },
-                  "& .d2h-ins .d2h-code-line-ctn": { color: colors.green },
-                  "& .d2h-del .d2h-code-line-ctn": { color: colors.red },
+                  "& .d2h-ins": { background: colors.diffAddBg },
+                  "& .d2h-del": { background: colors.diffDelBg },
+                  "& .d2h-ins .d2h-code-line-ctn": {
+                    color: colors.diffAddText
+                  },
+                  "& .d2h-del .d2h-code-line-ctn": {
+                    color: colors.diffDelText
+                  },
                   "& .d2h-code-linenumber": {
                     color: colors.textMuted,
+                    background: colors.bgLight,
                     borderRight: `1px solid ${colors.border}`
                   },
+                  "& .d2h-code-line-prefix": { color: colors.textMuted },
+                  "& .d2h-emptyplaceholder": { background: colors.bgLight },
+                  "& .d2h-info": {
+                    background: colors.bgLight,
+                    color: colors.textMuted
+                  },
                   "& .d2h-file-diff": {
                     borderBottom: `1px solid ${colors.border}`
                   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-viewer",
-  "version": "12.0.0",
+  "version": "13.0.0",
   "description": "Visual git log viewer with branch graph and diff display",
   "repository": {
     "type": "git",