Appearance
Customize Theme
If you want to apply your own theme to the widget you have the option to pass a set of style variables when initialising the widget.
js
Cling.init({
ui: {
vars: {
'--primary-color-500': '205 100% 50%'
}
}
})
Where ui.vars
is an object containing CSS style variables.
Defaults
The default options are:
Name | Default Value |
---|---|
--primary-font | Inter, sans-serif |
—primary-font-feature-settings | dlig' 0, 'numr' 0, 'dnom' 0, 'tnum' 0, 'case' 0, 'zero' 0, 'frac' 0, 'sups' 0, 'subs' 0, 'cpsp' 0, 'salt' 0, 'ss01' 0, 'ss02' 0, 'ss03' 0, 'cv01' 0, 'cv02', 'cv03', 'cv04', 'cv05' 0, 'cv06' 0, 'cv07' 0, 'cv08' 0, 'cv09', 'cv10' 0, 'cv11' 0, 'calt', 'liga', 'kern' |
--primary-color-50 | 205deg 100% 95% |
--primary-color-100 | 205deg 100% 92% |
--primary-color-200 | 205deg 100% 85% |
--primary-color-300 | 205deg 100% 70% |
--primary-color-400 | 205deg 100% 58% |
--primary-color-500 | 205deg 100% 50% |
--primary-color-600 | 206deg 100% 47% |
--primary-color-700 | 208deg 100% 44% |
--primary-color-800 | 210deg 92% 39% |
--primary-color-900 | 212deg 85% 33% |
--gray-color-50 | 210deg 20% 98% |
--gray-color-100 | 220deg 14% 96% |
--gray-color-200 | 220deg 13% 92% |
--gray-color-300 | 216deg 12% 85% |
--gray-color-400 | 218deg 11% 65% |
--gray-color-500 | 220deg 9% 46% |
--gray-color-600 | 215deg 14% 34% |
--gray-color-700 | 217deg 19% 27% |
--gray-color-800 | 215deg 28% 17% |
--gray-color-900 | 221deg 39% 11% |
--app-z-index | 1001 |
When passing color variables, it’s important to use the modern space-separated HSL format and only the inner value. For example lets say you want to update --primary-color-500
with the hex color #008A3C
. The color itself is equivalent to hsl(146deg 100% 27%)
which in turn results into --primary-color-500: 146deg 100% 27%
.
Example
js
const styleVariables = {
'--primary-font': '"Exo 2", sans-serif',
'--primary-color-50': '132deg 50% 94%',
'--primary-color-100': '133deg 60% 87%',
'--primary-color-200': '137deg 66% 71%',
'--primary-color-300': '140deg 75% 55%',
'--primary-color-400': '143deg 85% 39%',
'--primary-color-500': '146deg 100% 27%',
'--primary-color-600': '149deg 100% 21%',
'--primary-color-700': '152deg 100% 17%',
'--primary-color-800': '155deg 100% 11%',
'--primary-color-900': '159deg 100% 7%',
'--gray-color-50': '210deg 20% 98%',
'--gray-color-100': '220deg 14% 96%',
'--gray-color-200': '220deg 13% 92%',
'--gray-color-300': '216deg 12% 85%',
'--gray-color-400': '218deg 11% 65%',
'--gray-color-500': '220deg 9% 46%',
'--gray-color-600': '215deg 14% 34%',
'--gray-color-700': '217deg 19% 27%',
'--gray-color-800': '215deg 28% 17%',
'--gray-color-900': '221deg 39% 11%',
'--app-z-index': '1001'
}
window.Cling.init({
ui: {
vars: styleVariables
}
})