Skip to main content
Version: 10.5

Theming

Easily customize the look and feel of HybridForms with our flexible theming system. Use intuitive themes, CSS variables for dynamic styling, and a wide range of customization options to tailor the UI to your needs.

Generally HybridForms comes with three base themes: Classic, Modern and Modern Dynamic. Each theme can be further customized using CSS variables and custom stylesheets. The user can select the theme in the App settings. But admins can also define what themes are available in the App and set a default theme for all users. This is done by creating a Theme Asset in the Admin UI (see below).

UI Theme selection Dark UI Theme selection

UI Theme selection in the App

UI Mode selection Dark UI Mode selection

UI Mode selection in the App

button inline with validationDark button inline with validation
Classic Theme

button inline with validationDark button inline with validation
Modern Theme

button inline with validationDark button inline with validation
Dynamic Theme

Custom Theming​

To start customizing your form templates (or the App UI itself) you have two options:

  1. Form template customization: You can add custom stylesheets to your form templates to override default styles or add new styles. This is done with custom CSS files that are added to the form template.
  2. App UI customization: You can create a Theme Asset in the Admin UI to define custom themes for the App UI. This is done by creating an asset with the "Theme asset" option checked (see below in the section Theme Asset). If a theme asset is activated in the app, the styles defined in the theme asset will be applied to all form templates.

The two options can be combined. For example, you can create a Theme Asset that defines a custom theme for the App UI and then add custom stylesheets to your form templates to further customize the look of your forms. If you have global styles that should be applied to all form templates, it is recommended to create a Theme Asset for that.

Example of a a theming css file (that could be part of a form template or uploaded as theme asset for all form templates) that changes the background color of the form template:

custom-theme.scss
:root {
    --formpage-color-primary: #004b76;
}

[data-theme-mode='light'] {
    --formpage-bg-body: #b3c9d6;
}

[data-theme-mode='dark'] {
    --formpage-color-secondary: #325041;
}
Note

There are visibility helper classes available to show/hide elements based on the current theme mode (light/dark). hf-hide-light, hf-hide-dark For more infos see Layout.

This update will change the primary color to dark blue and set the form page background to light blue in light mode. The background color in dark mode will remain unchanged. The primary color - used for elements such as required field indicators and menu buttons - will be updated in both light and dark modes. Additionally, the secondary color, typically used for form buttons, will be changed to dark green in dark mode.

Global styles applicable to both modes can be defined using the :root selector. Mode-specific styles can be targeted using the [data-theme-mode] attribute selector. To define styles for a particular theme type (e.g., classic, modern, or modern-dynamic), use the [data-theme-type] attribute selector. For example:

custom-theme.scss
[data-theme-type='modern'] {
    --formpage-color-primary: #004b76;
}

[data-theme-type='classic'] {
    --formpage-color-primary: #007616ff;
}

[data-theme-type='modern-dynamic'] {
    --formpage-color-primary: #720076ff;
}

This will change the primary color according to what theme type is being used.

See below for a list of all available CSS variables that can be used for theming.

Theme Asset​

Assets allow administrators to define custom elements in the Admin UI for all Form Templates of the system, including themes, logos, documents, images etc. With the “Theme asset” checked, the asset can be used as a Custom theme for every Form Template in the App.

button inline with validationDark button inline with validation Admin UI: Assets

Theme Settings​

  • Theme modes: Select the UI modes available for the asset. There are two modes available: Light and Dark.
  • Theme types: Select the UI theme types your theming supports. Form developers can set up their themes based on three base themes: Classic, Modern and Modern Dynamic.
  • App settings:

    • Show default app themes: An option to disable the default app themes, making only the asset theme visible as the UI theme in the App. Note: If multiple assets are present and this checkbox is unchecked for one of them, the unselected option will be applied in the App.

    • Default theme: Change the default theme of the App for all users in the system. Note: If multiple default themes are selected, the one chosen last will be applied as the default theme in the App.

button inline with validationDark button inline with validation Theme Settings in the Admin UI

Asset Settings​

The Asset Settings section in the Admin UI allows you to configure the same settings as in the Theme Settings above, but using a JSON format.

button inline with validationDark button inline with validation Asset Settings in the Admin UI

