Skip to content

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:

NameDefault Value
--primary-fontInter, sans-serif
—primary-font-feature-settingsdlig' 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-50205deg 100% 95%
--primary-color-100205deg 100% 92%
--primary-color-200205deg 100% 85%
--primary-color-300205deg 100% 70%
--primary-color-400205deg 100% 58%
--primary-color-500205deg 100% 50%
--primary-color-600206deg 100% 47%
--primary-color-700208deg 100% 44%
--primary-color-800210deg 92% 39%
--primary-color-900212deg 85% 33%
--gray-color-50210deg 20% 98%
--gray-color-100220deg 14% 96%
--gray-color-200220deg 13% 92%
--gray-color-300216deg 12% 85%
--gray-color-400218deg 11% 65%
--gray-color-500220deg 9% 46%
--gray-color-600215deg 14% 34%
--gray-color-700217deg 19% 27%
--gray-color-800215deg 28% 17%
--gray-color-900221deg 39% 11%
--app-z-index1001

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
  }
})