Theming

Unlock creativity with our powerful theming system! Effortlessly customize the look and feel of HybridForms using intuitive themes, CSS variables for dynamic styling, and extensive style customization options.

Color Palettes

color-palettes.scss

:where(:root) {
    // color scales

    // blue scale based on primary
    --blue-50: #f2f7fd;
    --blue-100: #e3edfb;
    --blue-150: #d3e5f3; //primary-light
    --blue-200: #c1dcf6;
    --blue-250: #a7bed5; // Primary-dirty
    --blue-300: #66a0d2;
    --blue-400: #4d9ee3;
    --blue-500: #247bc6; // primary
    --blue-600: #1866b1;
    --blue-700: #145190;
    --blue-800: #154677;
    --blue-850: #175082; // primary-dark
    --blue-900: #173b63;
    --blue-950: #0f2642;

    // modern blue scale
    --modern-blue-50: #e8f7ff;
    --modern-blue-100: #caeaff;
    --modern-blue-200: #a1ddff;
    --modern-blue-300: #60c9ff;
    --modern-blue-400: #15a8ff;
    --modern-blue-500: #0074d5;
    --modern-blue-600: #0058c6;
    --modern-blue-700: #0045c6;
    --modern-blue-800: #003aa5;
    --modern-blue-900: #06327c;
    --modern-blue-950: #081f4b;

    --jungle-green-50: #f1fcfa;
    --jungle-green-75: #e2f4f4; // secondary-disabled
    --jungle-green-100: #d1f6f2;
    --jungle-green-150: #c0e2e2; // secondary-light-15
    --jungle-green-200: #a3ece6;
    --jungle-green-300: #6ddbd5;
    --jungle-green-350: #74c9c9; // secondary-light
    --jungle-green-400: #3fc2bf;
    --jungle-green-500: #239999; // secondary
    --jungle-green-550: #208f8f; // secondary-dark
    --jungle-green-600: #1c8285;
    --jungle-green-700: #1a696b;
    --jungle-green-800: #195356;
    --jungle-green-900: #194748;
    --jungle-green-950: #09262a;

    //yellorange
    --yellorange-50: #fff9eb;
    --yellorange-100: #ffedc6;
    --yellorange-150: #ffdd9e;
    --yellorange-200: #ffd988;
    --yellorange-250: #ffb938;
    --yellorange-300: #d28900; //warning
    --yellorange-400: #ffa620;
    --yellorange-500: #f98207;
    --yellorange-600: #dd5c02;
    --yellorange-700: #b73e06;
    --yellorange-800: #942f0c;
    --yellorange-900: #7a280d;
    --yellorange-950: #461202;

    // red
    --red-100: #ffcccc;
    --red-200: #ff9999;
    --red-300: #fd8484;
    --red-400: #ff6666;
    --red-500: #ff0000; // danger
    --red-600: #e60000;
    --red-700: #cc0000;
    --red-800: #b30000;
    --red-900: #a80011;

    // green
    --forest-green-50: #f2fcf1;
    --forest-green-100: #defade;
    --forest-green-200: #c0f3bf;
    --forest-green-300: #8fe78e;
    --forest-green-350: #87c79f;
    --forest-green-400: #55d355;
    --forest-green-450: #62a87c;
    --forest-green-500: #2eb92e;
    --forest-green-550: #457556;
    --forest-green-600: #24ab24; // success
    --forest-green-700: #1d781d;
    --forest-green-800: #1c5f1c;
    --forest-green-900: #194e1a;
    --forest-green-950: #082b0a;

    // modern-green
    --neptun-green-50: #f9fdfc;
    --neptun-green-100: #ebf7f6;
    --neptun-green-200: #d9eeec;
    --neptun-green-300: #badedc;
    --neptun-green-400: #9dcac9;
    --neptun-green-500: #73bfbf;
    --neptun-green-600: #4ba6a7;
    --neptun-green-700: #418387;
    --neptun-green-800: #396a6d;
    --neptun-green-900: #355b5d;
    --neptun-green-950: #173536;

    // gray
    --gray-50: #fafafa;
    --gray-100: #efefef;
    --gray-150: #ededed; //print-border-color
    --gray-175: #e6e6e6; //print-border-color
    --gray-200: #dcdcdc; // light-20
    --gray-250: #cccccc; // light-25
    --gray-300: #bdbdbd; // light-30
    --gray-400: #989898;
    --gray-450: #8f8f8f;
    --gray-500: #7c7c7c;
    --gray-550: #757575;
    --gray-600: #656565;
    --gray-700: #525252;
    --gray-800: #464646;
    --gray-850: #333333;
    --gray-900: #3d3d3d;
    --gray-925: #333333;
    --gray-950: #292929;
    --gray-970: #212121;
    --gray-990: #1d1d1d;
    --gray-999: #111111;
    --gray-200-alpha-50: rgba(220, 220, 220, 0);

    --white-color: #ffffff;
    --black-color: #000000;
    --gradient-blue-green: linear-gradient(90deg, #175082 53%, #0c6577 100%);

    // shadows
    --shadow-key-umbra-opacity: 0.2;
    --shadow-key-penumbra-opacity: 0.14;
    --shadow-ambient-shadow-opacity: 0.12;
    --shadow-0: none;
    --shadow-1: 0px 2px 1px -1px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 1px 1px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 1px 3px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-2: 0px 3px 1px -2px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 2px 2px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 1px 5px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-3: 0px 3px 3px -2px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 3px 4px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 1px 8px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-4: 0px 2px 4px -1px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 4px 5px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 1px 10px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-5: 0px 3px 5px -1px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 5px 8px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 1px 14px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-6: 0px 3px 5px -1px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 6px 10px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 1px 18px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-7: 0px 4px 5px -2px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 7px 10px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 2px 16px 1px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-8: 0px 5px 5px -3px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 8px 10px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 3px 14px 2px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-9: 0px 5px 6px -3px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 9px 12px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 3px 16px 2px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-10: 0px 6px 6px -3px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 10px 14px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 4px 18px 3px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-11: 0px 6px 7px -4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 11px 15px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 4px 20px 3px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-12: 0px 7px 8px -4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 12px 17px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 5px 22px 4px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-13: 0px 7px 8px -4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 13px 19px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 5px 24px 4px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-14: 0px 7px 9px -4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 14px 21px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 5px 26px 4px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-15: 0px 8px 9px -5px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 15px 22px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 6px 28px 5px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-16: 0px 8px 10px -5px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 16px 24px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 6px 30px 5px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-17: 0px 8px 11px -5px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 17px 26px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 6px 32px 5px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-18: 0px 9px 11px -5px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 18px 28px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 7px 34px 6px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-19: 0px 9px 12px -6px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 19px 29px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 7px 36px 6px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-20: 0px 10px 13px -6px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 20px 31px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 8px 38px 7px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-21: 0px 10px 13px -6px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 21px 33px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 8px 40px 7px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-22: 0px 10px 14px -6px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 22px 35px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 8px 42px 7px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-23: 0px 11px 14px -7px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 23px 36px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 9px 44px 8px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
    --shadow-24: 0px 11px 15px -7px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
        0px 24px 38px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
        0px 9px 46px 8px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
}

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(--jungle-green-500);
    --color-secondary-light: var(--jungle-green-350);
    --color-secondary-light-50: var(--jungle-green-50);
    --color-secondary-light-75: var(--jungle-green-75);
    --color-secondary-light-150: var(--jungle-green-150);

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

    --color-error: var(--red-900);
    --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);

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

    //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);
    --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-dark: color-mix(in srgb, var(--formpage-color-primary) 65%, 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);

    --highlight-color: var(--color-light);
    --highlight-bg: var(--color-primary-dark);
    --header-button: var(--gray-150);
    --header-button-color: var(--gray-50);
    --header-button-color-active: var(--gray-50);
    --header-button-hover: var(--gray-550);
    --info-msg-bg: var(--gray-950);
    --info-msg-bg-lighter: var(--gray-950);
    --info-msg-textcolor: var(--color-light);

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

    // controls
    --control-bg: var(--bg-light);
    --control-bg-transparent: transparent;
    --control-bg-filled: var(--bg-light);
    --control-bg-hover: var(--bg-light);
    --control-bg-disabled: var(--gray-200);
    --control-bg-disabled-solid: var(--gray-200);
    --control-textcolor: var(--color-dark);
    --control-bordercolor: var(--gray-250);
    --control-bordercolor-view: var(--gray-250);
    --control-bordercolor-disabled: var(--gray-200);
    --control-bordercolor-hover: var(--gray-450);
    --control-icon-bg-disabled: var(--jungle-green-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-drawing-image: var(--gray-300);
    --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);
    --label-bg-required: var(--formpage-color-primary-bg);
    --label-textcolor: var(--textcolor-light);
    --label-checkbox-textcolor: var(--color-dark);

    // tooltip
    // default
    --tooltip-textcolor: var(--label-bg);
    --tooltip-bg-color: var(--gray-200);
    --tooltip-bg-color-focus: var(--color-light);
    // required
    --tooltip-textcolor-req: var(--label-bg-required);
    --tooltip-bg-color-req: var(--formpage-color-primary-light);
    --tooltip-bg-color-req-focus: var(--tooltip-bg-color-focus);

    --tooltip-flyout-bg: var(--bg-light);
    --tooltip-flyout-accent: var(--gray-550);

    // badge-new
    --badge-new-bg-color: var(--color-primary);
    --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);
    --kendo-link-color-hover: var(--formpage-color-primary-dark);
    --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-calendar-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-light: var(--color-secondary-light-150); //
    --btn-secondary-color-dark: var(--jungle-green-550); // for focus/hover and border
    --btn-secondary-color-border: var(--jungle-green-550); // for focus/hover and border
    --btn-secondary-textcolor: var(--color-dark);
    --btn-secondary-textcolor-light: var(--color-light);
    --btn-secondary-color-disabled: var(--color-secondary-light-75);
    --btn-secondary-color-dark-disabled: var(--color-secondary-light-150);
    --btn-secondary-textcolor-disabled: var(--gray-550);

    --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: #fdeae8;
    --btn-radio-red-highlight: #ff8989;
    --btn-radio-orange: #fef1e7;
    --btn-radio-orange-highlight: #fabf91;
    --btn-radio-gray: #f1f1f1;
    --btn-radio-gray-highlight: #b3b3b3;
    --btn-radio-green: #edfce4;
    --btn-radio-green-highlight: #9ed17c;
    --btn-radio-lightGreen: #f3ffdf;
    --btn-radio-lightGreen-highlight: #d6ff95;
    --btn-radio-yellow: #f8f5ca;
    --btn-radio-yellow-highlight: #fcf59d;

    // header
    --header-bg: var(--bg-light);
    --header-textcolor: var(--textcolor);
    --header-bordercolor: var(--gray-250);
    --header-icon-bg: var(--gray-100);
    --header-bar-bg: var(--bg-light);
    --header-bar-bg-selected: var(--color-primary-bg);
    --header-bar-bg-hover: var(--color-primary-light);
    --header-bar-textcolor: var(--color-primary);
    --header-bar-textcolor-selected: var(--color-light);
    --header-bar-bordercolor: var(--color-primary);
    --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(--listitems-bg);

    --featureitems-bg: var(--bg-light);
    --featureitems-bg-secondary: var(--gray-550);
    --featureitems-color: var(--color-light);
    --featureitems-info-icons-bg: var(--gray-200);

    --dialog-bg: var(--bg-light);
    --dialog-title-color: var(--jungle-green-550);

    --tab-content-bg: var(--bg-light);
    --tab-content-border: none;
    --tab-bg: var(--tab-content-bg);
    --tab-border: none;
    --tab-list-inactive: var(--blue-150);
    --tab-list-active-borderbottom: none;
    --tab-list-color-inactive: var(--gray-550);
    --tab-nav-bg: var(--gray-200);
    --tab-nav-bg-active: var(--gray-300);
    --splitview-bg: var(--bg-light);
    --splitview-textcolor: var(--color-dark);
    --splitview-textcolor-accent: var(--textcolor-inverted);
    --splitview-btn-inactive: var(--gray-200);
    --splitview-btn-active: var(--gray-550);
    --splitview-icon-color: var(--color-dark);
    --splitview-icon-color-active: var(--color-light);
    --splitview-evaluation-icon-color: var(--color-light);
    --splitview-evaluation-icon-color-active: var(--color-dark);

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

    --view-bg: var(--bg-light);
    --border-radius: 4px;

    // 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;

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

