Inicio
PERENDERnew
Tema
Form
Componentes básicos
Visor de PDF
chartsnew
Instalación
line
Explorador de archivos
Texto enriquecido
Tema
Tema


Video tutorial


1. Demo Tema

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;

© 2025 AstrolUI v8.0.4
Se ha producido un error no controlado. Recargar 🗙