Theming, brand integration, and extending Atomix
| Level | Scope | Complexity | Use Case |
|---|---|---|---|
| Configuration | Variables only | Low | Brand colors, spacing tweaks |
| Theming | CSS custom properties | Medium | Runtime theme switching |
| Extension | New components/utilities | Medium-High | Additional functionality |
| Architecture | System structure | High | Major modifications |
Override SCSS variables before importing Atomix
$primary-6: #your-brand-color;
$font-family-base: 'Your Font';
@use 'atomix/styles' as *;Use SCSS @use with inline configuration
@use 'atomix/styles' with (
$primary-6: #2563eb,
$font-family-base: 'Inter'
);Runtime theming with CSS variables
:root[data-theme="custom"] {
--atomix-primary: #brand;
--atomix-text-primary: #333;
}Create new components following ITCSS
.c-my-component {
--my-bg: var(--atomix-bg);
background: var(--my-bg);
}Add custom utility classes to the system
$custom-utilities: (
'aspect-ratio': (
values: (square: 1/1)
)
);Import layers selectively for optimized builds
@use 'atomix/styles/01-settings';
@use 'atomix/styles/06-components';
// Skip unused layersCreate brand color scales and override Atomix defaults:
$brand-primary: #your-color; @use 'atomix/styles' with ( $primary-6: $brand-primary, $primary-7: shade($brand-primary, 20%) );
Integrate your brand fonts and type scale:
@use 'atomix/styles' with (
$font-family-base: ('Your Font', sans-serif),
$font-size-base: 1rem
);Switch themes dynamically without rebuilding CSS:
// JavaScript theme switching
document.documentElement.setAttribute('data-theme', 'dark');
// CSS theme definition
:root[data-theme="dark"] {
--atomix-primary: #7c3aed;
--atomix-text-primary: #fff;
--atomix-bg-primary: #1a1a1a;
}