@scalar/api-client
Version:
the open source API testing client
42 lines • 1.45 kB
TypeScript
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>;
}) => {
themeStyleTag: import("vue").ComputedRef<string>;
};
//# sourceMappingURL=use-theme.d.ts.map