Asset Settings example
{
  "theme": {
    "modes": [
      "light",
      "dark"
    ],
    "types": [
      "modern",
      "classic"
    ],
    "showDefaultAppThemes": true
  }
}

Default Variables​

css-variables.scss
:where(:root) {
    /* SAVE-AREAS: 
       needed for getting th safe-area-inset-top value programmatically in Scaler.ts
       in JS, eg: getComputedStyle(document.documentElement).getPropertyValue('--sat')
    */
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);

    --theme: light;

    --bg-body: var(--blue-200);
    --bg-body-sec: var(--color-light);

    // Splashscreen
    --bg-splash: var(--bg-body-sec);
    --progress-splash: var(--color-primary);

    // COLORS
    // base definitions
    --color-primary: var(--blue-500);
    --color-primary-bg: var(--color-primary);
    --color-primary-light: color-mix(in srgb, var(--color-primary) 20%, var(--white-color));
    --color-primary-dark: color-mix(in srgb, var(--color-primary) 65%, var(--black-color));

    --color-secondary: var(--mint-green-300);
    --color-secondary-light: var(--mint-green-200);

    --color-tertiary: var(--yellorange-200);
    --color-tertiary-light: var(--yellorange-100);
    --color-tertiary-dark: var(--yellorange-250);

    --color-warning: var(--yellorange-250);
    --color-warning-light: var(--yellorange-150);
    --color-warning-dark: var(--yellorange-400);
    --color-warning-text: var(--gray-925);

    --color-error: var(--red-600);
    --color-error-text: var(--color-light);
    --color-danger: var(--red-500);
    --color-danger-light: var(--red-100);
    --color-success: var(--forest-green-600);
    --color-success-dark: var(--forest-green-800);
    --color-highlight: var(--yellorange-100);
    --color-hyperlink: var(--color-primary);
    --color-hyperlink-hover: var(--color-primary-dark);

    // checkbox und radiobox colors
    --color-radio-checkbox-bg: var(--color-light);
    --color-radio-checkbox-bg-disabled: var(--gray-100);
    --color-radio-checkbox: var(--blue-500);
    --color-radio-checkbox-checked: var(--blue-500);

    //light colors
    --bg-light: var(--white-color);
    --bordercolor-light: var(--white-color);
    --textcolor-light: var(--white-color);
    --color-light: var(--white-color);
    --color-light-inverted: var(--white-color);

    // dark colors
    --textcolor-dark: var(--black-color);
    --bordercolor-dark: var(--black-color);
    --bg-dark: var(--black-color);
    --overlay-bg: var(--gray-925);
    --color-dark: var(--black-color);
    --color-dark-inverted: var(--black-color);

    // only formpage
    --formpage-bg-body: var(--bg-body);
    --formpage-color-primary: var(--color-primary);
    --formpage-color-primary-bg: var(--formpage-color-primary);
    --formpage-color-primary-light: color-mix(in srgb, var(--formpage-color-primary) 20%, var(--white-color));
    --formpage-color-primary-lighter: color-mix(in srgb, var(--formpage-color-primary) 6%, var(--white-color));
    --formpage-color-primary-dark: color-mix(in srgb, var(--formpage-color-primary) 65%, var(--black-color));
    --formpage-color-primary-darker: color-mix(in srgb, var(--formpage-color-primary) 25%, var(--black-color));

    // fonts & font-sizes
    --font-stack: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    --font-stack-monospace: Courier New, Courier, monospace;
    --fontsize-control: 15px;
    --fontsize-control-label: 13px;
    --fontsize-filterbar: 11px;

    --textcolor: var(--gray-925);
    --textcolor-inverted: var(--color-light);
    --textcolor-invalid: var(--black-color);
    --textcolor-hover: var(--gray-700);
    --textcolor-sec: var(--gray-600);
    --textcolor-placeholder: var(--gray-600);
    --selection-textcolor: var(--color-light);
    --selection-bg: var(--color-primary-dark);

    --header-button-bg: transparent;
    --header-button-bg-active: var(--bg-body);
    --header-button-bg-hover: transparent;
    --header-button-color: var(--gray-50);
    --header-button-border: var(--bg-body);
    --header-button-border-hover: var(--color-secondary);
    --info-msg-bg: var(--gray-950);
    --info-msg-bg-lighter: var(--gray-950);
    --info-msg-textcolor: var(--color-light);
    --info-msg-bordercolor: var(--blue-299);

    // Block title
    --block-separator-color: var(--formpage-color-primary-light);
    --blocktitle-padding-left: 0px;

    // status-icons
    --status-icon-color: var(--formpage-color-primary);

    // controls
    --control-bg: var(--gray-50);
    --control-bg-transparent: transparent;
    --control-bg-filled: var(--bg-light);
    --control-bg-disabled: repeating-linear-gradient(
        145deg,
        var(--gray-100),
        var(--gray-100) 3px,
        var(--gray-200) 3px,
        var(--gray-200) 6px
    );
    --control-bg-req: var(--formpage-color-primary-lighter);
    --control-textcolor: var(--color-dark);
    --control-textcolor-placeholder: var(--textcolor-placeholder);
    --control-bg-feature: var(--formpage-bg-body);
    --control-border-color-feature: var(--color-light);
    --control-bordercolor: var(--gray-450);
    --control-bordercolor-required-not-filled: var(--formpage-color-primary);
    --control-bordercolor-view: var(--gray-450);
    --control-bordercolor-disabled: var(--gray-200);
    --control-bordercolor-hover: var(--gray-500);
    --control-icon-color: var(--color-dark);
    --control-icon-color-disabled: var(--gray-550);
    --control-icon-bg-hover: var(--formpage-color-primary);
    --control-icon-color-hover: var(--color-light);
    --control-checkbox-bg: var(--color-radio-checkbox-bg);
    --control-checkbox-bg-filled: var(--color-radio-checkbox-checked);
    --control-checkbox-icon: var(--color-radio-checkbox-bg);
    --control-check-radiobox-border: var(--gray-700);
    --control-checkbox-border-filled: var(--color-radio-checkbox-checked);
    --control-radiobox-bg: var(--color-radio-checkbox-bg);
    --control-radiobox-icon: var(--color-radio-checkbox-checked);
    --control-radiobox-border-filled: var(--color-radio-checkbox-checked);
    --control-radioCheck-highlight-inactive: var(--gray-600);
    --control-radioCheck-highlight-active: var(--gray-925);
    --control-toggle-btn-active: var(--formpage-color-primary);
    --control-toggle-btn-bg: var(--bg-light);
    --control-toggle-btn-border: var(--gray-250);
    --control-toggle-btn-text: var(--textcolor-dark);

    --label-bg: var(--gray-550);
    --feature-label-bg: var(--gray-550);
    --label-bg-required: var(--formpage-color-primary-bg);
    --label-textcolor: var(--textcolor-light);
    --label-checkbox-textcolor: var(--color-dark);
    --label-textcolor-filled: var(--color-light);

    // formpage block content
    --highlight-border-color: var(--yellorange-225);
    --highlight-area-bg: var(--yellorange-125);

    // tooltip
    // default
    --tooltip-textcolor: var(--color-light);
    // required
    --tooltip-textcolor-req: var(--label-bg-required);

    --tooltip-flyout-bg: var(--bg-light);
    --tooltip-flyout-accent: var(--blue-299);

    // badge-new
    --badge-new-bg-color: var(--textcolor);
    --badge-new-textcolor: var(--textcolor-inverted);

    // kendo
    --kendo-popup-bg: var(--white-color);
    --kendo-popup-textcolor: var(--gray-800);
    --kendo-popup-textcolor-dim: var(--gray-600);
    --kendo-link-color: var(--formpage-color-primary-dark);
    --kendo-link-color-hover: var(--kendo-link-color);
    --kendo-chip-bg: var(--gray-100);
    --kendo-chip-bg-hover: var(--gray-200);
    --kendo-chip-border-color: var(--gray-200);

    // SelectControls
    --kendo-list-item-bg-odd: var(--gray-150);

    // DatePicker
    --kendo-calendar-header-bg: var(--gray-50);
    --kendo-item-bg-hover: var(--gray-150);

    // TimePicker
    --kendo-time-highlight-bordercolor: rgba(0, 0, 0, 0.16);

    // NumericField
    --kendo-input-button-bg: var(--gray-50);
    --kendo-input-button-bg-hover: var(--gray-100);

    // print
    --print-textcolor-label: var(--gray-100);
    --print-bordercolor: var(--gray-150);

    // buttons
    --btn-bg: var(--gray-100);
    --btn-dark-color: var(--gray-800);
    --btn-dark-color-hover: var(--gray-600);
    --btn-dark-textcolor: var(--color-light);

    --btn-textcolor-dark: var(--color-dark);
    --btn-textcolor-light: var(--color-light);

    --btn-primary-color: var(--color-primary);
    --btn-primary-color-light: var(--blue-300);
    --btn-primary-color-dark: var(--color-primary-dark); // for focus/hover and border
    --btn-primary-textcolor: var(--color-light);
    --btn-primary-color-disabled: var(--blue-200);
    --btn-primary-color-dark-disabled: var(--blue-250);
    --btn-primary-textcolor-disabled: var(--gray-550);

    --btn-secondary-color: var(--color-secondary-light);
    --btn-secondary-color-dark: var(--color-secondary); // for focus/hover and border
    --btn-secondary-color-toggled: var(--btn-secondary-color-dark);
    --btn-secondary-color-border: var(--color-secondary); // for focus/hover and border
    --btn-secondary-textcolor: var(--color-dark);
    --btn-secondary-textcolor-light: var(--color-light);
    --btn-secondary-textcolor-disabled: var(--gray-550);
    --btn-accent-bordercolor: var(--bg-light);

    --btn-tertiary-color: var(--color-tertiary);

    --btn-gray-color: var(--gray-250);
    --btn-gray-color-light: var(--gray-150);
    --btn-gray-color-dark: var(--gray-550);
    --btn-gray-textcolor: var(--textcolor);
    --btn-gray-textcolor-light: var(--textcolor-inverted);
    --btn-gray-color-disabled: var(--gray-100);
    --btn-gray-color-dark-disabled: var(--gray-200);
    --btn-gray-textcolor-disabled: var(--gray-550);

    --btn-danger-color: var(--red-500);
    --btn-danger-color-light: var(--red-300);
    --btn-danger-color-dark: var(--red-900);
    --btn-danger-textcolor: var(--color-light);
    --btn-danger-color-disabled: var(--red-200);
    --btn-danger-color-dark-disabled: var(--red-100);
    --btn-danger-textcolor-disabled: var(--gray-550);

    --btn-warning-color: var(--color-warning);
    --btn-warning-color-light: var(--color-warning-light);
    --btn-warning-color-dark: var(--yellorange-300);
    --btn-warning-textcolor: var(--color-dark);
    --btn-warning-color-disabled: var(--yellorange-100);
    --btn-warning-color-dark-disabled: var(--yellorange-150);
    --btn-warning-textcolor-disabled: var(--gray-550);

    --btn-success-color: var(--forest-green-400);
    --btn-success-color-light: var(--forest-green-300);
    --btn-success-color-dark: var(--color-success);
    --btn-success-textcolor: var(--color-dark);
    --btn-success-color-disabled: var(--forest-green-100);
    --btn-success-color-dark-disabled: var(--forest-green-200);
    --btn-success-textcolor-disabled: var(--gray-550);

    --btn-radio-red: #fae0f7;
    --btn-radio-red-highlight: #f89dea;
    --btn-radio-orange: #fef2e1;
    --btn-radio-orange-highlight: #fcd698;
    --btn-radio-gray: #f1f1f1;
    --btn-radio-gray-highlight: #b3b3b3;
    --btn-radio-green: #e7f1e3;
    --btn-radio-green-highlight: #85b773;
    --btn-radio-lightGreen: #f3ffdf;
    --btn-radio-lightGreen-highlight: #d6ff95;
    --btn-radio-yellow: #fff9e0;
    --btn-radio-yellow-highlight: #fde266;

    // header
    --header-bg: var(--bg-light);
    --header-textcolor: var(--textcolor);
    --header-icon-bg: var(--gray-100);
    --header-bar-bg: var(--bg-light);
    --header-bar-bg-selected: var(--btn-secondary-color);
    --header-bar-textcolor: var(--textcolor);
    --header-bar-textcolor-selected: var(--textcolor);
    --header-bar-bordercolor: var(--header-bar-bg-selected);
    --header-search-bg: var(--gray-200);

    --listitems-bg: var(--bg-light);
    --listitems-bg-secondary: var(--gray-150);
    --listitems-unselected-icon-color: var(--gray-200);
    --listitems-addbutton-bg: var(--btn-secondary-color);
    --featureitems-bg: var(--bg-light);
    --featureitems-bg-secondary: var(--tab-content-bg);
    --featureitems-color: var(--textcolor);
    --featureitems-info-icons-bg: var(--gray-200);

    --dialog-bg: var(--bg-light);

    --tab-content-bg: var(--bg-light);
    --tab-content-border: none;
    --tab-bg: var(--tab-content-bg);
    --tab-bg-inactive: var(--formpage-bg-body);
    --tab-list-active-borderbottom: none;
    --tab-list-color-active: var(--textcolor);
    --tab-list-color-inactive: var(--gray-550);
    --tab-nav-bg: var(--gray-200);
    --tab-nav-bg-active: var(--gray-300);
    --tab-anchor-bg: var(--gray-200);
    --tabmenu-border-color: var(--color-light);
    --splitview-bg: var(--bg-light);
    --splitview-textcolor: var(--color-dark);
    --splitview-textcolor-accent: var(--textcolor-inverted);
    --splitview-btn-inactive: var(--bg-light);
    --splitview-btn-active: var(--formpage-bg-body);
    --splitview-btn-border: var(--formpage-bg-body);
    --splitview-features-bg: var(--formpage-bg-body);
    --splitview-btn-border-features: var(--formpage-bg-body);
    --splitview-btn-border-features-active: var(--splitview-btn-border-features);
    --splitview-icon-color: var(--formpage-color-primary);
    --splitview-icon-completed-color: var(--gray-550);
    --splitview-icon-textcolor: var(--color-light);
    --splitview-feature-icon-color: var(--gray-550);

    --toolbar-bg: var(--bg-light);
    --toolbar-btn-hover: var(--bg-light);
    --toolbar-btn-selected: var(--color-secondary);
    --toolbar-bordercolor: var(--gray-250);
    --toolbar-inline-bg: var(--gray-200);

    --view-bg: var(--bg-light);
    --border-radius-sm: calc(var(--border-radius) - 2px);
    --border-radius: 6px;
    --border-radius-lg: calc(var(--border-radius) + 2px);

    // CheckBox, RadioButton sizes
    --radio-button-size: 20px;
    --radio-checked-multiplier: 0.5;
    --check-button-size: 20px;
    --check-checked-multiplier: 0.5;

    // maps
    --map-btn-bg: var(--bg-light);
    --map-ml-btn-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    --ol-background-color: white;
    --ol-accent-background-color: #f5f5f5;
    --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
    --ol-partial-background-color: rgba(255, 255, 255, 0.75);
    --ol-foreground-color: #333333;
    --ol-subtle-foreground-color: #666666;
    --ol-brand-color: #00aaff;

    // Opacity disabled
    --opacity-disabled: 0.7;
    --btn-bg-disabled: repeating-linear-gradient(
        145deg,
        var(--gray-100),
        var(--gray-100) 3px,
        var(--gray-200) 3px,
        var(--gray-200) 6px
    );

    --ease-transition-all: all 0.25s cubic-bezier(0, 0, 0.2, 1), outline 0s, outline-offset 0s;
}

