Skip to content

Default Theme ​

The default theme in Morpheme UI provides a set of default values for various elements of the user interface. This includes colors and sizes for various components.

Colors ​

The default theme includes the following colors that can be used throughout the UI:

  • primary: The primary color is used for the main action or emphasis in the UI.
  • secondary: The secondary color is used for secondary actions and additional information.
  • info: The info color is used to convey information or neutral messages.
  • warning: The warning color is used to highlight potential issues or warnings.
  • success: The success color is used to indicate successful actions or positive results.
  • error: The error color is used to indicate failed actions or negative results.

Sizes ​

The default theme includes the following sizes that can be used for various UI elements:

  • xxs: The smallest size.
  • xs: Extra small size.
  • sm: Small size.
  • md: Medium size.
  • lg: Large size.
  • xl: Extra large size.

Examples ​

Here are some examples of how these colors and sizes can be used in the UI:

vue
<template>
  <VAlert color="error"> Failed to create new account </VAlert>
  <VBtn size="sm"> Retry last action </VBtn>
</template>
<template>
  <VAlert color="error"> Failed to create new account </VAlert>
  <VBtn size="sm"> Retry last action </VBtn>
</template>

Keep in mind that these are just default values and can be customized as needed.