@starlove/orbit 1.3.2 → 1.3.4

package/dist/full/version.json

@@ -1,6 +1,6 @@
 {
   "name": "@starlove/orbit",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "edition": "full",
-  "builtAt": "2026-06-03T01:24:22.058Z"
+  "builtAt": "2026-06-03T22:20:29.504Z"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starlove/orbit",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Starscape Orbit — local-first, pretty, human-ai-first kanban system.",
   "license": "AGPL-3.0",
   "type": "module",

package/public/js/starscape.js

@@ -14,6 +14,8 @@ import {
   THEME_CHANGE_EVENT,
   applyStoredThemePreference,
   currentTheme,
+  storedThemePreference,
+  setThemePreference,
   toggleThemePreference
 } from "./theme-preference.js";
 
@@ -42,6 +44,14 @@ themeToggle?.addEventListener("click", () => {
   toggleThemePreference();
 });
 
+// When there's no explicit user preference stored, track OS changes live so
+// data-theme stays in sync and CSS selectors ([data-theme="dark"]) keep working.
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+  if (!storedThemePreference()) {
+    setThemePreference(e.matches ? "dark" : "light", { notify: true });
+  }
+});
+
 window.addEventListener(THEME_CHANGE_EVENT, () => {
   syncThemeIcon();
   starscape.sync();

package/public/js/theme-preference.js

@@ -37,20 +37,27 @@ export function storedThemePreference(storage = safeStorage()) {
   return THEMES.has(value) ? value : null;
 }
 
+function systemTheme() {
+  try {
+    return globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  } catch {
+    return "light";
+  }
+}
+
 export function currentTheme({ doc = safeDocument(), storage = safeStorage() } = {}) {
   const rootTheme = safeDocument(doc)?.documentElement?.getAttribute?.("data-theme");
-  return THEMES.has(rootTheme) ? rootTheme : storedThemePreference(storage) ?? "light";
+  if (THEMES.has(rootTheme)) return rootTheme;
+  return storedThemePreference(storage) ?? systemTheme();
 }
 
 export function applyStoredThemePreference({
   doc = safeDocument(),
   storage = safeStorage()
 } = {}) {
-  const storedTheme = storedThemePreference(storage);
-  if (storedTheme) {
-    safeDocument(doc)?.documentElement?.setAttribute?.("data-theme", storedTheme);
-  }
-  return currentTheme({ doc, storage });
+  const theme = storedThemePreference(storage) ?? systemTheme();
+  safeDocument(doc)?.documentElement?.setAttribute?.("data-theme", theme);
+  return theme;
 }
 
 export function setThemePreference(theme, {

package/public/styles.css

@@ -1761,7 +1761,7 @@ button.add-card-phantom::after,
   position: relative;
 }
 
-.card-action-button {
+button.card-action-button {
   width: 100%;
   min-width: 11.5rem;
   display: grid;
@@ -1779,18 +1779,18 @@ button.add-card-phantom::after,
   cursor: url('cursors/live_link.cur'), pointer;
 }
 
-.card-action-menu-item.has-submenu > .card-action-button {
+.card-action-menu-item.has-submenu > button.card-action-button {
   grid-template-columns: 1fr auto;
 }
 
-.card-action-button:hover,
-.card-action-button:focus-visible,
-.card-action-menu-item.is-open > .card-action-button {
+button.card-action-button:hover,
+button.card-action-button:focus-visible,
+.card-action-menu-item.is-open > button.card-action-button {
   outline: none;
   background: rgba(var(--accent-rgb), 0.12);
 }
 
-.card-action-button:disabled {
+button.card-action-button:disabled {
   cursor: default;
   color: var(--orbit-text-muted);
   opacity: 0.82;
@@ -1808,12 +1808,12 @@ button.add-card-phantom::after,
   white-space: nowrap;
 }
 
-.card-action-menu-item.is-danger > .card-action-button {
+.card-action-menu-item.is-danger > button.card-action-button {
   color: #b42318;
 }
 
-.card-action-menu-item.is-danger > .card-action-button:hover,
-.card-action-menu-item.is-danger > .card-action-button:focus-visible {
+.card-action-menu-item.is-danger > button.card-action-button:hover,
+.card-action-menu-item.is-danger > button.card-action-button:focus-visible {
   background: rgba(var(--red-rgb), 0.12);
 }
 
@@ -1839,13 +1839,13 @@ button.add-card-phantom::after,
 
 [data-theme="dark"] .card-action-menu,
 [data-theme="dark"] .card-action-submenu {
-  color: var(--starlight);
+  color: var(--orbit-text);
   background: rgba(var(--cosmos-rgb), 0.96);
   border-color: rgba(var(--starlight-rgb), 0.16);
   box-shadow: 0 18px 48px rgba(var(--void-rgb), 0.55), 0 0 0 1px rgba(var(--starlight-rgb), 0.04);
 }
 
-[data-theme="dark"] .card-action-menu-item.is-danger > .card-action-button {
+[data-theme="dark"] .card-action-menu-item.is-danger > button.card-action-button {
   color: #fca5a5;
 }