Merge branch 'theme'

src/utils/__tests__/scratch.spec.ts

@@ -0,0 +1,37 @@
+import { test, expect } from "vitest";
+import { useTitle } from "@vueuse/core";
+import { ref } from "vue";
+import type { MaybeRef } from "vue";
+
+// Test the argument of useTitle() is reactive
+test("useTitle() should be reactive", () => {
+  const title = ref("Hello World");
+  const t = useTitle(title);
+  expect(title.value).toBe("Hello World");
+  title.value = "Hello Vue";
+  expect(title.value).toBe("Hello Vue");
+  t.value = "New Title";
+  expect(t.value).toBe("New Title");
+  expect(title.value).toBe("New Title");
+});
+
+function useScratch(newScratch: MaybeRef<string>) {
+  const scratch = ref(newScratch);
+  return scratch;
+}
+
+test("useScratch() non ref arg", () => {
+  const newScratch = "Hello World";
+  const scratch = useScratch(newScratch);
+  expect(scratch.value).toBe("Hello World");
+});
+
+test("useScratch() should be reactive", () => {
+  const newScratch = ref("Hello World");
+  const scratch = useScratch(newScratch);
+  expect(scratch.value).toBe("Hello World");
+  scratch.value = "Hello Vue";
+  expect(scratch.value).toBe("Hello Vue");
+  expect(newScratch.value).toBe("Hello Vue");
+  console.log(newScratch === scratch);
+});

src/utils/color-theme/color-theme.ts

@@ -25,17 +25,10 @@ function useSourceColor() {
 export function useColorTheme() {
   // https://vuetifyjs.com/en/features/theme/
   const { isDark } = useDarkMode();
-  const { sourceColor } = useSourceColor();
-
-  const optionsLight = computed(() => ({
-    sourceColor: toValue(sourceColor),
-    dark: false,
-  }));
-
-  const optionsDark = computed(() => ({
-    sourceColor: toValue(sourceColor),
-    dark: true,
-  }));
+  const { sourceColor: sourceColorHex } = useSourceColor();
+
+  const optionsLight = { sourceColorHex, dark: false };
+  const optionsDark = { sourceColorHex, dark: true };
 
   const { colors: lightColors } = useDynamicColors(optionsLight);
   const { colors: darkColors } = useDynamicColors(optionsDark);

src/utils/dynamic-color/__tests__/__snapshots__/dynamic-colors.spec.ts.snap

@@ -0,0 +1,60 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`useDynamicColors > returns colors 1`] = `
+{
+  "background": "#fdf7ff",
+  "error": "#ba1a1a",
+  "error-container": "#ffdad6",
+  "inverse-on-surface": "#f5eff7",
+  "inverse-primary": "#cfbcff",
+  "inverse-surface": "#322f35",
+  "neutral-palette-key-color": "#7a767d",
+  "neutral-variant-palette-key-color": "#7a7582",
+  "on-background": "#1d1b20",
+  "on-error": "#ffffff",
+  "on-error-container": "#410002",
+  "on-primary": "#ffffff",
+  "on-primary-container": "#ffffff",
+  "on-primary-fixed": "#22005d",
+  "on-primary-fixed-variant": "#4f378a",
+  "on-secondary": "#ffffff",
+  "on-secondary-container": "#4a4162",
+  "on-secondary-fixed": "#1f1635",
+  "on-secondary-fixed-variant": "#4b4263",
+  "on-surface": "#1d1b20",
+  "on-surface-variant": "#494551",
+  "on-tertiary": "#ffffff",
+  "on-tertiary-container": "#ffffff",
+  "on-tertiary-fixed": "#241a00",
+  "on-tertiary-fixed-variant": "#594400",
+  "outline": "#7a7582",
+  "outline-variant": "#cbc4d2",
+  "primary": "#513a8d",
+  "primary-container": "#765fb4",
+  "primary-fixed": "#e9ddff",
+  "primary-fixed-dim": "#cfbcff",
+  "primary-palette-key-color": "#8069bf",
+  "scrim": "#000000",
+  "secondary": "#63597c",
+  "secondary-container": "#e5d9ff",
+  "secondary-fixed": "#e9ddff",
+  "secondary-fixed-dim": "#cdc0e9",
+  "secondary-palette-key-color": "#7c7296",
+  "shadow": "#000000",
+  "surface": "#fdf7ff",
+  "surface-bright": "#fdf7ff",
+  "surface-container": "#f2ecf4",
+  "surface-container-high": "#ece6ee",
+  "surface-container-highest": "#e6e0e9",
+  "surface-container-low": "#f8f2fa",
+  "surface-container-lowest": "#ffffff",
+  "surface-dim": "#ded8e0",
+  "surface-tint": "#6750a4",
+  "surface-variant": "#e7e0ee",
+  "tertiary": "#5d4700",
+  "tertiary-container": "#876a13",
+  "tertiary-fixed": "#ffdf93",
+  "tertiary-fixed-dim": "#e7c365",
+  "tertiary-palette-key-color": "#c9a74d",
+}
+`;