diff --git a/data/elementary/themes/edc/efl/panel.edc b/data/elementary/themes/edc/efl/panel.edc
index 4dfc85a5a8..3bce143a5e 100644
--- a/data/elementary/themes/edc/efl/panel.edc
+++ b/data/elementary/themes/edc/efl/panel.edc
@@ -42,13 +42,13 @@ group { name: "efl/scroller/panel/left";
          repeat_events: 1;
          description { state: "default" 0.0;
             rel.to: "efl.panel_area";
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
       }
       part { name: "bg"; type: RECT;
          description { state: "default" 0.0;
             rel.to: "efl.panel_area";
-            color: 64 64 64 255;
+            color_class: "/bg/normal/panel";
             visible: 0;
          }
          description { state: "visible" 0.0;
@@ -124,14 +124,14 @@ group { name: "efl/scroller/panel/right";
          description { state: "default" 0.0;
             rel1.to: "efl.panel_area";
             rel2.to: "efl.panel_area";
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
       }
       part { name: "bg"; type: RECT;
          description { state: "default" 0.0;
             rel1.to: "efl.panel_area";
             rel2.to: "efl.panel_area";
-            color: 64 64 64 255;
+            color_class: "/bg/normal/panel";
             visible: 0;
          }
          description { state: "visible" 0.0;
@@ -208,14 +208,14 @@ group { name: "efl/scroller/panel/top";
          description { state: "default" 0.0;
             rel1.to: "efl.panel_area";
             rel2.to: "efl.panel_area";
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
       }
       part { name: "bg"; type: RECT;
          description { state: "default" 0.0;
             rel1.to: "efl.panel_area";
             rel2.to: "efl.panel_area";
-            color: 64 64 64 255;
+            color_class: "/bg/normal/panel";
             visible: 0;
          }
          description { state: "visible" 0.0;
@@ -285,13 +285,13 @@ group { name: "efl/scroller/panel/bottom";
       part { name: "access.outline"; type: RECT; repeat_events: 1;
          description { state: "default" 0.0;
             rel.to: "efl.panel_area";
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
       }
       part { name: "bg"; type: RECT;
          description { state: "default" 0.0;
             rel.to: "efl.panel_area";
-            color: 64 64 64 255;
+            color_class: "/bg/normal/panel";
             visible: 0;
          }
          description { state: "visible" 0.0;
@@ -346,7 +346,7 @@ group { name: "efl/panel/left";
          scale: 1;
          description { state: "default" 0.0;
             rel.to: "base";
-            color: 51 153 255 255;
+            color_class: "/bg/selected/panel";
             visible: 0;
             offscale;
          }
@@ -366,7 +366,7 @@ group { name: "efl/panel/left";
             rel1.to_x: "all";
             rel2.to_x: "efl.swallow.event";
             rel2.relative: 0.0 1.0;
-            color: 64 64 64 255;
+            color_class: "/bg/normal/panel";
          }
       }
       part { name: "efl.content"; type: SWALLOW;
@@ -386,7 +386,7 @@ group { name: "efl/panel/left";
             align: 1.0 0.5;
             rel1.relative: 1.0 0.0;
             rel2.relative: 1.0 1.0;
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
          description { state: "hidden" 0.0;
             inherit: "default" 0.0;
@@ -398,7 +398,7 @@ group { name: "efl/panel/left";
       part { name: "btn"; type: RECT;
          description { state: "default" 0.0;
             rel.to: "efl.swallow.event";
-            color: 0 0 0 0;
+            color: 0 0 0 0; // no cc
          }
          description { state: "hidden" 0.0;
             rel.to: "efl.swallow.event";