Merge pull request #5 from script-development/fs-theme

feat: add @script-development/fs-theme package

Author: Goosterhof

package-lock.json

@@ -0,0 +1,48 @@
+{
+  "name": "@script-development/fs-theme",
+  "version": "0.1.0",
+  "description": "Reactive theme service factory with dark/light mode, system preference detection, and storage persistence",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/script-development/fs-packages.git",
+    "directory": "packages/theme"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "lint:pkg": "publint && attw --pack",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "devDependencies": {
+    "jsdom": "^29.0.1",
+    "vue": "^3.5.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  }
+}

packages/theme/package.json

@@ -0,0 +1,2 @@
+export { createThemeService, getSystemThemePreference } from "./theme";
+export type { Theme, ThemeService, ThemeStorageContract } from "./types";

packages/theme/src/index.ts

@@ -0,0 +1,32 @@
+import type { Theme, ThemeService, ThemeStorageContract } from "./types";
+
+import { ref } from "vue";
+
+const STORAGE_KEY = "theme";
+
+const applyTheme = (theme: Theme): void => {
+  if (theme === "light") document.documentElement.setAttribute("data-theme", "light");
+  else document.documentElement.removeAttribute("data-theme");
+};
+
+export const getSystemThemePreference = (): Theme =>
+  typeof window.matchMedia === "function" &&
+  window.matchMedia("(prefers-color-scheme: light)").matches
+    ? "light"
+    : "dark";
+
+export const createThemeService = (storage: ThemeStorageContract): ThemeService => {
+  const stored = storage.get<Theme>(STORAGE_KEY) ?? getSystemThemePreference();
+  applyTheme(stored);
+
+  const isDark = ref(stored === "dark");
+
+  const toggleTheme = (): void => {
+    isDark.value = !isDark.value;
+    const theme: Theme = isDark.value ? "dark" : "light";
+    storage.put(STORAGE_KEY, theme);
+    applyTheme(theme);
+  };
+
+  return { isDark, toggleTheme };
+};

packages/theme/src/theme.ts

@@ -0,0 +1,21 @@
+import type { Ref } from "vue";
+
+export type Theme = "dark" | "light";
+
+/**
+ * Minimal storage contract for theme persistence.
+ *
+ * Intentionally mirrors the `get`/`put` shape of `@script-development/fs-storage`'s
+ * `StorageService` interface — any fs-storage instance satisfies this contract without
+ * importing it. This keeps the packages loosely coupled: fs-theme depends on a shape,
+ * not a package.
+ */
+export type ThemeStorageContract = {
+  get: <T>(key: string) => T | undefined;
+  put: (key: string, value: unknown) => void;
+};
+
+export type ThemeService = {
+  isDark: Ref<boolean>;
+  toggleTheme: () => void;
+};