Default Config

The default config is set with values such as initialColorMode used in Color Mode.

Here are the actual set values.

const config: ThemeConfig = {
  initialColorMode: "light",
  disableTransitionOnChange: false,
  var: { prefix: "ui" },
  breakpoint: { direction: "down", identifier: "@media screen" },
}

Copied!

Property		Description	Default
`initialThemeScheme`		Initial value of the theme used in Switching Themes.	`"base"`
`initialColorMode`		Initial value of the Color Mode. Accepts `light`, `dark`, `system`.	`"light"`
`disableTransitionOnChange`		Setting to avoid unnecessary movements such as transitions during Color Mode switching.	`false`
`locale`		Initial value of the locale used in Calendar and FormatNumber.	navigator.language
`breakpoint`		Setting of breakpoints used in Responsive Styles.
	`direction`	Set the direction of breakpoints used in Responsive Styles. In the case of `"up"`, it becomes mobile-first with `@media(min-width)`, and in the case of `"down"`, it becomes PC-first responsive style with `@media(max-width)`.	`"down"`
	`base`	The base value for the `breakpoint` when `direction` is "down". This is treated as the largest `breakpoint`.	`"9999px"`
	`identifier`	Set the query of breakpoints used in Responsive Styles.	`"@media screen"`
`var`		Setting used in CSS `custom properties`.
	`prefix`	Set the prefix used in CSS `custom properties`.	`"ui"`
`theme`		Setting used in CSS Customize Theme.
	`responsive`	If `true`, theme tokens will accept responsive objects.	`false`
`loading`		Setting used in Loading.
	`screen`	Set the options for screen loading.	`undefined`
	`page`	Set the options for page loading.	`undefined`
	`background`	Set the options for background loading.	`undefined`
	`custom`	Set the options for custom loading.	`undefined`
`alert`		Setting used in Alert.
	`statuses`	Set the status of Alert.	`undefined`
`status`		Setting used in Status.
	`statuses`	Set the status of Status.	`undefined`
`notice`		Setting used in Notice.
	`options`	Set the options for Notice.	`undefined`
	`variants`	Set the variants for Notice.	`undefined`
	`gap`	Set the gap between Notice.	`"md"`
	`appendToParentPortal`	Set whether to add the portal to the node of the parent portal when the portal is in the parent portal.	`true`
	`containerRef`	Set the `ref` of the component where the portal is attached.	`undefined`
	`listProps`	Props for Notice list element.	`undefined`
	`itemProps`	Props for Notice item element.	`undefined`
`snacks`		Setting used in Snacks.
	`options`	Set the options for Snacks.	`undefined`
	`variants`	Set the variants for Snacks.	`undefined`
	`gap`	Set the gap between Snacks.	`"md"`
	`gutter`	Set the vertical spacing of Snacks.	`[0, 0]`
	`negateMargin`	Set whether to apply a negative margin to `gutter`.	`true`
`motion`		Setting used in Motion.
	`config`	Set the options for Motion.	`undefined`

Edit this page on GitHub

PreviousConfigure NextCustomize Config