Directus / @directus/themes / index / useFonts

Function: useFonts() ​

useFonts(theme): object

Defined in: packages/themes/src/composables/use-fonts.ts:8

Parameters ​

theme ​

MaybeRef<{ appearance: "light" | "dark"; id: string; name: string; rules: { background: string; backgroundAccent: string; backgroundNormal: string; backgroundSubdued: string; banner: { art: { foreground: string; }; avatar: { background: string; borderRadius: string; foreground: string; }; background: string; borderRadius: string; headline: { fontFamily: string; fontWeight: string; foreground: string; }; padding: string; subtitle: { fontFamily: string; fontWeight: string; foreground: string; }; title: { fontFamily: string; fontWeight: string; foreground: string; }; }; borderColor: string; borderColorAccent: string; borderColorSubdued: string; borderRadius: string; borderWidth: string; danger: string; dangerAccent: string; dangerBackground: string; dangerSubdued: string; fonts: { display: { fontFamily: string; fontWeight: string; }; monospace: { fontFamily: string; fontWeight: string; }; sans: { fontFamily: string; fontWeight: string; }; serif: { fontFamily: string; fontWeight: string; }; }; foreground: string; foregroundAccent: string; foregroundSubdued: string; form: { columnGap: string; field: { input: { background: string; backgroundSubdued: string; borderColor: string; borderColorFocus: string; borderColorHover: string; boxShadow: string; boxShadowFocus: string; boxShadowHover: string; foreground: string; foregroundSubdued: string; height: string; padding: string; }; label: { fontFamily: string; fontWeight: string; foreground: string; }; }; rowGap: string; }; header: { background: string; borderColor: string; borderWidth: string; boxShadow: string; headline: { fontFamily: string; foreground: string; }; title: { fontFamily: string; fontWeight: string; foreground: string; }; }; navigation: { background: string; backgroundAccent: string; borderColor: string; borderWidth: string; list: { background: string; backgroundActive: string; backgroundHover: string; divider: { borderColor: string; borderWidth: string; }; fontFamily: string; foreground: string; foregroundActive: string; foregroundHover: string; icon: { foreground: string; foregroundActive: string; foregroundHover: string; }; }; modules: { background: string; borderColor: string; borderWidth: string; button: { background: string; backgroundActive: string; backgroundHover: string; foreground: string; foregroundActive: string; foregroundHover: string; }; }; project: { background: string; borderColor: string; borderWidth: string; fontFamily: string; foreground: string; }; }; popover: { menu: { background: string; borderRadius: string; boxShadow: string; }; }; primary: string; primaryAccent: string; primaryBackground: string; primarySubdued: string; public: { art: { background: string; primary: string; secondary: string; speed: string; }; background: string; foreground: string; foregroundAccent: string; form: { columnGap: string; field: { input: { background: ...; backgroundSubdued: ...; borderColor: ...; borderColorFocus: ...; borderColorHover: ...; boxShadow: ...; boxShadowFocus: ...; boxShadowHover: ...; foreground: ...; foregroundSubdued: ...; height: ...; padding: ...; }; label: { fontFamily: ...; fontWeight: ...; foreground: ...; }; }; rowGap: string; }; }; secondary: string; secondaryAccent: string; secondaryBackground: string; secondarySubdued: string; sidebar: { background: string; borderColor: string; borderWidth: string; fontFamily: string; foreground: string; section: { form: { columnGap: string; field: { input: ...; label: ...; }; rowGap: string; }; toggle: { background: string; backgroundActive: string; backgroundHover: string; borderColor: string; borderWidth: string; fontFamily: string; foreground: string; foregroundActive: string; foregroundHover: string; icon: { foreground: ...; foregroundActive: ...; foregroundHover: ...; }; }; }; }; success: string; successAccent: string; successBackground: string; successSubdued: string; warning: string; warningAccent: string; warningBackground: string; warningSubdued: string; }; }>

Returns ​

object

googleFonts ​

googleFonts: ComputedRef<string[]>