:where([data-theme-mode="dark"]) {
    --color-dark: var(--gray-999);
    --theme: dark;
    --bg-body: var(--color-dark);
    --bg-body-sec: var(--gray-990);
    --btn-bg-disabled: repeating-linear-gradient(
        145deg,
        var(--gray-950),
        var(--gray-950) 3px,
        var(--gray-800) 3px,
        var(--gray-800) 6px
    );

    --progress-splash: var(--white-color);
    --color-danger: #c12828;
    --color-danger-light: var(--yellorange-900);
    --color-error: #c12828;
    --color-primary: var(--blue-500);
    --color-primary-light: color-mix(in srgb, var(--color-primary) 50%, var(--black-color));
    --color-primary-dark: color-mix(in srgb, var(--color-primary) 50%, var(--white-color));
    --color-secondary-light: var(--mint-green-dark-500);
    --color-secondary: var(--mint-green-dark-700);
    --color-tertiary: var(--color-warning);
    --color-tertiary-light: var(--color-warning-light);
    --color-tertiary-dark: var(--color-warning-dark);

    --formpage-color-primary-light: color-mix(in srgb, var(--formpage-color-primary) 50%, var(--black-color));
    --formpage-color-primary-dark: color-mix(in srgb, var(--formpage-color-primary) 50%, var(--white-color));
    --color-warning: #ca9c45;
    --color-warning-light: #4e3e31;
    --color-warning-dark: #573f12;
    --color-radio-checkbox-bg: var(--gray-900);
    --color-radio-checkbox-bg-disabled: var(--gray-950);
    --color-radio-checkbox: var(--color-light);
    --color-radio-checkbox-checked: var(--color-light);
    --color-highlight: var(--yellorange-200);

    --color-light-inverted: var(--color-dark);
    --color-dark-inverted: var(--white-color);

    --textcolor: var(--gray-101);
    --textcolor-hover: var(--gray-300);
    --textcolor-sec: var(--gray-300);
    --textcolor-inverted: var(--color-dark);
    --textcolor-invalid: var(--gray-100);
    --textcolor-placeholder: var(--gray-500);

    --header-bg: var(--gray-950); //* hsi --gray-950
    --header-icon-bg: var(--gray-701);
    --header-icon-color: var(--gray-100);
    --header-bar-bg: var(--gray-850);
    --header-bar-bg-selected: var(--gray-101);
    --header-bar-textcolor: var(--textcolor);
    --header-bar-textcolor-selected: var(--textcolor-inverted);
    --header-bar-bordercolor: var(--gray-101);
    --header-button: var(--gray-800);
    --header-search-bg: var(--gray-800);

    --listitems-bg: var(--gray-850); //* hsi --gray-950
    --listitems-bg-secondary: var(--gray-990);
    --listitems-unselected-icon-color: var(--gray-900);
    --listitems-addbutton-bg: transparent;

    --featureitems-color: var(--color-light);
    --toolbar-bg: var(--gray-950);
    --toolbar-btn-hover: var(--gray-950);
    --toolbar-bordercolor: var(--gray-800);
    --toolbar-inline-bg: var(--gray-800);

    --dialog-bg: var(--gray-950);

    --splitview-bg: var(--gray-950);
    --splitview-page-icon-color-required: var(--formpage-color-primary);
    --splitview-textcolor: var(--textcolor);
    --splitview-textcolor-accent: var(--textcolor);
    --splitview-btn-inactive: var(--gray-600);
    --splitview-page-icon-color: var(--gray-600);
    --splitview-btn-border: var(--gray-800);
    --splitview-features-bg: var(--formpage-bg-body);
    --splitview-btn-border-features: var(--gray-800);
    --splitview-btn-border-features-active: var(--formpage-bg-body);
    --splitview-icon-completed-color: var(--gray-701);
    --splitview-feature-icon-color: var(--gray-300);

    --tab-content-bg: var(--gray-950);
    --tab-list-active-borderbottom: 1px solid var(--gray-990);
    --tab-list-color-inactive: var(--textcolor-sec);
    --tab-nav-bg: var(--gray-990);
    --tab-nav-bg-active: var(--gray-970);
    --tab-anchor-bg: var(--gray-900);
    --tabmenu-border-color: var(--gray-800);

    --control-bg: var(--gray-990);
    --control-bg-req: var(--formpage-color-primary-darker);
    --control-bg-filled: var(--gray-990); // only modern
    --control-bg-disabled: repeating-linear-gradient(
        145deg,
        var(--gray-950),
        var(--gray-950) 3px,
        var(--gray-800) 3px,
        var(--gray-800) 6px
    );
    --control-textcolor: var(--gray-75);
    --control-textcolor-placeholder: var(--textcolor-placeholder);
    --control-border-color-feature: var(--gray-701);
    --control-bordercolor: var(--gray-701);
    --control-bordercolor-view: var(--gray-250);
    --control-bordercolor-disabled: var(--gray-950);
    --control-bordercolor-hover: var(--gray-700);
    --control-checkbox-bg-filled: var(--white-color);
    --control-check-radiobox-border: var(--gray-700);
    --control-radioCheck-highlight-inactive: var(--textcolor);
    --control-radioCheck-highlight-active: var(--textcolor);
    --control-toggle-btn-bg: var(--gray-950);
    --control-toggle-btn-border: var(--gray-950);
    --control-toggle-btn-text: var(--gray-75);
    --control-icon-color: var(--gray-200);
    --control-icon-color-disabled: var(--gray-800);
    --control-icon-color-hover: var(--gray-200);
    --control-icon-bg-hover: var(--gray-950);

    --tooltip-textcolor: var(--label-textcolor);
    --tooltip-textcolor-req: var(--tooltip-textcolor);

    --label-bg: var(--gray-701);
    --feature-label-bg: var(--gray-701);
    --label-textcolor: var(--textcolor);
    --label-checkbox-textcolor: var(--textcolor);
    
    --tooltip-flyout-bg: var(--gray-990);
   
    // formpage block content
    --highlight-border-color: var(--brownish-500);
    --highlight-area-bg: var(--brownish-700);

    // badge-new
    --badge-new-textcolor: var(--textcolor-inverted);

    // kendo
    --kendo-popup-bg: var(--gray-800);
    --kendo-popup-textcolor: var(--gray-200);
    --kendo-popup-textcolor-dim: var(--gray-400);
    --kendo-link-color-hover: var(--formpage-color-primary);
    --kendo-chip-bg: var(--gray-700);
    --kendo-chip-bg-hover: var(--gray-600);
    --kendo-chip-border-color: var(--gray-600);
    --kendo-item-bg-hover: var(--gray-600);


    // SelectControls
    --kendo-list-item-bg-odd: var(--gray-900);

    // DatePicker
    --kendo-calendar-header-bg: var(--gray-900);

    // TimePicker
    --kendo-time-highlight-bordercolor: rgba(255, 255, 255, 0.26);

    // NumericField
    --kendo-input-button-bg: var(--gray-970);
    --kendo-input-button-bg-hover: var(--gray-900);

    // --btn-bg: var(--gray-950);
    --btn-bg: var(--gray-990);

    --btn-gray-color: var(--gray-700);
    --btn-gray-color-light: var(--gray-600);
    --btn-gray-color-dark: var(--gray-800);
    --btn-gray-textcolor: var(--textcolor);
    --btn-gray-textcolor-light: var(--textcolor);
    --btn-gray-color-disabled: var(--gray-500);
    --btn-gray-color-dark-disabled: var(--gray-700);
    --btn-gray-textcolor-disabled: var(--textcolor-sec);

    --btn-secondary-color-toggled: var(--color-secondary);
    --btn-secondary-textcolor: var(--white-color);
    --btn-secondary-textcolor-light: var(--gray-200);
    --btn-secondary-textcolor-disabled: var(--white-color);
    --btn-accent-bordercolor: var(--gray-600);

    --btn-radio-red: #4a3634;
    --btn-radio-red-highlight: #732525;
    --btn-radio-orange: #634b39;
    --btn-radio-orange-highlight: #7e4d26;
    --btn-radio-gray: #646464;
    --btn-radio-gray-highlight: #373737;
    --btn-radio-green: #3d4d33;
    --btn-radio-green-highlight: #35581d;
    --btn-radio-lightGreen: #5d694a;
    --btn-radio-lightGreen-highlight: #586f34;
    --btn-radio-yellow: #67632b;
    --btn-radio-yellow-highlight: #bcb12b;
}

:where([data-theme-type^="modern"]) {
    --blocktitle-padding-left: 5px;
    // tooltip
    // default
    --tooltip-textcolor: var(--label-bg);
}

:where([data-theme-type^="modern"][data-theme-mode="light"]) {
    --theme: light;

    // label
    --label-bg: var(--gray-500);
    --feature-label-bg: var(--gray-500);
    --label-textcolor: var(--gray-600);
    --label-textcolor-req: var(--formpage-color-primary-dark);
}

:where([data-theme-type^="modern"][data-theme-mode="dark"]) {
    --label-bg: var(--gray-600);
    --feature-label-bg: var(--gray-600);
    --label-textcolor: var(--gray-200);
    --label-textcolor-req: var(--formpage-color-primary-dark);

    // tooltip
    // default
    --tooltip-textcolor: var(--label-textcolor);

    --control-bg: var(--gray-925);
    --control-bordercolor: var(--gray-700);
    --color-primary-light: color-mix(in srgb, var(--formpage-color-primary) 50%, var(--black-color));
}

[data-theme-type="pdf"] {
    --bg-body: var(--bg-light);
}