In-memory StorageManager for ColorMode

[namolnad]

Description

To prevent syncing issues between the system and the application (while the application has closed, yet the color mode has changed), I believe the color mode could be fetched from the system on each load of the application and stored in-memory (to prevent endless media queries).

Problem Statement/Justification

Using the built-in localStorage manager causes syncing issues for dark/light themes when attempting to use the system values, wherein the color mode is only changed when the system undergoes a change AND the application is open in a browser window. If the color mode has changed when the application is closed, the old value which is stored in local storage will be used until there is another syncing event detected.

Proposed Solution or API

I've hacked together a fix in my application doing the following:

class MemoryColorModeManager implements StorageManager {
  colorMode: ColorMode | undefined;

  storageType: "localStorage" | "cookie" = "localStorage";

  get type() {
    return this.storageType;
  }

  ssr = false;

  get(): ColorMode | undefined {
    return this.colorMode;
  }

  set(value: ColorMode | "system") {
    if (value === "system") {
      this.colorMode = MemoryColorModeManager.currentColorMode();
    } else {
      this.colorMode = value;
    }
  }

  static currentColorMode(): ColorMode {
    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  }
}

Alternatives

No response

Additional Information

No response

[namolnad]

Thanks for considering it!