Internal APIs

/**
 * Get or update the dark mode store with user configuration
 * @param userTheme - Optional partial configuration to merge with stored settings
 * @returns Complete DarkModeStore configuration object
 */
function store(userTheme?: Partial<DarkModeStore>): DarkModeStore;

/**
 * Persist dark mode settings to localStorage
 * @param newStore - Complete store configuration to persist
 */
function updateStore(newStore: DarkModeStore): void;

import { store, updateStore } from 'storybook-dark-mode';

// Get current store configuration
const currentStore = store();
console.log('Current theme:', currentStore.current);

// Update store with new configuration
const updatedStore = store({
  current: 'dark',
  darkClass: ['custom-dark'],
  stylePreview: true
});

// Manually persist configuration
updateStore(updatedStore);

/**
 * MediaQueryList that matches dark color scheme preference
 * Used for automatic theme detection when user hasn't explicitly set preference
 */
const prefersDark: MediaQueryList;

import { prefersDark } from 'storybook-dark-mode';

// Check current OS preference
console.log('OS prefers dark mode:', prefersDark.matches);

// Listen for OS preference changes
const handlePreferenceChange = (event: MediaQueryListEvent) => {
  console.log('OS preference changed to:', event.matches ? 'dark' : 'light');
};

prefersDark.addListener(handlePreferenceChange);

// Cleanup listener
prefersDark.removeListener(handlePreferenceChange);

/**
 * Main dark mode toolbar component
 * @param props - Component props containing Storybook API instance
 * @returns React component rendering theme toggle button
 */
function DarkMode(props: DarkModeProps): React.ReactElement;

interface DarkModeProps {
  /** Storybook manager API instance */
  api: API;
}

/** localStorage key used for persisting theme settings */
const STORAGE_KEY: 'sb-addon-themes-3';

/** Default parameter values used when no user configuration is provided */
interface DefaultParams {
  classTarget: 'body';
  dark: ThemeVars;
  darkClass: ['dark'];
  light: ThemeVars;
  lightClass: ['light'];
  stylePreview: false;
  userHasExplicitlySetTheTheme: false;
}

/**
 * Convert string or array of class names to array format
 * @param classes - Single class name or array of class names
 * @returns Array of class names
 */
function arrayify(classes: string | string[]): string[];

/**
 * Apply theme classes to specified element
 * @param el - Target element to apply classes to
 * @param store - Theme store configuration
 */
function toggleDarkClass(el: Element, store: DarkModeStore): void;

/**
 * Update preview iframe with current theme classes
 * @param store - Theme store configuration
 */
function updatePreview(store: DarkModeStore): void;

/**
 * Update manager iframe with current theme classes
 * @param store - Theme store configuration
 */
function updateManager(store: DarkModeStore): void;

import { store, updateStore, prefersDark } from 'storybook-dark-mode';

// Initialize with custom defaults
const customStore = store({
  current: prefersDark.matches ? 'dark' : 'light',
  darkClass: ['app-dark', 'high-contrast'],
  lightClass: ['app-light', 'standard-contrast'],
  stylePreview: true,
  classTarget: 'html'
});

// Update and persist
updateStore(customStore);

import { store, updateStore } from 'storybook-dark-mode';
import { themes } from '@storybook/theming';

// Dynamically update theme based on user preferences
function applyUserTheme(userPrefs: UserThemePreferences) {
  const currentStore = store();
  
  const updatedStore = {
    ...currentStore,
    dark: {
      ...themes.dark,
      appBg: userPrefs.darkBackground,
      textColor: userPrefs.darkText
    },
    light: {
      ...themes.light,
      appBg: userPrefs.lightBackground,
      textColor: userPrefs.lightText
    }
  };
  
  updateStore(updatedStore);
}