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-purple: #b200ff;
- --color-dark-transparent: #222222c0;
- --color-white-transparent: #ffffffc0;
- --color-red-transparent: #c10000c0;
- --color-orange-transparent: #ff6a00c0;
- --color-blue-transparent: #007bffc0;
- --color-green-transparent: #12ba38c0;
- --color-yellow-transparent: #ffd800c0;
- --color-purple-transparent: #b200ffc0;
- --color-gray-a: #808080;
- --color-gray-b: #e2e3e5;
- --color-gray-c: #f7f7f7;
- --color-border: #222222;
- --color-border-sleep: #808080;
- --background-head-modal: #222222dd;
- --colot-text-head-modal: var(--background);
- --border-bottom-head-modal: var(--color-base);
- --height-border-bottom-head-modal: 10px;
- --background-options-modal: var(--color-gray-c);
- --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;
- --background-top-menu: var(--background-menu);
- --colot-text-icon-actibe-breadcrumb: var(--color-text);
- --color-title: var(--color-text);
- --background-title: var(--color-gray-c);
- --background: #ffffff;
- --color-text: #222222;
- --color-base: #ffd800;
- --color-base-transparent: #ffd800c0;
- --color-text-link: blue;
- --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;