.theme-default{
  --sfox-main-fg-color: white;
  --sfox-main-fg-color-contrast: black;
  --sfox-main-fg-color-dimmed: rgb(160,160,160);

  --theme-color: rgb(0,112,169);
  --page-background: linear-gradient(rgb(0,112,169), rgb(0,74,142));
  --fg-color-on-page-bg: white;
  --main-bg-color: white;
  --main-fg-color: black;
  --main-fg-color-dimmed: rgba(255,255,255,0.6);
  --light-fg-color: lightsteelblue;
  --modal-overlay-backgroud: rgba(0, 0, 0, 0.2);
  --update-infobox-background: rgba(0,0,0,0.7);
  --update-infobox-color: white;
  --start-screen-dialog-separator-border: 0 none;
  --start-screen-dialog-border: 1px solid white;
  --start-screen-dialog-button-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
  --plc-list-online-plc-color: green;
  --plc-list-online-plc-bg-color: rgba(0,255,0,0.15);
  --plc-list-offline-plc-color: silver;

  --mdc-theme-primary: var(--main-fg-color);
  --mdc-theme-on-primary: var(--main-fg-color);
  --mdc-theme-secondary: var(--main-fg-color);
  --mdc-text-field-fill-color: transparent;
  --mdc-text-field-label-ink-color: var(--main-fg-color-dimmed);
  --mdc-text-field-idle-line-color: silver;
  --mdc-text-field-hover-line-color: var(--main-fg-color);
  --mdc-text-field-ink-color: var(--main-fg-color);
  --mdc-radio-unchecked-color: var(--main-fg-color);

  --gvp-slider-knob-border: 0 none;
}
.theme-light{
  --sfox-main-fg-color: white;
  --sfox-main-fg-color-contrast: black;
  --sfox-main-fg-color-dimmed: rgb(160,160,160);
  --sfox-modal-control-bg-color: #0c8579;
  --sfox-main-app-background: #2aa298;
  --sfox-device-panel-background: #f0f0f0;
  --sfox-room-panel-background: #2aa298;
  --sfox-room-panel-background-expanded: #2aa298;
  --sfox-bottom-panel-background: #2aa298;
  --sfox-bottom-panel-border-top: 0 none;
  --sfox-room-panel-border-bottom: 0 none;
  --sfox-modal-overlay-backgroud: rgba(0, 0, 0, 0.4);
  --sfox-top-panel-bg-small: none;
  --sfox-top-panel-left-bg-small: none;
  --sfox-top-panel-right-bg-small: none;
  --sfox-top-panel-bg-normal: none;
  --sfox-top-panel-left-bg-normal: none;
  --sfox-top-panel-right-bg-normal: none;
  --sfox-top-panel-bg-large: none;
  --sfox-top-panel-left-bg-large: none;
  --sfox-top-panel-right-bg-large: none;
  --sfox-confirm-bg-color: #0c8579;
  --sfox-confirm-color: white;
  --sfox-control-on-color: darkorange;
  --sfox-control-off-color: rgba(0,0,0,0.4);
  --sfox-selected-bg-color: rgba(255,255,255,0.13);
  --sfox-device-background: transparent;
  --sfox-device-header-background: #2aa298;
  --sfox-device-control-background: #f0f0f0;
  --sfox-device-control-color: black;
  --sfox-device-border: 0 none;
  --sfox-device-box-shadow: 2px 2px 5px rgba(42,152,162,.5);
  --sfox-device-header-control-separator-border: 0 none;

  /* connection management */
  --theme-color: #f0f0f0;
  --page-background: #f0f0f0;
  --fg-color-on-page-bg: #2aa298;
  --main-bg-color: #2aa298;
  --main-fg-color: white;
  --main-fg-color-dimmed: #b2ddda;
  --light-fg-color: lightsteelblue;
  --warning-color: darkorange;
  --modal-overlay-backgroud: rgba(0,0,0,.4);
  --update-infobox-background: rgba(0,0,0,0.7);
  --update-infobox-color: white;
  --start-screen-dialog-separator-border: 0 none;
  --start-screen-dialog-border: 1px solid #2aa298;
  --start-screen-dialog-button-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
  --plc-list-online-plc-color: var(--main-fg-color-dimmed);
  --plc-list-online-plc-bg-color: rgba(255,255,255,0.05);
  --plc-list-offline-plc-color: rgba(255,255,255,0.3);
  
  --mdc-theme-primary: var(--main-fg-color);
  --mdc-theme-on-primary: var(--main-fg-color);
  --mdc-theme-secondary: var(--main-fg-color);
  --mdc-theme-text-primary-on-background: var(--main-fg-color);
  --mdc-theme-surface: #0c8579;
  --mdc-checkbox-mark-color: black;
  --mdc-checkbox-unchecked-color: var(--main-fg-color);
  --mdc-checkbox-ink-color: var(--main-bg-color);
  --mdc-text-field-label-ink-color: var(--main-fg-color-dimmed);
  --mdc-text-field-fill-color: transparent;
  --mdc-text-field-disabled-fill-color: transparent;
  --mdc-text-field-idle-line-color: rgba(255,255,255,.6);
  --mdc-text-field-hover-line-color: var(--main-fg-color);
  --mdc-text-field-ink-color: var(--main-fg-color);
  --mdc-select-ink-color: var(--main-fg-color);
  --mdc-select-idle-line-color: rgba(255,255,255,.6);
  --mdc-select-hover-line-color: rgba(255,255,255,.6);
  --mdc-select-dropdown-icon-color: rgba(255,255,255,.6);
  --mdc-radio-unchecked-color: var(--main-fg-color);

  --gvp-slider-knob-border: 1px solid rgba(0,0,0,0.6);
  --gvp-slider-track-background: rgba(0,0,0,.15);
}
.theme-dark{
  /* smartfox app */
  --sfox-main-fg-color: white;
  --sfox-main-fg-color-contrast: black;
  --sfox-main-fg-color-dimmed: rgb(160,160,160);
  --sfox-modal-control-bg-color: #3f3f3f;
  --sfox-main-app-background: #333;
  --sfox-device-panel-background: #272727;
  --sfox-room-panel-background: #333;
  --sfox-room-panel-background-expanded: #333;
  --sfox-bottom-panel-background: #333;
  --sfox-bottom-panel-border-top: 1px solid rgba(255,255,255,0.6);
  --sfox-room-panel-border-bottom: 1px solid rgba(255,255,255,0.6);
  --sfox-modal-overlay-backgroud: rgba(0, 0, 0, 0.4);
  --sfox-top-panel-bg-small: none;
  --sfox-top-panel-left-bg-small: none;
  --sfox-top-panel-right-bg-small: none;
  --sfox-top-panel-bg-normal: none;
  --sfox-top-panel-left-bg-normal: none;
  --sfox-top-panel-right-bg-normal: none;
  --sfox-top-panel-bg-large: none;
  --sfox-top-panel-left-bg-large: none;
  --sfox-top-panel-right-bg-large: none;
  --sfox-confirm-bg-color: #333;
  --sfox-confirm-color: white;
  --sfox-control-on-color: rgb(0, 190, 80);
  --sfox-control-off-color: rgba(255,255,255,0.5);
  --sfox-selected-bg-color: rgba(255,255,255,0.13);
  --sfox-device-background: rgba(255,255,255,0.09);
  --sfox-device-header-background: transparent;
  --sfox-device-control-background: rgba(255,255,255,0.05);
  --sfox-device-border: 1px solid rgb(50,50,50);
  --sfox-device-header-control-separator-border: 1px dotted rgb(50,50,50);

  /* connection management */
  --theme-color: #121212;
  --page-background: #121212;
  --fg-color-on-page-bg: white;
  --main-bg-color: #333;
  --main-fg-color: white;
  --main-fg-color-dimmed: rgba(255,255,255,0.5);
  --light-fg-color: lightsteelblue;
  --warning-color: rgb(160,0,0);
  --modal-overlay-backgroud: rgba(0,0,0,.4);
  --update-infobox-background: rgba(0,0,0,0.7);
  --update-infobox-color: white;
  --start-screen-dialog-separator-border: 0 none;
  --start-screen-dialog-border: 1px solid #333;
  --start-screen-dialog-button-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
  --plc-list-online-plc-color: var(--main-fg-color-dimmed);
  --plc-list-online-plc-bg-color: rgba(255,255,255,0.05);
  --plc-list-offline-plc-color: rgba(255,255,255,0.3);
  
  --mdc-theme-primary: var(--main-fg-color);
  --mdc-theme-on-primary: var(--main-fg-color);
  --mdc-theme-secondary: var(--main-fg-color);
  --mdc-theme-text-primary-on-background: var(--main-fg-color);
  --mdc-theme-surface: #3f3f3f;
  --mdc-checkbox-mark-color: black;
  --mdc-checkbox-unchecked-color: var(--main-fg-color);
  --mdc-checkbox-ink-color: var(--main-bg-color);
  --mdc-text-field-label-ink-color: var(--main-fg-color-dimmed);
  --mdc-text-field-fill-color: transparent;
  --mdc-text-field-disabled-fill-color: transparent;
  --mdc-text-field-idle-line-color: darkgray;
  --mdc-text-field-hover-line-color: var(--main-fg-color);
  --mdc-text-field-ink-color: var(--main-fg-color);
  --mdc-select-ink-color: var(--main-fg-color);
  --mdc-select-idle-line-color: darkgray;
  --mdc-select-hover-line-color: darkgray;
  --mdc-select-dropdown-icon-color: darkgray;
  --mdc-radio-unchecked-color: var(--main-fg-color);

  --gvp-slider-knob-border: 0 none;
}
.theme-ink{
  /* smartfox app */
  --sfox-main-fg-color: black;
  --sfox-main-fg-color-contrast: white;
  --sfox-main-fg-color-dimmed: rgba(0,0,0,0.5);
  --sfox-modal-control-bg-color: white;
  --sfox-main-app-background: white;
  --sfox-device-panel-background: white;
  --sfox-room-panel-background: white;
  --sfox-room-panel-background-expanded: white;
  --sfox-bottom-panel-background: white;
  --sfox-bottom-panel-border-top: 1px solid rgba(0,0,0,0.7);
  --sfox-room-panel-border-bottom: 1px solid rgba(0,0,0,0.7);
  --sfox-modal-overlay-backgroud: rgba(0, 0, 0, 0.8);
  --sfox-top-panel-bg-small: none;
  --sfox-top-panel-left-bg-small: none;
  --sfox-top-panel-right-bg-small: none;
  --sfox-top-panel-bg-normal: none;
  --sfox-top-panel-left-bg-normal: none;
  --sfox-top-panel-right-bg-normal: none;
  --sfox-top-panel-bg-large: none;
  --sfox-top-panel-left-bg-large: none;
  --sfox-top-panel-right-bg-large: none;
  --sfox-confirm-bg-color: white;
  --sfox-confirm-color: black;
  --sfox-control-on-color: rgb(0, 190, 80);
  --sfox-control-off-color: rgba(0,0,0,0.5);
  --sfox-selected-bg-color: rgba(0,0,0,0.2);
  --sfox-device-background: transparent;
  --sfox-device-header-background: transparent;
  --sfox-device-control-background: transparent;
  --sfox-device-border: 1px solid rgb(50,50,50);
  --sfox-device-header-control-separator-border: 1px dotted rgb(50,50,50);

  /* conneciton management */
  --theme-color: white;
  --page-background: white;
  --fg-color-on-page-bg: black;
  --main-bg-color: white;
  --main-fg-color: black;
  --main-fg-color-dimmed: rgba(0,0,0,0.7);
  --light-fg-color: lightsteelblue;
  --modal-overlay-backgroud: rgba(0, 0, 0, 0.8);
  --update-infobox-background: rgba(0,0,0,0.7);
  --update-infobox-color: white;
  --start-screen-dialog-separator-border: 1px solid black;
  --start-screen-dialog-border: 1px solid black;
  --start-screen-dialog-button-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
  --plc-list-online-plc-color: black;
  --plc-list-online-plc-bg-color: rgba(0,0,0,0.1);
  --plc-list-offline-plc-color: silver;
  
  --mdc-theme-primary: var(--main-fg-color);
  --mdc-theme-on-primary: var(--main-fg-color);
  --mdc-theme-secondary: var(--main-fg-color);
  --mdc-text-field-fill-color: transparent;
  --mdc-text-field-disabled-fill-color: transparent;
  --mdc-text-field-idle-line-color: var(--main-fg-color-dimmed);
  --mdc-text-field-hover-line-color: var(--main-fg-color);
  --mdc-text-field-ink-color: var(--main-fg-color);
  --mdc-radio-unchecked-color: var(--main-fg-color);
  
  --gvp-slider-knob-border: 0 none;
  --gvp-slider-knob-background: var(--main-fg-color);
  --gvp-slider-track-background: rgba(0,0,0,.15);
  /*--mdc-button-raised-box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;*/
}