Royal AIO (10 Colors) Theme: Complete Customization GuideIntroduction
The Royal AIO (10 Colors) Theme is a versatile UI package designed for users who want a polished, cohesive look across their applications or websites while retaining the flexibility to switch color schemes based on mood, brand identity, or seasonal needs. This guide walks you through everything you need to know to customize, apply, and optimize the Royal AIO theme across different platforms — from basic setup to advanced tweaks.
What’s Included in Royal AIO (10 Colors)
- 10 pre-defined color palettes that cover a broad range of moods — from regal blues and purples to vibrant accent colors.
- A set of reusable UI components: buttons, forms, alerts, cards, modals, and navigation bars.
- Typography guidelines with recommended font pairings and sizes.
- Icon set and SVGs adapted for each color variant.
- CSS variables (custom properties) and a ready-to-use SCSS file for deeper customization.
- Demo pages and templates to preview each color variant in real-world layouts.
Why Use Royal AIO?
- Consistency: Centralized variables ensure color and spacing stay uniform across the project.
- Flexibility: Switch themes dynamically without rewriting component styles.
- Accessibility-aware: Built with contrast checks and ARIA-friendly components in mind.
- Developer-friendly: SCSS variables and well-structured components speed up integration.
Quick Start — Installing the Theme
-
Unpack the theme archive into your project directory (e.g., /themes/royal-aio).
-
Include the main CSS or SCSS in your build process:
# If using npm npm install # or copy files into your project and import main.scss -
Link the stylesheet in your HTML head:
<link rel="stylesheet" href="themes/royal-aio/dist/royal-aio.css"> -
Add the theme root class to your body to enable default palette:
<body class="royal-aio royal-aio-blue">
Understanding the Color System
Royal AIO uses CSS variables for each color role (primary, secondary, accent, background, surface, border, text). Example variables:
:root { --ra-primary: #2b6cb0; --ra-primary-contrast: #ffffff; --ra-bg: #f8fafc; --ra-surface: #ffffff; --ra-border: #e2e8f0; --ra-text: #2d3748; } Each of the 10 palettes overrides these variables. Swapping palettes is as simple as changing the body class (e.g., royal-aio-emerald, royal-aio-indigo).
Applying a Palette Dynamically (JavaScript)
To allow users to switch themes without reloading the page, toggle the palette class:
function setPalette(paletteName) { const body = document.body; body.classList.remove(...Array.from(body.classList).filter(c => c.startsWith('royal-aio-'))); body.classList.add(`royal-aio-${paletteName}`); } // Example: switch to 'crimson' setPalette('crimson'); Component Customization
- Buttons: Use utility modifiers to change look quickly: .btn, .btn-outline, .btn-flat. They inherit –ra-primary by default.
- Cards: Cards use –ra-surface background and –ra-border for outlines; add .card-elevated for shadows.
- Forms: Inputs use –ra-border and focus uses –ra-primary with a 2px ring for accessibility.
- Navigation: The theme provides primary and inverted nav styles; switch via .nav-inverted.
Example SCSS override:
.royal-aio { --ra-primary: #6b46c1; // customize global primary .btn-primary { background: var(--ra-primary); color: var(--ra-primary-contrast); } } Typography & Spacing
Follow the theme’s scale:
- Headings: Use scale 1.25–2.0 rem depending on hierarchy.
- Body: 16px base with 1.5 line-height.
- Spacing: Use a 4px base unit; multiples for padding/margins (4, 8, 12, 16…).
Pro tip: Use modular scale for consistent rhythm — e.g., 1, 1.125, 1.25, 1.5.
Accessibility Tips
- Always check contrast for text on colored backgrounds; adjust –ra-primary-contrast when necessary.
- Ensure focus outlines are visible: the theme includes a focus ring using –ra-primary.
- Use semantic HTML and ARIA attributes provided in the component demos.
Performance & Optimization
- Use the compiled CSS for production; tree-shake any unused component SCSS.
- Minify and gzip assets.
- Use critical CSS for above-the-fold content to reduce render-blocking.
Theming in Frameworks
- React: Wrap your app in a ThemeProvider or toggle body class in a top-level effect.
- Vue: Use reactive state to manage palette and persist choice to localStorage.
- Angular: Toggle classes on the root component and provide SCSS variables via styles.scss.
Example React hook:
import { useEffect } from 'react'; function usePalette(palette) { useEffect(() => { document.body.classList.forEach(c => { if (c.startsWith('royal-aio-')) document.body.classList.remove(c); }); document.body.classList.add(`royal-aio-${palette}`); }, [palette]); } Creating Your Own Palette
- Pick a primary hue and generate light/dark variants.
- Define contrast text for each color (use WCAG AA/AAA tools).
- Set neutral background and surface colors.
- Update the CSS variables and add a new body class.
Example:
.royal-aio-olive { --ra-primary: #556b2f; --ra-primary-contrast: #ffffff; --ra-bg: #f7faf6; --ra-surface: #ffffff; --ra-border: #dfe7d8; --ra-text: #2f3a22; } Troubleshooting Common Issues
- Colors not updating: ensure body class is correct and cache is cleared.
- Contrast failures: adjust contrast variables or use lighter/darker shades.
- Component overlap: check z-index variables and elevation classes.
Final Notes
Royal AIO (10 Colors) Theme balances aesthetics with practicality: easily switchable palettes, accessible defaults, and structured components make it suitable for both designers and developers. Start with the provided palettes, then iterate—small variable tweaks unlock big visual changes.
If you want, I can: provide a downloadable CSS/SCSS starter file, generate palette swatches with hex codes for the 10 themes, or create sample HTML pages demonstrating each palette. Which would you like?
Leave a Reply