Skip to content
On this page

Directus Cloud

Everything you need to start building. Provisioned in 90 seconds. Starting at $15/month.

Get Started

This is an auto-generated document to support extension builders understand the internal packages they can utilize. To find our written guides, tutorials, and API/SDK reference, check out our main docs .

Directus / @directus/themes / index / ThemeSchema

Variable: ThemeSchema ​

const ThemeSchema: TObject<{ appearance: TUnion<[TLiteral<"light">, TLiteral<"dark">]>; id: TString; name: TString; rules: TObject<{ background: TOptional<TRefUnsafe<TString>>; backgroundAccent: TOptional<TRefUnsafe<TString>>; backgroundNormal: TOptional<TRefUnsafe<TString>>; backgroundSubdued: TOptional<TRefUnsafe<TString>>; banner: TOptional<TObject<{ art: TOptional<TObject<{ foreground: TOptional<...>; }>>; avatar: TOptional<TObject<{ background: TOptional<...>; borderRadius: TOptional<...>; foreground: TOptional<...>; }>>; background: TOptional<TRefUnsafe<TString>>; borderRadius: TOptional<TUnion<[TRefUnsafe<...>, TRefUnsafe<...>]>>; headline: TOptional<TObject<{ fontFamily: TOptional<...>; fontWeight: TOptional<...>; foreground: TOptional<...>; }>>; padding: TOptional<TUnion<[TRefUnsafe<...>, TRefUnsafe<...>]>>; subtitle: TOptional<TObject<{ fontFamily: TOptional<...>; fontWeight: TOptional<...>; foreground: TOptional<...>; }>>; title: TOptional<TObject<{ fontFamily: TOptional<...>; fontWeight: TOptional<...>; foreground: TOptional<...>; }>>; }>>; borderColor: TOptional<TRefUnsafe<TString>>; borderColorAccent: TOptional<TRefUnsafe<TString>>; borderColorSubdued: TOptional<TRefUnsafe<TString>>; borderRadius: TOptional<TUnion<[TRefUnsafe<TString>, TRefUnsafe<TString>]>>; borderWidth: TOptional<TRefUnsafe<TUnion<[TString, TLiteral<"thin">, TLiteral<"medium">, TLiteral<"thick">]>>>; danger: TOptional<TRefUnsafe<TString>>; dangerAccent: TOptional<TRefUnsafe<TString>>; dangerBackground: TOptional<TRefUnsafe<TString>>; dangerSubdued: TOptional<TRefUnsafe<TString>>; fonts: TOptional<TObject<{ display: TOptional<TObject<{ fontFamily: TOptional<...>; fontWeight: TOptional<...>; }>>; monospace: TOptional<TObject<{ fontFamily: TOptional<...>; fontWeight: TOptional<...>; }>>; sans: TOptional<TObject<{ fontFamily: TOptional<...>; fontWeight: TOptional<...>; }>>; serif: TOptional<TObject<{ fontFamily: TOptional<...>; fontWeight: TOptional<...>; }>>; }>>; foreground: TOptional<TRefUnsafe<TString>>; foregroundAccent: TOptional<TRefUnsafe<TString>>; foregroundSubdued: TOptional<TRefUnsafe<TString>>; form: TOptional<TObject<{ columnGap: TOptional<TUnion<[TRefUnsafe<...>, TRefUnsafe<...>]>>; field: TOptional<TObject<{ input: TOptional<...>; label: TOptional<...>; }>>; rowGap: TOptional<TUnion<[TRefUnsafe<...>, TRefUnsafe<...>]>>; }>>; header: TOptional<TObject<{ background: TOptional<TRefUnsafe<TString>>; borderColor: TOptional<TRefUnsafe<TString>>; borderWidth: TOptional<TRefUnsafe<TUnion<[..., ..., ..., ...]>>>; boxShadow: TOptional<TRefUnsafe<TString>>; headline: TOptional<TObject<{ fontFamily: TOptional<...>; foreground: TOptional<...>; }>>; title: TOptional<TObject<{ fontFamily: TOptional<...>; fontWeight: TOptional<...>; foreground: TOptional<...>; }>>; }>>; navigation: TOptional<TObject<{ background: TOptional<TRefUnsafe<TString>>; backgroundAccent: TOptional<TRefUnsafe<TString>>; borderColor: TOptional<TRefUnsafe<TString>>; borderWidth: TOptional<TRefUnsafe<TUnion<[..., ..., ..., ...]>>>; list: TOptional<TObject<{ background: TOptional<...>; backgroundActive: TOptional<...>; backgroundHover: TOptional<...>; divider: TObject<...>; fontFamily: TOptional<...>; foreground: TOptional<...>; foregroundActive: TOptional<...>; foregroundHover: TOptional<...>; icon: TOptional<...>; }>>; modules: TOptional<TObject<{ background: TOptional<...>; borderColor: TOptional<...>; borderWidth: TOptional<...>; button: TOptional<...>; }>>; project: TOptional<TObject<{ background: TOptional<...>; borderColor: TOptional<...>; borderWidth: TOptional<...>; fontFamily: TOptional<...>; foreground: TOptional<...>; }>>; }>>; popover: TOptional<TObject<{ menu: TOptional<TObject<{ background: TOptional<...>; borderRadius: TOptional<...>; boxShadow: TOptional<...>; }>>; }>>; primary: TOptional<TRefUnsafe<TString>>; primaryAccent: TOptional<TRefUnsafe<TString>>; primaryBackground: TOptional<TRefUnsafe<TString>>; primarySubdued: TOptional<TRefUnsafe<TString>>; public: TOptional<TObject<{ art: TOptional<TObject<{ background: TOptional<...>; primary: TOptional<...>; secondary: TOptional<...>; speed: TOptional<...>; }>>; background: TOptional<TRefUnsafe<TString>>; foreground: TOptional<TRefUnsafe<TString>>; foregroundAccent: TOptional<TRefUnsafe<TString>>; form: TOptional<TObject<{ columnGap: TOptional<...>; field: TOptional<...>; rowGap: TOptional<...>; }>>; }>>; secondary: TOptional<TRefUnsafe<TString>>; secondaryAccent: TOptional<TRefUnsafe<TString>>; secondaryBackground: TOptional<TRefUnsafe<TString>>; secondarySubdued: TOptional<TRefUnsafe<TString>>; sidebar: TOptional<TObject<{ background: TOptional<TRefUnsafe<TString>>; borderColor: TOptional<TRefUnsafe<TString>>; borderWidth: TOptional<TRefUnsafe<TUnion<[..., ..., ..., ...]>>>; fontFamily: TOptional<TRefUnsafe<TString>>; foreground: TOptional<TRefUnsafe<TString>>; section: TOptional<TObject<{ form: TOptional<...>; toggle: TOptional<...>; }>>; }>>; success: TOptional<TRefUnsafe<TString>>; successAccent: TOptional<TRefUnsafe<TString>>; successBackground: TOptional<TRefUnsafe<TString>>; successSubdued: TOptional<TRefUnsafe<TString>>; warning: TOptional<TRefUnsafe<TString>>; warningAccent: TOptional<TRefUnsafe<TString>>; warningBackground: TOptional<TRefUnsafe<TString>>; warningSubdued: TOptional<TRefUnsafe<TString>>; }>; }>

Defined in: packages/themes/src/schemas/theme.ts:345