diff --git a/src/components/entity/ha-entity-toggle.js b/src/components/entity/ha-entity-toggle.js
index 556dac110f..c432c8180d 100644
--- a/src/components/entity/ha-entity-toggle.js
+++ b/src/components/entity/ha-entity-toggle.js
@@ -1,7 +1,8 @@
-import hass from '../../util/home-assistant-js-instance';
-
 import Polymer from '../../polymer';
 
+import hass from '../../util/home-assistant-js-instance';
+import OFF_STATES from '../../util/off-states';
+
 const { serviceActions } = hass;
 
 export default new Polymer({
@@ -58,9 +59,7 @@ export default new Polymer({
   },
 
   computeIsOn(stateObj) {
-    return stateObj && stateObj.state !== 'off' &&
-      stateObj.state !== 'unlocked' && stateObj.state !== 'closed' &&
-      stateObj.state !== 'unavailable';
+    return stateObj && OFF_STATES.indexOf(stateObj.state) === -1;
   },
 
   // We call updateToggle after a successful call to re-sync the toggle
@@ -82,8 +81,8 @@ export default new Polymer({
       service = turnOn ? 'turn_on' : 'turn_off';
     }
 
-    const call = serviceActions.callService(domain, service,
-                                            { entity_id: this.stateObj.entityId });
+    const call = serviceActions.callService(
+      domain, service, { entity_id: this.stateObj.entityId });
 
     if (!this.stateObj.attributes.assumed_state) {
       call.then(() => this.forceStateChange());
diff --git a/src/components/entity/state-badge.html b/src/components/entity/state-badge.html
index 6ddb6e97ef..accd2d8867 100644
--- a/src/components/entity/state-badge.html
+++ b/src/components/entity/state-badge.html
@@ -29,11 +29,8 @@
   }
 
   /* Color the icon if unavailable */
-  ha-state-icon[data-domain=light][data-state=unavailable],
-  ha-state-icon[data-domain=switch][data-state=unavailable],
-  ha-state-icon[data-domain=binary_sensor][data-state=unavailable],
-  ha-state-icon[data-domain=sensor][data-state=unavailable] {
-    color: #D3D3D3;
+  ha-state-icon[data-state=unavailable] {
+    color: var(--disabled-text-color);
   }
   </style>
 
diff --git a/src/util/off-states.js b/src/util/off-states.js
new file mode 100644
index 0000000000..932a090d82
--- /dev/null
+++ b/src/util/off-states.js
@@ -0,0 +1 @@
+export default ['off', 'closed', 'unlocked'];
diff --git a/src/util/state-card-type.js b/src/util/state-card-type.js
index 683447866d..8601266ae8 100644
--- a/src/util/state-card-type.js
+++ b/src/util/state-card-type.js
@@ -12,7 +12,9 @@ const DOMAINS_WITH_CARD = [
 ];
 
 export default function stateCardType(state) {
-  if (DOMAINS_WITH_CARD.indexOf(state.domain) !== -1) {
+  if (state.state === 'unavailable') {
+    return 'display';
+  } else if (DOMAINS_WITH_CARD.indexOf(state.domain) !== -1) {
     return state.domain;
   } else if (canToggle(state.entityId)) {
     return 'toggle';