Form Controls 1
Form Controls 2
Form Controls 3
Progress Indicators
Navigation & Layout
Primary 1
Primary 2
Tab 1 Content
Secondary 1
Secondary 2
Tab 1 Content
Tertiary 1
Tertiary 2
Tab 1 Content
Error 1
Error 2
Tab 1 Content
Customize
Multi-Theming
Seasons
Api
SpiderBaby Material Theming
A powerful, flexible theming system for Angular Material!
Features
Easily add a dark mode toggle to your application with smooth transitions.
Icon only:
With switch:
Let users choose from predefined themes, including your seasonal options.
Allow users to create and save their own custom themes.
Showcase multiple independently themed sections on a single page. Each card demonstrates local theme and dark mode switching.
Performance
01 Performance Advantages
The library is designed for optimal performance and reduced bundle size:
- Automatic Palette Generation - Eliminates the need to manually define extensive Material color palettes; just provide seed colors.
- Smaller bundle sizes - Color palettes are generated at runtime instead of shipping pre-compiled CSS for each theme
- Tree-shakable architecture - Secondary entry points allow you to import only what you need
- Memoized color generation - Palette calculations are cached to prevent redundant work
- Batched updates - DOM changes use requestAnimationFrame for optimal rendering performance
Getting Started
02 Getting Started
Prerequisites
Important Note: This library requires Angular Material.Angular Material Setup Options:
Option 1 (Recommended): Using the Angular CLI schematic
This command will install matching dependencies and set up themes, fonts, and animations automatically:
ng add @angular/materialInstall Material and CDK that match your Angular version:
# To default to the version that matches your current angular version (Will work if you're using Angular 17, 18 or 19)
npm install @angular/material @angular/cdk
# For Angular 17
npm install @angular/material@17 @angular/cdk@17
# For Angular 18
npm install @angular/material@18 @angular/cdk@18
# For Angular 19
npm install @angular/material@19 @angular/cdk@19Installation
Step 1: Install matching Angular Material/CDK as shown above
Step 2: Install SpiderBaby Material Theming
Step 2: Install SpiderBaby Material Theming
Why Version Matching Matters:
- Angular Material and CDK require exact Angular version alignment
- When npm encounters a range of compatible versions like "17.x || 18.x || 19.x", it tends to select the newest version (like this package)
- This can lead to conflicts when the newest Material/CDK version requires a newer Angular version than what's in your project
- For Angular 17: Use Material/CDK 17.x
- For Angular 18: Use Material/CDK 18.x
- For Angular 19: Use Material/CDK 19.x
Custom Theme Config
Define your themes by providing just a few seed colors (primary, secondary, tertiary). The library automatically generates the full Material Design 3 tonal palettes (like primary-container, on-primary, etc.) at runtime, eliminating the need to manually define complex palettes like in traditional Angular Material theming.
Custom Theme Config (Dynamic)
Register provider
Style Setup
Using Color Overrides
To customize Material button and FAB colors with your theme’s CSS variables, import the provided SCSS overrides in your global or feature styles:
This will asllow you apply your theme’s primary, secondary, tertiary, and error colors to all Material buttons, FABs and other Mat Components using CSS variables. You can see this in action in our Theme Showcase demo.
Button Color Overrides: Example
Below you can see the code to use a themed button, and the actual result: class="primary-palette" will apply the color var(--mat-sys-primary) to the button background and var(--mat-sys-on-primary) to the text color. class="secondary-palette" will apply the color var(--mat-sys-secondary) to the button background and var(--mat-sys-on-secondary) to the text color.
etc...
Component Usage
Allow users to change Themes and Dark Mode.
To set a local theme for a specific component and its children. Isoloated from outer themes.
To allow users to create custom themes, add this to your component template.
You can see it in action here Custom Themes
To demonstrate current theme and dark mode on material components, add this to your component template.
You can see it in action below (Theme Preview).
API Documentation
For detailed information about all available methods and properties, see the ThemeService API Documentation
The ThemeService provides methods for applying themes, switching between light and dark mode, creating custom themes, and more. Explore the complete API to get the most out of the theming system.
Note: The Theming System will only be initialized if the
or if you are using our
If not ensure your theme variables are always generated, add
Example:
ThemeService is injected at least once in your app, or if you are using our
SbThemePickerMatComponent or SbDarkModeToggleMatComponent . If not ensure your theme variables are always generated, add
provideThemeInitializer() to your app’s providers.Example:
Quick Start Files
Download ready-to-use configuration files to get started quickly with SpiderBaby Material Theming:
Theme Configuration
Basic theme configuration with sample themes
SCSS Setup
Ready-to-use SCSS configuration for Material themes
App Configuration
Configuration setup for Angular providers
Complete Setup Package
All configuration files in one download
For more information about the available options and API, check out the Complete API Documentation
Color Variables
03 Accessing Material Colors in CSS
Unlike traditional Angular Material theming, this library uses CSS variables to apply themes at runtime:
Theme colors are exposed via both Material Design and custom CSS variables:
--mat-sys-primary- Material design system colors--mat-sys-secondary- Material design system colors--mat-sys-tertiary- Material design system colors--mat-seed-primary- Original theme seed colors--mat-seed-secondary- Original theme seed colors--mat-seed-tertiary- Original theme seed colors--mat-sys-primary-40- Primary color palette (40)
Primary Color Palette Tones
Access any tone with var(--mat-sys-primary-[tone])
0
4
6
10
12
17
20
22
24
25
30
35
40
50
60
70
80
87
90
92
94
95
96
98
99
100
Secondary Color Palette Tones
Access any tone with var(--mat-sys-secondary-[tone])
0
4
6
10
12
17
20
22
24
25
30
35
40
50
60
70
80
87
90
92
94
95
96
98
99
100
Tertiary Color Palette Tones
Access any tone with var(--mat-sys-tertiary-[tone])
0
4
6
10
12
17
20
22
24
25
30
35
40
50
60
70
80
87
90
92
94
95
96
98
99
100
Error Color Palette Tones
Access any tone with var(--mat-sys-error-[tone])
0
4
6
10
12
17
20
22
24
25
30
35
40
50
60
70
80
87
90
92
94
95
96
98
99
100
Neutral Color Palette Tones
Access any tone with var(--mat-sys-neutral-[tone])
0
4
6
10
12
17
20
22
24
25
30
35
40
50
60
70
80
87
90
92
94
95
96
98
99
100
Theme Persistence
04 Persistent Preferences
User preferences are automatically saved between sessions:
- Theme selection - Users' chosen theme is remembered
- Dark mode preference - Light/dark mode setting persists
- Custom themes - User-created themes are stored
- Configurable storage - Uses localStorage by default with options for custom storage strategies
Section-Based Theming
05 Section-Based Theming
Create unique theme contexts for different sections of your application:
- Route-specific themes - Define different theme palettes for separate areas of your app
- Context switching - Automatically change available themes when navigating between sections
- Smart restoration - Previous theme context returns when leaving a themed section
Theme Showcase
06 Theme Preview
See how Material components look with the currently selected theme:
Theme Showcase
See how the current theme applies to Material components
Source Code
07 Github
The source code for this library is available on GitHub. Feel free to:
- Star the repository to show your support
- Report issues or bugs you encounter
- Fork the repository to create your own version
- Contribute to the project with pull requests