Configuration
This documentation is for the preview version of the Dev Portal. If you are not part of the preview program, please refer to the current Dev Portal docs.
Customization
Theme Colors
You can customize the theme colors for both light and dark modes. Colors can be specified using hex values (which will be automatically converted to HSL) or direct HSL values.
const config = { theme: { light: { background: "#ffffff", foreground: "#020817", card: "#ffffff", cardForeground: "#020817", popover: "#ffffff", popoverForeground: "#020817", primary: "#0284c7", primaryForeground: "#ffffff", secondary: "#f1f5f9", secondaryForeground: "#020817", muted: "#f1f5f9", mutedForeground: "#64748b", accent: "#f1f5f9", accentForeground: "#020817", destructive: "#ef4444", destructiveForeground: "#ffffff", border: "#e2e8f0", input: "#e2e8f0", ring: "#0284c7", radius: "0.5rem", }, dark: { // Dark mode colors... }, }, };typescript
Available Theme Variables
The following theme variables are available for customization:
background
- Main background colorforeground
- Main text colorcard
- Card background colorcardForeground
- Card text colorpopover
- Popover background colorpopoverForeground
- Popover text colorprimary
- Primary action colorprimaryForeground
- Text color on primary backgroundssecondary
- Secondary action colorsecondaryForeground
- Text color on secondary backgroundsmuted
- Muted/subtle background colormutedForeground
- Text color for muted elementsaccent
- Accent color for highlightsaccentForeground
- Text color on accent backgroundsdestructive
- Color for destructive actionsdestructiveForeground
- Text color on destructive backgroundsborder
- Border colorinput
- Input field border colorring
- Focus ring colorradius
- Border radius value
Font
External source
const config = { theme: { sans: { fontFamily: "Roboto, sans-serif", url: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap", }, // same for `mono` }, };typescript
Local source
To use local fonts you can add them to the public
folder and create a fonts.css
in there:
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; src: url("/roboto-400.woff2") format("woff2"); } /* ... */css
Then you can create a font
object in your config as above and set the url
to /fonts.css
.
const config = { theme: { sans: { fontFamily: "Roboto, sans-serif", url: "/fonts.css", }, }, };typescript