The predefined themes of the library are directly set in the template.

You can also set custom themes in the following way:

All styling of AstrolUi components is based on CSS variables, so if you wish, you can reconfigure their values to personalize the appropriate style for your design, with your brand's colors, sizes, and fonts.

• --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;