:root {
  //colors that change with darkmode (default is light mode)
  --color-text-contrast: #212428;
  --color-text-gray: #737373;
  --color-background-gray: #f7f7f7;
  --color-disabled-gray: #cad5db;
  --color-light-greyish-white: #efefef;
  --color-toggle-grey: #e8eaea;
  --color-blue-white: #f5f8fa;
  --color-background-white: #fff;
  --color-channel-icon-circle: #f1faff;
  --color-template-highlight: #fff;
  --color-tooltip-gray: #cad5db;
  --color-background-blue: #f1faff;
  --color-template-gray: #f0f0f0;
  --color-shadow-gray: #cad5db;
  --color-button-gray: #cad5db;
  --color-airy-message-inbound: #f1faff;
  --color-airy-message-outbound: #1578d4;
  --color-elements-blue: #1578d4;
  --color-airy-message-text-inbound: #000000;
  --color-type-component-app: lightgreen;
  --color-type-component-connector: lightblue;
  --color-type-component: lightgray;
  --color-code-edit: #f1faff;
  --color-code-no-edit: #f7f7f7;

  //colors that do not change with darkmode
  --color-template-border-gray: #ccc;
  --color-disable-status-config: #737373;
  --color-dark-elements-gray: #98a4ab;
  --color-tooltip-text-gray: #212428;
  --color-icons-gray: #a0abb2;
  --color-light-gray: #cad5db;
  --color-greyish-white: #e8eaea;
  --color-very-light-grey: #e8eaea;
  --color-blue-white-button: #f5f8fa;
  --color-button-light-blue: #f1faff;
  --color-airy-dark-blue: #1b4469;
  --color-airy-logo-blue: #4bb3fd;
  --color-hover-blue: #337bb3;
  --color-airy-blue: #1578d4;
  --color-airy-accent: #1578d4;
  --color-airy-blue-hover: #1e62d0;
  --color-airy-blue-pressed: #1b4469;
  --color-fb-cta: #1877f2;
  --color-fb-cta-border: #2281fd;
  --color-red-alert: #d51548;
  --color-red-alert-pressed: #a2002b;
  --color-red-info: #ee336c;
  --color-notify-me: #a30d8b;
  --color-accent-magenta: #f7147d;
  --color-error-background: #fae6e9;
  --color-highlight-yellow: #fbbd54;
  --color-not-configured-orange: #ffab00;
  --color-background-yellow: #fbf9ee;
  --color-background-red: #fff7f9;
  --color-soft-green: #0da36b;
  --color-green-pressed: #0b8d5d;
  --color-tag-green: #0e764f;
  --color-tag-purple: #730a80;
  --color-airy-message-text-outbound: #ffffff;
  --color-switch-unchecked-background: #efefef;
}

html[data-theme='dark'] {
  --color-text-contrast: #e8e6e3;
  --color-text-gray: #e8eaea;
  --color-disabled-gray: #828484;
  --color-background-gray: #1f201c;
  --color-light-greyish-white: #1f201c;
  --color-toggle-grey: #828484;
  --color-blue-white: #1f201c;
  --color-background-white: #272822;
  --color-channel-icon-circle: #272822;
  --color-template-highlight: #272822;
  --color-tooltip-gray: #e8eaea;
  --color-background-blue: #243037;
  --color-template-gray: #484848;
  --color-shadow-gray: #4d5153;
  --color-button-gray: #313537;
  --color-airy-message-inbound: #1c1e1f;
  --color-airy-message-outbound: #1160aa;
  --color-elements-blue: #115fa8;
  --color-airy-message-text-inbound: #ffffff;
  --color-type-component-app: darkgreen;
  --color-type-component-connector: #115fa8;
  --color-type-component: #484848;
  --color-code-edit: #243037;
  --color-code-no-edit: #1f201c;
}