:where([data-theme-mode='dark']) {
    --theme: dark;
    --bg-body: var(--gray-700);
    --bg-body-sec: var(--gray-990);
    --btn-bg-dark: #2c686d;
    --btn-bg-dark-disabled: #143c3e;
    --progress-splash: var(--white-color);
    --color-danger: var(--red-500);
    --color-danger-light: var(--yellorange-900);
    --color-error: var(--red-500);
    --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));
    --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-secondary-light: var(--btn-bg-dark);
    --color-highlight: var(--yellorange-200);

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

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

    --header-bg: var(--gray-990);
    --header-bordercolor: var(--gray-800);
    --header-icon-bg: var(--gray-550);
    --header-icon-color: var(--gray-100);
    --header-bar-bg: var(--gray-990);
    --header-bar-textcolor: var(--gray-100);
    --header-bar-textcolor-selected: var(--gray-100);
    --header-button: var(--gray-800);
    --header-search-bg: var(--gray-800);

    --listitems-bg: var(--gray-990);
    --listitems-bg-secondary: var(--gray-990);
    --listitems-unselected-icon-color: var(--gray-900);
    --listitems-addbutton-bg: var(--gray-850);

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

    --dialog-bg: var(--gray-950);
    --dialog-title-color: var(--btn-bg-dark);

    --splitview-bg: var(--gray-800);
    --splitview-page-icon-color-required: var(--formpage-color-primary);
    --splitview-btn-active: var(--gray-970);
    --splitview-textcolor: var(--textcolor);
    --splitview-textcolor-accent: var(--textcolor);
    --splitview-btn-inactive: var(--gray-600);
    --splitview-icon-color: var(--color-light);
    --splitview-evaluation-icon-color: var(--color-light);
    --splitview-evaluation-icon-color-active: var(--color-light);
    --splitview-page-icon-color: var(--gray-600);

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

    --control-bg: var(--gray-990);
    --control-bg-req: var(--gray-700);
    --control-bg-filled: var(--gray-990); // only modern
    --control-bg-filled-req: var(--gray-700); // only modern
    --control-bg-hover: var(--gray-990);
    --control-textcolor: var(--gray-100);
    --control-bordercolor: var(--gray-900);
    --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-100);
    --control-icon-bg-disabled: var(--forest-green-550);
    --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);

    --label-bg: var(--gray-900);
    --label-textcolor: var(--textcolor);
    --label-checkbox-textcolor: var(--textcolor);

    --tooltip-bg-color: var(--gray-400);
    --tooltip-bg-color-req: var(--gray-400);
    --tooltip-textcolor-req: var(--blue-800);
    --tooltip-flyout-bg: var(--gray-990);
    --tooltip-flyout-accent: var(--gray-700);

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

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

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

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

    // 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: var(--btn-bg-dark);
    --btn-secondary-color-light: var(--btn-bg-dark);
    --btn-secondary-color-dark: #00454a;
    --btn-secondary-color-border: var(--forest-green-550);
    --btn-secondary-textcolor: var(--white-color);
    --btn-secondary-textcolor-light: var(--gray-200);
    --btn-secondary-color-disabled: var(--btn-bg-dark-disabled);
    --btn-secondary-textcolor-disabled: var(--white-color);
    --btn-secondary-color-dark-disabled: var(--btn-bg-dark-disabled);

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

