Default Theme
RippleUI comes with a default theme that you can use to build your website or application with no customization, when you toggle the toggle-icon you will see the light colors or dark colors, in the next sections you will see how to customize the theme.
RippleUI uses RadixUI Colors as the base for the default theme, you can see how to use the colors below.
| Step | Case |
|---|---|
| 50 | App background |
| 100 | Subtle background |
| 200 | UI element background |
| 300 | Hovered UI element background |
| 400 | Active / Selected UI element background |
| 500 | Subtle borders and separators |
| 600 | UI element border and focus rings |
| 700 | Hovered UI element border |
| 800 | Solid backgrounds |
| 900 | Hovered solid backgrounds |
| 1000 | Low-contrast text |
| 1100 | High-contrast text |
If you need more information about how to use the colors you can check the RadixUI Colors Usage documentation.
backgroundPrimary and color to content1.
to disable this behavior go to Customization. Base colors
Base
primary
secondary
error
success
warning
Background
Background
backgroundPrimary
backgroundSecondary
border
Content
content1
content2
content3
Brands
Blue
blue-50
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-1000
blue-1100
Green
green-50
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
green-1000
green-1100
Red
red-50
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
red-1000
red-1100
Yellow
yellow-50
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
yellow-1000
yellow-1100
Pink
pink-50
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
pink-1000
pink-1100
Purple
purple-50
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
purple-1000
purple-1100
Gray
gray-50
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-1000
gray-1100
Slate
slate-50
slate-100
slate-200
slate-300
slate-400
slate-500
slate-600
slate-700
slate-800
slate-900
slate-1000
slate-1100