@archway-kit/vue/dist/src/composables/useThemes.d.ts

Vue components to interact with the Archway network

import { ComputedRef, Ref } from 'vue';
import { ColorMode, DarkThemeConfig, LightThemeConfig, SystemThemePreference, ThemeConfig, ThemeId, ThemesConfig } from '../types';
type UseThemesReturns<T extends ThemeId> = Required<Omit<ThemesConfig<T>, 'container'>> & {
    /** Light themes available */
    lightThemes: LightThemeConfig<T>[];
    /** Dark themes available */
    darkThemes: DarkThemeConfig<T>[];
    /** Selected preference - selected theme's ID, `null` (for system) or `undefined` */
    selectedPreference: Ref<T | ColorMode | SystemThemePreference | undefined>;
    /** Preferred color mode from the browser setup */
    preferredColor: ComputedRef<ColorMode | undefined>;
    /** Theme to use when `fallback` is `light` */
    defaultLightTheme?: ThemeConfig<T>;
    /** Theme to use when `fallback` is `dark` */
    defaultDarkTheme?: ThemeConfig<T>;
    /** Theme to use when `fallback` is `null` (i.e. system) */
    systemTheme: ComputedRef<ThemeConfig<T> | undefined>;
    /** Fallback theme based on `fallback` input option */
    fallbackTheme: ComputedRef<ThemeConfig<T>>;
    /** Current theme based on user's `selectedPreference` and fallback theme */
    currentTheme: ComputedRef<ThemeConfig<T>>;
    /** Whether the current theme is light or not */
    isLight: ComputedRef<boolean>;
    /** Whether the current theme is dark or not */
    isDark: ComputedRef<boolean>;
    /** Current theme's color mode (for example, to use for theming of some 3rd party widgets) */
    currentColorMode: ComputedRef<ColorMode>;
    /** Toggle between dark and light color modes. First theme of the applied color mode will be applied */
    toggleColorMode: () => void;
    /** Html element the theme-related classes are applied to */
    container: Ref<HTMLElement | undefined>;
};
export declare const useThemes: <T extends ThemeId>() => UseThemesReturns<T>;
export {};