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 |
|---|---|
| 1 | App background |
| 2 | Subtle background |
| 3 | UI element background |
| 4 | Hovered UI element background |
| 5 | Active / Selected UI element background |
| 6 | Subtle borders and separators |
| 7 | UI element border and focus rings |
| 8 | Hovered UI element border |
| 9 | Solid backgrounds |
| 10 | Hovered solid backgrounds |
| 11 | Low-contrast text |
| 12 | 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-1
blue-2
blue-3
blue-4
blue-5
blue-6
blue-7
blue-8
blue-9
blue-10
blue-11
blue-12
Green
green-1
green-2
green-3
green-4
green-5
green-6
green-7
green-8
green-9
green-10
green-11
green-12
Red
red-1
red-2
red-3
red-4
red-5
red-6
red-7
red-8
red-9
red-10
red-11
red-12
Yellow
yellow-1
yellow-2
yellow-3
yellow-4
yellow-5
yellow-6
yellow-7
yellow-8
yellow-9
yellow-10
yellow-11
yellow-12
Pink
pink-1
pink-2
pink-3
pink-4
pink-5
pink-6
pink-7
pink-8
pink-9
pink-10
pink-11
pink-12
Purple
purple-1
purple-2
purple-3
purple-4
purple-5
purple-6
purple-7
purple-8
purple-9
purple-10
purple-11
purple-12
Gray
gray-1
gray-2
gray-3
gray-4
gray-5
gray-6
gray-7
gray-8
gray-9
gray-10
gray-11
gray-12
Slate
slate-1
slate-2
slate-3
slate-4
slate-5
slate-6
slate-7
slate-8
slate-9
slate-10
slate-11
slate-12