[@mantine/core] Local storage color scheme manager was unabl

Error message

[@mantine/core] Local storage color scheme manager was unable to save color scheme.

What it means

A console.warn from @mantine/core's default color scheme manager (localStorageColorSchemeManager) when saving the color scheme to window.localStorage throws. The color scheme still applies for the current session; it just won't persist across reloads. The error object is logged alongside the message to identify the cause.

Source

Thrown at packages/@mantine/core/src/core/MantineProvider/color-scheme-managers/local-storage-manager.ts:33

    get: (defaultValue) => {
      if (typeof window === 'undefined') {
        return defaultValue;
      }

      try {
        const storedColorScheme = window.localStorage.getItem(key);
        return isMantineColorScheme(storedColorScheme) ? storedColorScheme : defaultValue;
      } catch {
        return defaultValue;
      }
    },

    set: (value) => {
      try {
        window.localStorage.setItem(key, value);
      } catch (error) {
        // oxlint-disable-next-line no-console
        console.warn(
          '[@mantine/core] Local storage color scheme manager was unable to save color scheme.',
          error
        );
      }
    },

    subscribe: (onUpdate) => {
      handleStorageEvent = (event) => {
        if (event.storageArea === window.localStorage && event.key === key) {
          isMantineColorScheme(event.newValue) && onUpdate(event.newValue);
        }
      };

      window.addEventListener('storage', handleStorageEvent);
    },

    unsubscribe: () => {
      window.removeEventListener('storage', handleStorageEvent);

View on GitHub (pinned to 8a284e2c2c)

Solutions

Confirm storage access is the issue by reading the logged error object (quota vs SecurityError)
If persistence is optional, ignore the warning — color scheme switching still works per-session
Use a custom color scheme manager that falls back to cookies or in-memory storage: new MantineProvider({ forceColorScheme }) or pass a custom colorSchemeManager implementing get/set without localStorage
For iframes, request storage access via document.requestStorageAccess() before saving

Example fix

// before
<MantineProvider>
  <App />
</MantineProvider>

// after
import { MantineProvider, createTheme } from '@mantine/core';

// in-memory manager: no localStorage, no warning
const memoryManager = {
  get: () => undefined,
  set: () => {},
  clear: () => {},
};

<MantineProvider colorSchemeManager={memoryManager}>
  <App />
</MantineProvider>

Defensive patterns

Strategy: fallback

Validate before calling

function canPersistColorScheme(): boolean {
  try {
    window.localStorage.setItem('__cs__', 'auto');
    window.localStorage.removeItem('__cs__');
    return true;
  } catch {
    return false;
  }
}

Try / catch

// Library catches internally; to avoid the warning entirely, supply a manager that cannot fail:
// see custom colorSchemeManager below.

Prevention

Pass a custom colorSchemeManager when embedding Mantine in iframes or privacy-sensitive contexts
Consider cookie-based persistence as a fallback medium
Do not rely on persisted color scheme being available; support forceColorScheme as an override
Silence expected warnings in tests with a console.warn spy

When it happens

Trigger: MantineProvider mounts or the color scheme changes (user toggles dark/light), and window.localStorage.setItem(key, value) throws — blocked storage in privacy settings, third-party iframe context, or storage quota exceeded. The default manager key is 'mantine-color-scheme' unless customized.

Common situations: Embedded apps (widgets, chat plugins) in third-party iframes with cookies blocked; Safari private mode / ITP; 'Block all cookies' browser settings; privacy extensions; SSR setups where localStorage access fails during hydration.

Related errors

AI-assisted analysis of mantinedev/mantine@8a284e2c2c (2026-08-28). Data as JSON: /api/errors/6776aa50cee7ebe2. Report an issue: GitHub.