import { type Theme } from '@scalar/themes';
import type { WorkspaceStore } from '@scalar/workspace-store/client';
import { type MaybeRefOrGetter } from 'vue';
/**
 * useTheme
 *
 * Reactive Vue.js hook to resolve and generate a <style> tag string based on the current theme.
 * Automatically selects the appropriate theme styles in the following priority order:
 *    1. Workspace theme (from the provided store, e.g. store.workspace['x-scalar-theme'])
 *    2. Fallback theme (from the fallbackThemeSlug prop)
 *    3. Default built-in theme (with slug "default")
 *
 * The returned `themeStyleTag` can be injected into your page to dynamically apply theming.
 *
 * @example
 * ```ts
 * // In a Vue component setup() function
 * import { ref } from 'vue'
 * import { useTheme } from './use-theme.js'
 *
 * const myThemes = ref([...])
 * const workspaceStore = ref(...)
 * const fallbackThemeSlug = ref('dark')
 *
 * const { themeStyleTag } = useTheme({
 *   customThemes: myThemes,
 *   fallbackThemeSlug,
 *   store: workspaceStore
 * })
 *
 * // To inject in template:
 * // <div v-html="themeStyleTag"></div>
 * ```
 */
export declare const useTheme: ({ fallbackThemeSlug, store, customThemes, }: {
    customThemes: MaybeRefOrGetter<Theme[]>;
    fallbackThemeSlug: MaybeRefOrGetter<string>;
    store: MaybeRefOrGetter<WorkspaceStore | null>;
}) => {
    /**
     * Computed ref containing the resolved theme styles object
     * for the currently active theme. Always returns a style object,
     * never null, with proper fallback logic if custom or workspace themes are missing.
     */
    themeStyles: import("vue").ComputedRef<{
        themeStyles: string;
        themeSlug: string;
    }>;
    /**
     * Computed ref containing a <style> tag as a string,
     * ready to be injected into the DOM.
     * This wraps the currently active theme CSS variables/styles.
     */
    themeStyleTag: import("vue").ComputedRef<string>;
};
//# sourceMappingURL=use-theme.d.ts.map