Colors in aragonUI are managed by its theming system. An aragonUI theme is a set of colors assigned to a predefined palette. All aragonUI components use colors from this palette, making it possible to swap the theme for another one dynamically. aragonUI includes two themes by default, light and dark, but any other can be provided.
Usage
The theme palette can be obtained in a component by using the useTheme() hook:
functionApp(){
const theme =useTheme()
return(
<Main>
<p
css={`
color: ${theme.negative};
`}
>
Negative content
</p>
</Main>
)
}
Notes
Colors meant to be applied on text are indicated using the Content suffix. The reason why it is not using Text is because these also apply to other outline content like icons.
When a color like foo is followed by a color named fooContent, it generally means that foo should be used as a background color for fooContent.
Gradients are defined using the Start and End suffixes.
Colors don’t include opacity. When using aragonUI’s useTheme(), the .alpha(0.5) method can be used on any color. It will apply the desired opacity and return the result as a CSS color using the rgba() syntax.
Palette groups
This section describes the palette colors and how they should be used. The groups are created based on how they relate to each other.
Base
The colors defined in this group are either used by default (border, content, overlay), or on the base layer (background).
background
The base layer on which apps are being rendered.
border
The border color used everywhere by default, except in specific cases like controlBorder.
overlay
The color used for overlays. Some components using an overlay color are SidePanel or Modal.
content
The base color for text and outline content. To be used over background.
contentSecondary
Secondary color for text and outline content. To be used over background.
link
Used as a base color for links.
focus
The color for focus rings.
accent
The accent color can be used to put an emphasis on a component or a certain part of a component, without any specific semantic.
accentContent
To be used for text and outline content over accent.
accentStart / accentEnd
This is the gradient equivalent of accent.
Surface
The main surface as defined by aragonDS and its different states. This group of colors is used by components providing surfaces: Box, DataView, the default Button, the Slider handle, and many more.
surface
The background color used for surfaces.
surfaceContent
The primary color used for text and outline content over surface.
surfaceContentSecondary
The secondary color used for text and outline content over surface.
surfaceIcon
This color is generally used for icons over surface. Note: in some cases, icons over surface are also using surfaceContent or surfaceContentSecondary.
surfaceUnder
This is used as a background base for surfaces that appear to be at a lower level than the parent surface itself. For instance, the DataView component is using this color for its entry expansion, which opens underneath the primary surface provided by DataView.
surfaceOpened
Communicates that a surface is being “opened”, generally revealing a surface using surfaceUnder underneath. The DataView component is using this color for the side border of its entry expansion.
surfaceSelected
Indicates that a surface, or a part of it, is being selected. This is the color DataView is using to indicate that an entire row is selected.
surfaceHighlight
Indicates that a surface, or a part of it, is being highlighted. This color could be used to reflect a hover or focused state.
surfacePressed
Indicates that a surface, or a part of it, is being pressed − either by a pointer or a touch event.
Info
Used to indicate informative content in general.
info
This info color is generally stronger than infoSurface. It should be used for icons, borders, etc.
infoSurface
The surface info color, generally softer than info. It should be used for background colors.
infoSurfaceContent
To be used for text and outline content over infoSurface.
Feedback
Used to signal feedback, in the broad sense. For instance, this set of colors is used to show the status of a transaction in the signing panel.
feedbackSurface
Use this color as a background color for feedback.
feedbackSurfaceContent
The primary color to be used for text and outline content over feedbackSurface.
feedbackSurfaceContentSecondary
The secondary color to be used for text and outline content over feedbackSurface.
Warning
Used to indicate warnings.
warning
This warning color is generally stronger than warningSurface. It should be used for icons, borders, etc.
warningSurface
The surface warning color, generally softer than warning. It should be used for background colors.
warningSurfaceContent
To be used for text and outline content over warningSurface.
Help
Used for elements related to helping the user.
help
This help color is generally stronger than helpSurface and should be used for icons, borders, etc.
helpContent
To be used for text and outline content over help.
helpSurface
This help color is generally softer than help and should be used for background colors.
helpSurfaceContent
To be used for text and outline content over helpSurface.
Positive
Used to communicate something positive. It can be used for successful operations, but also for other things like voting “Yes”.
positive
Use this color to communicate positive information (e.g. success, an action to vote yes).
positiveContent
To be used for text and outline content over positive.
positiveSurface
A softer positive, to be used when a large amount of information needs to be communicated.
positiveSurfaceContent
To be used for text and outline content over positiveSurface.
Negative
Used to communicate something negative. It can be used for errors, but also for other things like voting “No”.
negative
Use this color to communicate negative information (e.g. error, an action to vote no).
negativeContent
To be used for text and outline content over negative.
negativeSurface
A softer negative, to be used when a large amount of information needs to be communicated. For instance, the Info component uses it as a background color in error mode.
negativeSurfaceContent
To be used for text and outline content over negativeSurfaceContent.
Tag
This set of colors is used by the Tag component and its different modes.
tagIdentifier
Used to identify or label a subject.
tagIdentifierContent
To be used for text and outline content over tagIdentifier.
tagNew
Used to indicate that a subject is new, or updated.
tagNewContent
To be used for text and outline content over tagNew.
tagIndicator
Used for indicators in the general sense.
tagIndicatorContent
To be used for text and outline content over tagIndicator.
tagActivity
Used to represent some activity that happened, like a number of notifications.
tagActivityContent
To be used for text and outline content over tagActivity
Badge
This colors are used for badge-like components: IdentityBadge, AppBadge, etc.
badge
The background color of badge-like components.
badgeContent
To be used for text and outline content over badge.
badgePressed
The pressed state of badge.
Floating
Floating elements, like tooltips.
floating
The background color of a floating element.
floatingContent
To be used for text and outline content over floating.
Controls
Colors related to controls, that could be used in forms or elsewhere.
hint
Used for hints (or placeholders) inside of text input or similar components.
selected
Indicates a selection in the broad sense.
selectedContent
To be used for text and outline content over selected.
selectedDisabled
Indicates a selection in the broad sense, when disabled (non-interactive).
disabled
The background color of disabled components like Button.
disabledContent
The text or outline content to be used over disabled.
disabledIcon
This color is generally used for icons over disabled. Note: icons over disabled could also be using disabledContent.
control
Used as a background color for some control components like Checkbox, Radio or Switch.
controlBorder
Used as a border color for some control components like Checkbox, Radio or Switch.
controlBorderPressed
Used as a border color for the pressed state of some control components like Checkbox, Radio or Switch.
controlDisabled
The background color for the disabled state of some control components like Checkbox, Radio or Switch.
controlSurface
This is used as a surface color for elements of control components that appear at an upper level. For instance, the Switch component is using this color for its handle.
controlUnder
This is used as a background base for elements of control components that appear to be at a lower level. For instance, the Switch component is using this color for its inner base.
Colors
These colors can be used when a color is needed for its semantics. An example could be a chart using a red and a blue curve. Even if their theme is different, two users should still be able to refer to these by using the terms “red” or “blue”.
Themes are free to implement their own variation of these colors, but they should respect the naming (e.g. green can vary, but should use a color that is commonly accepted to be “green”).