Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
ThemeProvider
When dealing with colors, it is recommended to use theme that is built-in from Coral. The most common benefit from theme is dark mode.
For example, Toast has a dark background and white text. In dark mode, when we try to flip the colors, how do we make sure that Toast’s colors are still correct? The same question is also applicable to overlays in Dialog and Drawer. Coral theme structure makes it easy to achieve it without messing up these cases.
Basic Usage
Instead of importing from styled-components, you can import from @seaweb/coral/hoc/styled, this will help you with the autocompletion for the theme structure.
View code
Dark mode
Coral provides a darkTheme that you can use by simply passing it to the ThemeProvider.
View code
Color structure
Default Theme
Accent color
Primary
Primary
accPri1stblue 07#1C6EFC
Dev tokenPalette codeHEX value
Container primary
accPriContainer1stblue 01#EBF5FC
Inverse primary
accPriInverse1stblue 06#428AF5
Container inverse primary
accPriInverseContainer1stblue 12#051C61
Neutral color
Background
Primary
neuBg1stwhite#FFFFFF
Dev tokenPalette codeHEX value
Secondary
neuBg2ndgrey #F7F7F8
Tertiary
neuBg3rdgrey 01#F2F2F3
Quaternary
neuBg4thgrey 02#E6E6E7
Inverse primary
neuBgInverse1stgrey 11#1F202C
Inverse secondary
neuBgInverse2ndgrey 12#141522
Foreground
Header
neuForeHeadergrey 14#00010F
Dev tokenPalette codeHEX value
Primary
neuFore1stgrey 12#141522
Secondary
neuFore2ndgrey 08#4D4D57
Tertiary
neuFore3rdgrey 05#99999F
Quaternary
neuFore4thgrey 03#CCCCCF
Inverse primary
neuForeInverse1stwhite#FFFFFF
Inverse secondary
neuForeInverse2ndwhite, 50%#FFFFFF
Line
Primary
neuLine1stgrey 02#E6E6E7
Dev tokenPalette codeHEX value
Secondary
neuLine2ndgrey 04#B3B3B7
Inverse primary
neuLineInverse1stwhite, 10%#FFFFFF
Inverse secondary
neuLineInverse2ndwhite#FFFFFF
Overlay
Primary
neuOverlay1stblack, 60%#000000
Dev tokenPalette codeHEX value
Shadow
Primary
neuShadow1stgrey 14, 15%#00010F
Dev tokenPalette codeHEX value
Semantic color
Positive
Primary
semPos1stgreen 07#009E47
Dev tokenPalette codeHEX value
Container primary
semPosContainer1stgreen 01#E6FCEB
Inverse primary
semPosInverse1stgreen 06#24B561
Inverse container primary
semPosInverseContainer1stgreen 12#002B19
Cautious
Primary
semCau1storange 05#F5841B
Dev tokenPalette codeHEX value
Container primary
semCauContainer1styellow 01#FFF0E0
Inverse primary
semCauInverse1styellow 05#DE9000
Inverse container primary
semCauInverseContainer1styellow 11#2E2500
Negative
Primary
semNeg1stred 07#EB311C
Dev tokenPalette codeHEX value
Container primary
semNegContainer1stred 01#FFEBED
Inverse primary
semNegInverse1stred 06#F55045
Inverse container primary
semNegInverseContainer1stred 13#360E03
Moderate
Primary
semMod1stblue 07#1C6EFC
Dev tokenPalette codeHEX value
Container primary
semModContainer1stblue 01#EBF5FC
Inverse primary
semModInverse1stblue 06#428AF5
Inverse container primary
semModInverseContainer1stblue 12#051C61
Neutral
Primary
semNeu1stgrey 08#4D4D57
Dev tokenPalette codeHEX value
Container primary
semNeuContainer1stgrey 01#F2F2F3
Inverse primary
semNeuInverse1stgrey 05#99999F
Inverse container primary
semNeuInverseContainer1stgrey 11#1F202C
Mysterious
Primary
semMys1stpurple 08#6C23D9
Dev tokenPalette codeHEX value
Container primary
semMysContainer1stpurple 01#F2F0FF
Inverse primary
semMysInverse1stpurple 06#945EFF
Inverse container primary
semMysInverseContainer1stpurple 13#290052
Interaction color
Interaction
Primary
inter1stblack#000000
Dev tokenPalette codeHEX value
Inverse primary
interInverse1stwhite#FFFFFF
Customizing theme
Update theme tokens
View code
Add theme tokens
If you have your own or project specific colors, you can also add it directly to the ThemeProvider. If you are using TypeScript, you can use createStyled to redefine the theme.
View code
Palettes
You can import available palettes through import { palette } from '@seaweb/coral/components/ThemeProvider'.
Interactions
The theme structure has a onLightBg and onDarkBg property to handle the different interactions states such as hover and pressed when component is placed on either a light or dark background. For example, Button can be placed in a Toast which has a dark background, or on a light background. Refer to BackgroundProvider for more details.
API
ThemeProvider
| Prop name | Type | Default | Description |
|---|---|---|---|
| isDarkBg | boolean | ||
| theme | DeepPartial<T> |