Los temas predefinidos de la biblioteca se establecen directamente en la plantilla.

Usted puede establecer de igual modo temas personalizados, de la siguiente manera:

Todo el estilizado de componentes de AstrolUi esta basado en variables css, de tal manera que si usted lo desea puede reconfigurar sus valores para personalizar el estilo adecuado a si diseño, con los colores, tamaños y fuentes de su marca.

• --color-dark: #222222;
• --color-white: #ffffff;
• --color-red: #c10000;
• --color-orange: #ff6a00;
• --color-blue: #007bff;
• --color-green: #12ba38;
• --color-yellow: #ffd800;
• --color-purple: #b200ff;
• /*------Gray-------------*/
• --color-dark-transparent: #222222c0;
• --color-white-transparent: #ffffffc0;
• --color-red-transparent: #c10000c0;
• --color-orange-transparent: #ff6a00c0;
• --color-blue-transparent: #007bffc0;
• --color-blue-transparent-35: #007bff35;
• --color-green-transparent: #12ba38c0;
• --color-green-transparent-35: #12ba382a;
• --color-yellow-transparent: #ffd800c0;
• --color-purple-transparent: #b200ffc0;
• /*------Gray-------------*/
• --color-gray-a: #808080;
• --color-gray-b: #e2e3e5;
• --color-gray-c: #f7f7f7;
• --color-gray-a-transaprent: #808080c0;
• /*------Border-----------*/
• --color-border: var(--color-dark);
• --color-border-sleep: #808080;
• /*------Modal-------------*/
• --background-head-modal: #222222dd;
• --colot-text-head-modal: var(--background);
• --border-bottom-head-modal: var(--color-base);
• --height-border-bottom-head-modal: 5px;
• --background-options-modal: var(--color-gray-c);
• /*------Menu-------------*/
• --background-menu: var(--color-gray-c);
• --color-text-menu: var(--color-text);
• --color-icon-menu: var(--color-text);
• --color-boder-menu: var(--color-text);
• --color-icon-sub-menu: var(--color-text);
• --color-boder-sub-menu: var(--color-text);
• --background-icon-menu: var(--color-base);
• --background-icon-sub-menu: var(--background);
• --background-is-new: var(--color-text);
• --color-text-is-new: var(--background);
• --color-hover-menu: #0000001b;
• /*------Top Menu-------------*/
• --background-top-menu: #dedede;
• /*------Breadcrumb-------------*/
• --colot-text-icon-actibe-breadcrumb: var(--color-text);
• /*------Base-------------*/
• --color-title: var(--color-text);
• --background-title: var(--color-gray-c);
• --background: #ffffff;
• --color-text: var(--color-dark);
• --color-base: #ffd800;
• --color-base-transparent: #ffd800c0;
• --color-text-link: var(--color-blue);
• /*------Text-------------*/
• --font-size-mini: 10px;
• --font-size-mini-midle: 12px;
• --font-size-base: 14px;
• --font-size-midle: 16px;
• --font-size-title: 19px;
• --font-size-h1: 19px;
• --font-size-h2: 18px;
• --font-size-h3: 17px;
• --font-size-h4: 16px;
• --font-size-h5: 15px;
• --font-family: var(--font-sans-serif);
• --font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
• --font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
• --font-weight: 400;
• --line-height: 1.5;
• /*------Shadows-------------*/
• --shadow-control: 0 2px 2px rgba(0, 0, 0, 0.2);
• --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
• --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.16);
• /*------Surfaces-------------*/
• --surface-1: var(--background);
• --surface-2: var(--color-gray-c);
• --surface-3: var(--color-white);
• /*------Tokens UI-------------*/
• --border-color: var(--color-gray-b);
• --border-color-strong: var(--color-dark);
• --text-primary: var(--color-text);
• --text-secondary: var(--color-gray-a);
• /*------Layout-------------*/
• --layout-top-bg: var(--background-top-menu);
• --layout-menu-bg: var(--background-menu);
• --layout-body-bg: var(--background);
• --layout-border: #2a2a2a;
• --layout-shadow: var(--shadow-sm);
• --layout-text: var(--color-text);
• --layout-text-muted: var(--color-gray-a);
• --layout-hover-bg: var(--surface-2);
• --layout-active-bg: var(--surface-3);
• --layout-open-bg: var(--surface-2);