Directus / @directus/themes / index / useTheme

Function: useTheme() ​

useTheme(darkMode, themeLight, themeDark, themeLightOverrides, themeDarkOverrides): object

Defined in: packages/themes/src/composables/use-theme.ts:11

Parameters ​

darkMode ​

MaybeRef<boolean>

themeLight ​

MaybeRef<null | string>

themeDark ​

MaybeRef<null | string>

themeLightOverrides ​

MaybeRef<{ 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; }>

themeDarkOverrides ​

MaybeRef<{ 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

theme ​

theme: ComputedRef<{ appearance: "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: string; borderColor: string; borderColorFocus: string; borderColorHover: string; boxShadow: string; boxShadowFocus: string; boxShadowHover: string; foreground: string; foregroundSubdued: string; height: string; padding: string; }; label: { fontFamily: string; foreground: string; }; }; 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: { background: string; borderColor: string; borderColorFocus: string; borderColorHover: string; boxShadow: string; boxShadowFocus: string; boxShadowHover: string; foreground: string; foregroundSubdued: string; height: string; padding: string; }; }; label: { fontFamily: string; foreground: string; }; rowGap: string; }; toggle: { background: string; backgroundActive: string; backgroundHover: string; borderColor: string; borderWidth: string; fontFamily: string; foreground: string; foregroundActive: string; foregroundHover: string; icon: { foreground: string; foregroundActive: string; foregroundHover: string; }; }; }; }; success: string; successAccent: string; successBackground: string; successSubdued: string; warning: string; warningAccent: string; warningBackground: string; warningSubdued: string; }; } | { appearance: "light"; 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: string; borderColor: string; borderColorFocus: string; borderColorHover: string; boxShadow: string; boxShadowFocus: string; boxShadowHover: string; foreground: string; foregroundSubdued: string; height: string; padding: string; }; }; label: { fontFamily: string; foreground: string; }; 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: { background: string; borderColor: string; borderColorFocus: string; borderColorHover: string; boxShadow: string; boxShadowFocus: string; boxShadowHover: string; foreground: string; foregroundSubdued: string; height: string; padding: string; }; }; label: { fontFamily: string; foreground: string; }; rowGap: string; }; toggle: { background: string; backgroundActive: string; backgroundHover: string; borderColor: string; borderWidth: string; fontFamily: string; foreground: string; foregroundActive: string; foregroundHover: string; icon: { foreground: string; foregroundActive: string; foregroundHover: string; }; }; }; }; success: string; successAccent: string; successBackground: string; successSubdued: string; warning: string; warningAccent: string; warningBackground: string; warningSubdued: string; }; }>