Color basics #
Using color in Hydrogen works as you would expect when using color in CSS, with the addition of Hydrogen's configured color values. This means the properties that accept color values will properly understand rgba, hex values, and the like.
Where the real magic shines is in the use of configured color values. When you define a color in your configuration file, its key becomes usable inside any property that accepts color values, as outlined in the color section of the properties page.
1
2
3
4
5
6
7
8
9
10
"colors": [
{
"key": "primary",
"default": {
"color": "#9D5CFF",
"modifiers": []
},
},
...
],
Working with modifiers #
Modifiers allow you to define custom color modifications for your color settings. This can be helpful for defining context-specific variations of a color. Using modifiers is as simple as appending the modifier's key to the color's key using dot notation: color.modifier.
Built-in color modifiers #
Hydrogen provides every color you configure with 6 automated color modifiers that generate tint and shade options for convenience. The automated_modifiers mode setting will further enhance these built-in modifiers by swapping their values for you in dark mode.
These modifiers can be accessed in the same way others are used: color.dark and can be chained with the built-in opacity modifiers explained below: color.dark.3.
lightlighterlightestdarkdarkerdarkest
Built-in opacity modifiers #
The system also allows you to use numeric values as color modifiers in order to manipulate the color's opacity value. You can use values such as color.2 or color.20 to set a color to 20% opacity.
One thing to note is that if you're trying to set 100% opacity, you must use color.100 because color.1 and color.10 will set the color to 10%.
Custom modifiers #
Beyond the built-in values, you can use a color's modifiers setting to create your own color modifications. Each one you create will require a key and a color value that will then be accessible to you using the same dot notation: color.key.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"colors": [
{
"key": "primary",
"default": {
"color": "#9D5CFF",
"modifiers": [
{
"key": "myModifier",
"color": "#784fb5"
},
...
]
},
},
...
],
Colors across modes #
You can also manage a color's value and modifiers per mode. By adding a dark key alongside your color's default configuration, you can control exactly how the value works in a dark mode context.
The auto_apply_styles and swap_default_modifiers mode settings are also helpful tools for managing how colors work across modes.
By enabling auto_apply_styles whatever value you set under the color's dark configuration will automatically be applied if dark mode is triggered. This setting will also apply the same logic to your custom modifiers if you give them dark mode counterparts with a matching key.
The swap_default_modifiers setting will tell Hydrogen to programmatically swap the built-in color modifiers (light, darker, etc.) with their natural opposite when dark mode is triggered. This can be helpful if you want all color.light values to automatically switch to color.dark and so on.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
"colors": [
{
"key": "primary",
"default": {
"color": "#9D5CFF",
"modifiers": []
},
"dark": {
"color": "#390c7c",
"modifiers": []
}
},
...
],
Colors across themes #
Colors are arguably the most powerful tool available when it comes to creating and using themes. By using the same key between different themes (primary for example), you can instantly swap your project's palette by applying the theme's key value to the data-h2. This allows you to customize your entire palette for each theme (modifiers included) and have them apply to the whole page at the click of a button.
1
2
3
4
5
6
7
8
9
10
11
12
13
"themes": [
{
"key": "default",
"colors": [],
...
},
{
"key": "myTheme",
"colors": [],
...
}
...
]