CSS variables

From 2.0.x you can use css variables to override default settings

:root {
    --r-color-primary: #0099ff;
    --r-color-secondary: #373459;
    --r-color-tertiary: #f4751a;
    --r-color-info: #f8bf16;
    --r-color-success: #9ecf91;
    --r-color-danger: #c40000;
    --r-color-link: #67bcef;
    --r-color-dark: #212121;
    --r-color-black: #000000;
    --r-color-white: #ffffff;
    --r-color-light: #fafbfc;
    --r-color-light-darken-1: color-mix(in srgb, var(--r-color-light), black 1%);
    --r-color-light-lighten-1: color-mix(in srgb, var(--r-color-light), white 1%);
    --r-color-light-darken-2: color-mix(in srgb, var(--r-color-light), black 2%);
    --r-color-light-lighten-2: color-mix(in srgb, var(--r-color-light), white 2%);
    --r-color-light-darken-3: color-mix(in srgb, var(--r-color-light), black 3%);
    --r-color-light-lighten-3: color-mix(in srgb, var(--r-color-light), white 3%);
    --r-color-light-darken-5: color-mix(in srgb, var(--r-color-light), black 5%);
    --r-color-light-lighten-5: color-mix(in srgb, var(--r-color-light), white 5%);
    --r-color-light-darken-10: color-mix(in srgb, var(--r-color-light), black 10%);
    --r-color-light-lighten-10: color-mix(in srgb, var(--r-color-light), white 10%);
    --r-color-light-darken-15: color-mix(in srgb, var(--r-color-light), black 15%);
    --r-color-light-lighten-15: color-mix(in srgb, var(--r-color-light), white 15%);
    --r-color-light-darken-30: color-mix(in srgb, var(--r-color-light), black 30%);
    --r-color-light-lighten-30: color-mix(in srgb, var(--r-color-light), white 30%);
    --r-color-light-darken-50: color-mix(in srgb, var(--r-color-light), black 50%);
    --r-color-light-lighten-50: color-mix(in srgb, var(--r-color-light), white 50%);
    --r-color-info-lighten-20: color-mix(in srgb, var(--r-color-info), white 20%);
    --r-color-info-lighten-40: color-mix(in srgb, var(--r-color-info), white 40%);
    --r-color-white-darken-2: color-mix(in srgb, var(--r-color-white), black 2%);
    --r-color-dark-lighten-2: color-mix(in srgb, var(--r-color-dark), white 2%);
    --r-color-white-darken-3: color-mix(in srgb, var(--r-color-white), black 3%);
    --r-color-dark-lighten-3: color-mix(in srgb, var(--r-color-dark), white 3%);
    --r-color-white-darken-4: color-mix(in srgb, var(--r-color-white), black 4%);
    --r-color-dark-lighten-4: color-mix(in srgb, var(--r-color-dark), white 4%);
    --r-color-white-darken-5: color-mix(in srgb, var(--r-color-white), black 5%);
    --r-color-dark-lighten-5: color-mix(in srgb, var(--r-color-dark), white 5%);
    --r-color-white-darken-6: color-mix(in srgb, var(--r-color-white), black 6%);
    --r-color-dark-lighten-6: color-mix(in srgb, var(--r-color-dark), white 6%);
    --r-color-white-darken-7: color-mix(in srgb, var(--r-color-white), black 7%);
    --r-color-dark-lighten-7: color-mix(in srgb, var(--r-color-dark), white 7%);
    --r-color-white-darken-8: color-mix(in srgb, var(--r-color-white), black 8%);
    --r-color-dark-lighten-8: color-mix(in srgb, var(--r-color-dark), white 8%);
    --r-color-white-darken-10: color-mix(in srgb, var(--r-color-white), black 10%);
    --r-color-dark-lighten-10: color-mix(in srgb, var(--r-color-dark), white 10%);
    --r-color-white-darken-15: color-mix(in srgb, var(--r-color-white), black 15%);
    --r-color-dark-lighten-15: color-mix(in srgb, var(--r-color-dark), white 15%);
    --r-color-white-darken-20: color-mix(in srgb, var(--r-color-white), black 20%);
    --r-color-dark-lighten-20: color-mix(in srgb, var(--r-color-dark), white 20%);
    --r-color-white-darken-30: color-mix(in srgb, var(--r-color-white), black 30%);
    --r-color-dark-lighten-30: color-mix(in srgb, var(--r-color-dark), white 30%);
    --r-color-white-darken-40: color-mix(in srgb, var(--r-color-white), black 40%);
    --r-color-dark-lighten-40: color-mix(in srgb, var(--r-color-dark), white 40%);
    --r-color-white-darken-50: color-mix(in srgb, var(--r-color-white), black 50%);
    --r-color-dark-lighten-50: color-mix(in srgb, var(--r-color-dark), white 50%);
    --r-color-white-darken-60: color-mix(in srgb, var(--r-color-white), black 60%);
    --r-color-dark-lighten-60: color-mix(in srgb, var(--r-color-dark), white 60%);
    --r-color-white-darken-70: color-mix(in srgb, var(--r-color-white), black 70%);
    --r-color-dark-lighten-70: color-mix(in srgb, var(--r-color-dark), white 70%);
    --r-color-white-darken-80: color-mix(in srgb, var(--r-color-white), black 80%);
    --r-color-dark-lighten-80: color-mix(in srgb, var(--r-color-dark), white 80%);
    --r-color-black-lighten-70: color-mix(in srgb, var(--r-color-black), white 70%);
    --r-color-primary-lighten-80: color-mix(in srgb, var(--r-color-primary), white 80%);
    --r-global-base-font-size: 100%;
    --r-global-base-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    --r-global-font-weight: normal;
    --r-global-font-bold-weight: bold;
    --r-global-background-color: var(--r-color-white);
    --r-global-font-color: var(--r-color-dark);
    --r-global-font-color-light: var(--r-color-dark-lighten-20);
    --r-global-width: 75rem;
    --r-animation-easing: cubic-bezier(1, 0, 0, 1);
    --r-animation-duration: 0.25s;
    --r-button-radius: 0.1875rem;
    --r-button-hover-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
    --r-button-hover-shadow-dark: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.2);
    --r-button-active-shadow: inset 0 0 0.1875rem rgba(0, 0, 0, 0.1);
    --r-button-active-dark-shadow: inset 0 0 0.1875rem rgba(0, 0, 0, 0.2);
    --r-button-base-white: var(--r-color-white);
    --r-button-primary-color: var(--r-color-primary);
    --r-button-secondary-color: var(--r-color-secondary);
    --r-button-default-background: var(--r-color-white-darken-4);
    --r-button-default-background-end: var(--r-color-white-darken-7);
    --r-button-default-border: var(--r-color-white-darken-15);
    --r-button-default-color: var(--r-color-dark-lighten-20);
    --r-button-default-hover-background: var(--r-color-white-darken-3);
    --r-button-default-hover-background-end: var(--r-color-white-darken-6);
    --r-button-default-hover-border: var(--r-color-white-darken-20);
    --r-button-default-hover-color: var(--r-color-dark-lighten-20);
    --r-nav-border-radius: 0.1875rem;
    --r-nav-link-color: var(--r-color-link);
    --r-nav-dimmed-link-color: var(--r-color-black-lighten-70);
    --r-nav-active-link-color: var(--r-color-primary);
    --r-nav-spacing: 0.8125rem;
    --r-nav-primary-color: var(--r-color-primary);
    --r-form-input-placeholder-color: var(--r-color-light-darken-30);
    --r-form-input-background-color: var(--r-color-white);
    --r-form-input-color: var(--r-color-dark);
    --r-form-input-border-color: var(--r-color-light-darken-15);
    --r-form-input-hover-border-color: var(--r-color-link);
    --r-form-input-focus-border-color: var(--r-color-primary);
    --r-form-text-color: var(--r-color-light-darken-30);
    --r-form-input-radius: 0.1875rem;
    --r-form-checkbox-label-color: var(--r-color-dark-lighten-20);
    --r-form-disable-input-color: var(--r-color-light-darken-5);
    --r-form-primary-color: var(--r-color-light-darken-2);
    --r-form-primary-border-color: var(--r-color-light-darken-5);
    --r-form-primary-hover-color: var(--r-color-info);
    --r-form-primary-focus-color: var(--r-color-white);
    --r-form-error-color: var(--r-color-danger);
    --r-form-success-color: var(--r-color-success);
    --r-form-warning-color: var(--r-color-info);
    --r-form-field-search-hint-background: var(--r-color-light-darken-1);
    --r-form-field-search-hint-border-color: var(--r-color-light-darken-15);
    --r-form-field-search-divider-color: var(--r-color-light-darken-5);
    --r-form-field-search-item-hover-background: var(--r-color-light-darken-3);
    --r-form-field-search-border-color: var(--r-color-light-darken-5);
    --r-table-header-border-color: var(--r-color-light-darken-10);
    --r-table-border-color: var(--r-color-light-darken-5);
    --r-table-header-font-weight: var(--r-global-font-bold-weight);
    --r-table-spacing: 0.625rem;
    --r-table-row-hover-color: var(--r-color-light-darken-2);
    --r-table-primary-header-color: var(--r-color-light-darken-5);
    --r-table-row-striped-color: var(--r-color-light-darken-2);
    --r-table-row-striped-hover-color: var(--r-color-info-lighten-40);
    --r-img-radius: 0.1875rem;
    --r-img-caption-color: var(--r-color-dark-lighten-40);
    --r-message-radius: 0.1875rem;
    --r-message-color-icon-size: 1.125rem;
    --r-message-close-background: var(--r-color-light-darken-10);
    --r-message-close-color: var(--r-color-dark);
    --r-badge-radius: 0.1875rem;
    --r-badge-background: var(--r-color-white-darken-5);
    --r-badge-color: var(--r-color-white-darken-50);
    --r-breadcrumb-spacing: 0.625rem;
    --r-breadcrumb-size: 80%;
    --r-breadcrumb-default-color: var(--r-color-dark-lighten-40);
    --r-breadcrumb-sep-symbol: "/";
    --r-breadcrumb-sep-color: var(--r-color-dark-lighten-70);
    --r-card-radius: 0.1875rem;
    --r-card-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.08);
    --r-card-header-footer-border: var(--r-color-white-darken-5);
    --r-card-header-footer-color: var(--r-color-dark-lighten-40);
    --r-card-background: var(--r-color-white);
    --r-dropdown-icons-size: 0.3125rem;
    --r-dropdown-icons-size-small: 0.25rem;
    --r-dropdown-icons-size-large: 0.4375rem;
    --r-dropdown-width: 13.75rem;
    --r-dropdown-background: var(--r-color-white-darken-2);
    --r-dropdown-border-color: var(--r-color-white-darken-15);
    --r-dropdown-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.08);
    --r-dropdown-item-color: var(--r-color-dark-lighten-20);
    --r-dropdown-item-hover-background-color: var(--r-color-white-darken-5);
    --r-dropdown-item-hover-color: var(--r-color-dark);
    --r-dropdown-item-sep: var(--r-color-white-darken-8);
    --r-modal-background: rgba(0, 0, 0, 0.5);
    --r-modal-content-background: var(--r-color-white);
    --r-modal-close-color: var(--r-color-white-darken-50);
    --r-modal-content-radius: 0.125rem;
    --r-modal-content-spacing: 1.25rem;
    --r-modal-content-shadow: 0 0.3125rem 0.3125rem 0 rgba(0, 0, 0, 0.1);
    --r-modal-border-color: var(--r-color-white-darken-5);
    --r-accordion-border-color: rgba(0, 0, 0, 0.1);
    --r-tab-active-color: var(--r-color-primary);
    --r-tab-border-color: var(--r-color-light-darken-5);
    --r-box-spacing: 1.25rem;
    --r-box-spacing-small: 0.9375rem;
    --r-box-spacing-large: 1.875rem;
    --r-box-border-radius: 0.1875rem;
    --r-box-background-color: var(--r-color-white);
    --r-box-border-color: var(--r-color-white-darken-10);
    --r-box-header-background: var(--r-color-light);
    --r-box-footer-color: var(--r-color-white-darken-60);
    --r-progress-background: var(--r-color-white-darken-5);
    --r-progress-background-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.05) inset;
    --r-progress-bar-color: var(--r-color-white-darken-30);
    --r-progress-bar-radius: 0.1875rem;
    --r-collage-item-default-width: 12.5rem;
    --r-collage-item-default-height: 12.5rem;
    --r-collage-item-default-gap: 0.625rem;
    --r-collage-item-small-gap: 0.0625rem;
    --r-collage-item-large-gap: 1.25rem;
    --r-collage-caption-background: 0, 0, 0;
    --r-collage-caption-color: var(--r-color-white);
    --r-avatar-default-size: 2.5rem;
    --r-avatar-small-size: 1.875rem;
    --r-avatar-label-color: var(--r-color-black);
    --r-avatar-label-hover-color: var(--r-color-dark-lighten-20);
    --r-tag-color: var(--r-color-primary);
    --r-tag-background: color-mix(in srgb, var(--r-tag-color), white 90%);
    --r-tag-border-color: color-mix(in srgb, var(--r-tag-color), white 30%);
    --r-tag-text-color: var(--r-tag-color);
    --r-comment-border: rgba(var(--r-color-dark), 0.1);
    --r-comment-highlight-color: var(--r-color-primary-lighten-80);
    --r-toast-notification-width: 25rem;
    --r-loader-border-color: var(--r-color-white-darken-20);
    --r-loader-border-top-color: var(--r-color-white-darken-70);
    --r-icon-color: var(--r-color-black);
    --r-icon-size: 1rem;
    --r-icon-small-size: 0.875rem;
    --r-icon-large-size: 2rem;
    --r-code-background: var(--r-color-light);
    --r-code-color: var(--r-color-dark-lighten-30);
}