:where([data-theme-type^='modern'][data-theme-mode='light']) {
    --color-primary: var(--modern-blue-500);
    
    --color-secondary-light-150: #73bfbf;

    --theme: light;
    --bg-body: #d0dce8;
    --tab-list-inactive: transparent;
    --color-secondary-light: var(--jungle-green-150);
    --splitview-bg: var(--gray-100);

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

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

    --control-bg: var(--gray-100);
    --control-bg-disabled: repeating-linear-gradient(
        145deg,
        var(--gray-100),
        var(--gray-100) 3px,
        var(--gray-200) 3px,
        var(--gray-200) 6px
    );
    --control-bg-disabled-solid: var(--gray-200);
    --control-bg-req: var(--formpage-color-primary-light); // only modern
    --control-bg-filled: var(--bg-light); // only modern
    --control-bg-filled-req: var(--bg-light); // only modern
    --control-bordercolor: var(--gray-450);
    --control-border: 1px solid var(--gray-500);
    --control-border-req: 1px solid var(--formpage-color-primary);
    --control-border-req-filled: 1px solid var(--gray-500);

    --splitview-btn-active: var(--bg-light);
    --splitview-textcolor: var(--gray-800);
    --splitview-textcolor-accent: var(--color-dark);
    --splitview-page-color: var(--color-light);
    --splitview-btn-divider-color: var(--gray-300);
    --splitview-btn-notfilled-bg: var(--formpage-color-primary);
    --splitview-btn-filled-bg: var(--gray-500);
    --splitview-page-icon-color: var(--gray-500);
    --splitview-page-icon-color-required: var(--formpage-color-primary);
    --splitview-icon-color: var(--color-light);
    --splitview-icon-color-active: var(--color-light);
    --splitview-icon-color-inverted: var(--gray-500);
    --splitview-evaluation-icon-color: var(--color-light);
    --splitview-evaluation-icon-color-active: var(--color-light);

    --btn-secondary-color: var(--color-secondary-light-150);
    --btn-secondary-color-light: var(--color-secondary-light-150); //
    --btn-secondary-color-dark: var(--neptun-green-700); // for focus/hover and border
    --btn-secondary-textcolor: var(--neptun-green-950);
    --btn-secondary-textcolor-light: var(--color-light);

    --btn-secondary-color-disabled: var(--jungle-green-75);
    --btn-secondary-color-dark-disabled: var(--color-secondary-light-150);
    --btn-secondary-textcolor-disabled: var(--gray-550);

    --featureitems-bg-secondary: #62788c;
    --featuredetail-textcolor: var(--color-dark);
    --featuredetail-label-bordercolor: var(--gray-500);

    --tab-border: 1px solid var(--gray-300);

    --listitems-bg-secondary: var(--gray-175);

    // Opacity disabled
    --opacity-disabled: 0.8;
}

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

    // tooltip
    // default
    --tooltip-textcolor: var(--label-textcolor);
    --tooltip-bg-color: var(--control-bg);

    // required
    --tooltip-textcolor-req: var(--label-textcolor-req);
    --tooltip-bg-color-req: var(--control-bg-req);
    // default filled
    --tooltip-textcolor-filled: var(--label-textcolor-filled);
    --tooltip-bg-color-filled: var(--gray-600);
    // required filled
    --tooltip-textcolor-filled-req: var(--label-textcolor-filled);
    --tooltip-bg-color-filled-req: var(--label-bg-required);
    --control-bg-disabled: repeating-linear-gradient(
        145deg,
        var(--gray-950),
        var(--gray-950) 3px,
        var(--gray-800) 3px,
        var(--gray-800) 6px
    );
    --control-bg: var(--gray-925);
    --control-bg-req: var(--formpage-color-primary-light);
    --control-bordercolor: var(--gray-700);
    --control-border: 1px solid var(--gray-900);
    --control-border-req: 1px solid var(--formpage-color-primary);
    --control-border-req-filled: 1px solid var(--gray-700);
    --color-primary-light: color-mix(in srgb, var(--formpage-color-primary) 50%, var(--black-color));
    --tab-border: 1px solid var(--gray-450);
    --tab-list-inactive: transparent;
}

:where([data-theme-type='classic'][data-theme-mode='dark']) {
    --btn-secondary-color-dark: #295458;
    --control-drawing-image: var(--gray-900);
    --control-bg-disabled: var(--gray-850);
}

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