Getting Started
Forms
Components
69
Action Required
Alert
Announcement
Avatar
Badge
Block Loader
Bottom Sheet
Calendar
Card
Card Overlay
Carousel
Chips
Code Highlighter
Color Picker
Color Switcher
Command Bar
Comment Editor
Comparison Slider
Confirm
Content Fade
Cookie Popup
Crop
Datepicker
Dialog
Divider
Drawer
Emoji Picker
Empty State
Expand
Expansion Panel
Filter Builder
Gauge
Grid
Guided Tour
Icon
Image Placeholder
Image Resizer
Image Viewer
Image Zoom Viewer
Incidents
Keyboard
Layout
List
Marquee
Menu
Notifications
Paginator
Panel
Popover
Progress Bar
Progress Spinner
Resizable Container
Screen Loader
Sidenav
Signature Pad
Skeleton
Slider
Snackbar
Split Pane
Stepper
Suggestions
Table
Tabs
Text Editor
Thumbnail Maker
Tiles
Timeline
Timepicker
Toolbar
Tooltip
Tree
Upload
Video Viewer
Libraries
Theme Generator
Pick a primary seed color and preview how the default NgStarter theme derives tonal roles with CSS color-mix(). Runtime theming uses the same seed, so the generated palette remains CSS-driven.
Light preview#036fe3
Revenue$128.4K
Selected surfaceDefault surface
Dark preview#036fe3
Revenue$128.4K
Selected surfaceDefault surface
Light roles
--ngs-color-primary
#036fe3--ngs-color-primary-container
#e2edf8--ngs-color-secondary
#3c637c--ngs-color-secondary-container
#e5ecf0--ngs-color-tertiary
#5020b6--ngs-color-tertiary-container
#e8e2f3--ngs-color-info
#0f5ae6--ngs-color-info-container
#e3e8f2--ngs-color-surface
#f4f5f6--ngs-color-surface-container
#f4f5f6--ngs-color-border
#e3e5e8--ngs-color-outline
#828e9c--ngs-color-outline-variant
#d8dbde--ngs-state-selected-bg
color-mix(in srgb, var(--ngs-color-primary), transparent 88%)Dark roles
--ngs-color-primary
#acd0f6--ngs-color-primary-container
#11457e--ngs-color-secondary
#b3cbdb--ngs-color-secondary-container
#334c5c--ngs-color-tertiary
#bba5e9--ngs-color-tertiary-container
#3e2673--ngs-color-info
#90b3f4--ngs-color-info-container
#1e3f7b--ngs-color-surface
#131416--ngs-color-surface-container
#1c1f21--ngs-color-border
#34383d--ngs-color-outline
#9ea8b2--ngs-color-outline-variant
#42474d--ngs-state-selected-bg
color-mix(in srgb, var(--ngs-color-primary), transparent 88%)CSS seed color
:root,
[data-ngs-theme='default'] {
--ngs-color-primary-seed: #036fe3;
}Runtime seed
import { provideNgsTheme } from '@ngstarter-ui/components/core';
export const appConfig: ApplicationConfig = {
providers: [
provideNgsTheme({
theme: 'default',
colorScheme: 'auto',
primaryColor: '#036fe3',
}),
],
};Static CSS output
import { generateNgsThemeCssText } from '@ngstarter-ui/components/core';
const lightCss = generateNgsThemeCssText('#036fe3', 'light');
const darkCss = generateNgsThemeCssText('#036fe3', 'dark');