CSS variables

You can style external components using the CSS variables available on the root.

RequestResponse
:root {
      --body-background-color: #ffffff;
      --font-family-base: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
      --border-radius-setting: round;
      --font-weight-normal: 400;
      --font-weight-bold: 600;
      --page-title-background-color: #ffffff;
      --page-title-color: rgba(0, 0, 0, 0.91);
      --page-title-font: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
      --page-title-font-weight: 600;
      --page-title-text-transform: none;
      --page-title-font-style: normal;
      --page-title-font-size: 1.375rem;
      --font-family-h1: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
      --font-weight-h1: 600;
      --font-style-h1: normal;
      --text-case-h1: none;
      --font-color-h1: rgba(0, 0, 0, 0.91);
      --font-size-h1: 2.8rem;
      --font-family-h2: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
      --font-weight-h2: 600;
      --font-style-h2: normal;
      --text-case-h2: none;
      --font-color-h2: rgba(0, 0, 0, 0.91);
      --font-size-h2: 2rem;
      --font-family-h3: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
      --font-weight-h3: 600;
      --font-style-h3: normal;
      --text-case-h3: none;
      --font-color-h3: rgba(0, 0, 0, 0.91);
      --font-size-h3: 1rem;
      --font-family-h4: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
      --font-weight-h4: 600;
      --font-style-h4: normal;
      --text-case-h4: none;
      --font-color-h4: rgba(0, 0, 0, 0.91);
      --font-size-h4: 0.875rem;
      --font-family-h5: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
      --font-weight-h5: 600;
      --font-style-h5: normal;
      --text-case-h5: uppercase;
      --font-color-h5: rgba(0, 0, 0, 0.55);
      --font-size-h5: 0.75rem;
      --btn-font-weight: 600;
      --btn-font-family: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
      --btn-text-transform: none;
      --btn-border-radius: 9999px;
      --btn-primary-bg: #5548d9;
      --btn-primary-hover-bg: #483db8;
      --btn-primary-focus-bg: #5548d9;
      --btn-primary-active-bg: #3c3298;
      --btn-primary-color: #ffffff;
      --primary-shade-50: #f1f0fc;
      --primary-shade-800: #2f2877;
      --green-shade-50: #f0fff4;
      --green-shade-800: #22543d;
      --red-shade-50: #fff5f5;
      --red-shade-800: #822727;
      --blue-shade-50: #ebf8ff;
      --blue-shade-800: #2a4365;
      --yellow-shade-50: #fffff0;
      --yellow-shade-800: #744210;
      --body-bg: #ffffff;
      --main-color: #5548d9;
      --main-color-transparent: rgba(85, 72, 217, 0.15);
      --color-white: #ffffff;
      --color-black: #000000;
      --color-red: #e53e3e;
      --color-green: #38a169;
      --color-orange: #dd6b20;
      --color-blue: #3182ce;
      --color-pink: #d53f8c;
      --color-purple: #6d64d3;
      --color-deep-purple: #6d64d3;
      --color-indigo: #3182ce;
      --color-light-blue: #3182ce;
      --color-cyan: #00b5d8;
      --color-teal: #02999a;
      --color-light-green: #38a169;
      --color-lime: #38a169;
      --color-yellow: #d69e2e;
      --color-amber: #dd6b20;
      --color-deep-orange: #dd6b20;
      --color-brown: #dd6b20;
      --color-blue-gray: #737373;
      --color-main-color: #5548d9;
      --primary-25: #f1f0fc;
      --primary-50: #f1f0fc;
      --primary-100: #e6e4f9;
      --primary-200: #bbb6f0;
      --primary-300: #9188e6;
      --primary-400: #776de1;
      --primary-500: #5548d9;
      --primary-600: #483db8;
      --primary-700: #3c3298;
      --primary-800: #2f2877;
      --primary-900: #262062;
      --accent-color-200: #bbb6f0;
      --border-radius-md: 4px;
      --border-radius-lg: 6px;
      --border-radius-sm: 2px;
      --border-radius-xl: 9999px;
      --navbar-bg: #ffffff;
      --navbar-link-color: rgba(0, 0, 0, 0.68);
      --navbar-link-hover-color: rgba(0, 0, 0, 0.91);
      --navbar-link-hover-bg: transparent;
      --navbar-link-active-color: #5548d9;
      --navbar-link-active-bg: transparent;
      --navbar-font-family: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
      --navbar-font-weight: 600;
      --navbar-text-transform: none;
      --navbar-logo-height: 24px;
      --navbar-logo-width: 110.5px;
      --page-header-bg: #ffffff;
      --page-header-color: rgba(0, 0, 0, 0.91);
      --page-header-font: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
      --page-header-font-weight: 600;
      --page-header-text-transform: none;
      --page-header-dark-mode: false
   }

Do you have some feedback for us?

If you have suggestions for improving this article,