diff --git a/ts/graphs/CalendarGraph.svelte b/ts/graphs/CalendarGraph.svelte
index 8e88cdf55..0ad08d0b8 100644
--- a/ts/graphs/CalendarGraph.svelte
+++ b/ts/graphs/CalendarGraph.svelte
@@ -3,12 +3,13 @@
     import AxisTicks from "./AxisTicks.svelte";
     import { defaultGraphBounds, RevlogRange } from "./graph-helpers";
     import { gatherData, renderCalendar } from "./calendar";
+    import type { PreferenceStore } from "./preferences";
     import type { GraphData } from "./calendar";
     import type pb from "anki/backend_proto";
     import type { I18n } from "anki/i18n";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
-    export let preferences: pb.BackendProto.GraphsPreferencesOut | null = null;
+    export let preferences: PreferenceStore | null = null;
     export let revlogRange: RevlogRange;
     export let i18n: I18n;
     export let nightMode: boolean;
diff --git a/ts/graphs/calendar.ts b/ts/graphs/calendar.ts
index 49d127bcc..3d6553480 100644
--- a/ts/graphs/calendar.ts
+++ b/ts/graphs/calendar.ts
@@ -178,7 +178,7 @@ export function renderCalendar(
         .attr("height", height - 2)
         .attr("x", x(1)! - 3)
         .attr("y", (_d, index) => bounds.marginTop + index * height)
-        .attr("fill", emptyColour)
+        .attr("fill", nightMode ? "#ddd" : "black")
         .attr("dominant-baseline", "hanging")
         .attr("text-anchor", "end")
         .attr("font-size", "small")
diff --git a/ts/graphs/graph-helpers.ts b/ts/graphs/graph-helpers.ts
index fe54cfdc7..8047e45f0 100644
--- a/ts/graphs/graph-helpers.ts
+++ b/ts/graphs/graph-helpers.ts
@@ -8,6 +8,7 @@
 
 import pb from "anki/backend_proto";
 import type { Selection } from "d3-selection";
+import type { PreferencePayload } from "./preferences";
 import { postRequest } from "anki/postrequest";
 
 export async function getGraphData(
@@ -25,10 +26,8 @@ export async function getGraphPreferences(): Promise<pb.BackendProto.GraphsPrefe
     );
 }
 
-export async function setGraphPreferences(
-    prefs: pb.BackendProto.GraphsPreferencesOut
-): Promise<void> {
-    return (async () => {
+export async function setGraphPreferences(prefs: PreferencePayload): Promise<void> {
+    return (async (): Promise<void> => {
         await postRequest(
             "/_anki/setGraphPreferences",
             pb.BackendProto.GraphsPreferencesOut.encode(prefs).finish()
diff --git a/ts/graphs/preferences.ts b/ts/graphs/preferences.ts
index 8b64a4b06..9a235b2b8 100644
--- a/ts/graphs/preferences.ts
+++ b/ts/graphs/preferences.ts
@@ -1,28 +1,39 @@
 import type pb from "anki/backend_proto";
 import { getGraphPreferences, setGraphPreferences } from "./graph-helpers";
-import { writable, get } from "svelte/store";
+import { Writable, writable, get } from "svelte/store";
 
-export interface CustomStore<T> {
+export interface CustomStore<T> extends Writable<T> {
     subscribe: (getter: (value: T) => void) => () => void;
     set: (value: T) => void;
 }
 
 export type PreferenceStore = {
-    [K in keyof pb.BackendProto.GraphsPreferencesOut]: CustomStore<
+    [K in keyof Omit<pb.BackendProto.GraphsPreferencesOut, "toJSON">]: CustomStore<
         pb.BackendProto.GraphsPreferencesOut[K]
     >;
 };
 
+export type PreferencePayload = {
+    [K in keyof Omit<
+        pb.BackendProto.GraphsPreferencesOut,
+        "toJSON"
+    >]: pb.BackendProto.GraphsPreferencesOut[K];
+};
+
 function createPreference<T>(
     initialValue: T,
     savePreferences: () => void
 ): CustomStore<T> {
-    const { subscribe, set } = writable(initialValue);
+    const { subscribe, set, update } = writable(initialValue);
 
     return {
         subscribe,
-        set: (v: T): void => {
-            set(v);
+        set: (value: T): void => {
+            set(value);
+            savePreferences();
+        },
+        update: (updater: (value: T) => T): void => {
+            update(updater);
             savePreferences();
         },
     };
@@ -33,12 +44,14 @@ function preparePreferences(
 ): PreferenceStore {
     const preferences: Partial<PreferenceStore> = {};
 
-    function constructPreferences(): pb.BackendProto.GraphsPreferencesOut {
-        const payload: Partial<pb.BackendProto.GraphsPreferencesOut> = {};
-        for (const [key, pref] of Object.entries(preferences as PreferenceStore)) {
-            payload[key] = get(pref as any);
+    function constructPreferences(): PreferencePayload {
+        const payload: Partial<PreferencePayload> = {};
+
+        for (const key in preferences as PreferenceStore) {
+            payload[key] = get(preferences[key]);
         }
-        return payload as pb.BackendProto.GraphsPreferencesOut;
+
+        return payload as PreferencePayload;
     }
 
     function savePreferences(): void {
@@ -52,7 +65,7 @@ function preparePreferences(
     return preferences as PreferenceStore;
 }
 
-export async function getPreferences() {
+export async function getPreferences(): Promise<PreferenceStore> {
     const initialPreferences = await getGraphPreferences();
     return preparePreferences(initialPreferences);
 }