diff --git a/docs/examples/layout/alignment.vue b/docs/examples/layout/alignment.vue
index 71640bceaf..1a6542062a 100644
--- a/docs/examples/layout/alignment.vue
+++ b/docs/examples/layout/alignment.vue
@@ -1,33 +1,33 @@
 <template>
   <el-row class="row-bg">
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple-light" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
   </el-row>
   <el-row class="row-bg" justify="center">
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple-light" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
   </el-row>
   <el-row class="row-bg" justify="end">
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple-light" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
   </el-row>
   <el-row class="row-bg" justify="space-between">
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple-light" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
   </el-row>
   <el-row class="row-bg" justify="space-around">
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple-light" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
   </el-row>
   <el-row class="row-bg" justify="space-evenly">
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple-light" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
   </el-row>
 </template>
 
diff --git a/docs/examples/layout/basic-layout.vue b/docs/examples/layout/basic-layout.vue
index ce1d4f3297..07a932a05a 100644
--- a/docs/examples/layout/basic-layout.vue
+++ b/docs/examples/layout/basic-layout.vue
@@ -1,29 +1,29 @@
 <template>
   <el-row>
-    <el-col :span="24"><div class="grid-content bg-purple-dark" /></el-col>
+    <el-col :span="24"><div class="grid-content ep-bg-purple-dark" /></el-col>
   </el-row>
   <el-row>
-    <el-col :span="12"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="12"><div class="grid-content bg-purple-light" /></el-col>
+    <el-col :span="12"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="12"><div class="grid-content ep-bg-purple-light" /></el-col>
   </el-row>
   <el-row>
-    <el-col :span="8"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="8"><div class="grid-content bg-purple-light" /></el-col>
-    <el-col :span="8"><div class="grid-content bg-purple" /></el-col>
+    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="8"><div class="grid-content ep-bg-purple-light" /></el-col>
+    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
   </el-row>
   <el-row>
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple-light" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple-light" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
   </el-row>
   <el-row>
-    <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="4"><div class="grid-content bg-purple-light" /></el-col>
-    <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="4"><div class="grid-content bg-purple-light" /></el-col>
-    <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="4"><div class="grid-content bg-purple-light" /></el-col>
+    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="4"><div class="grid-content ep-bg-purple-light" /></el-col>
+    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="4"><div class="grid-content ep-bg-purple-light" /></el-col>
+    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="4"><div class="grid-content ep-bg-purple-light" /></el-col>
   </el-row>
 </template>
 
diff --git a/docs/examples/layout/column-offset.vue b/docs/examples/layout/column-offset.vue
index c054c5f01e..913ac4c44f 100644
--- a/docs/examples/layout/column-offset.vue
+++ b/docs/examples/layout/column-offset.vue
@@ -1,21 +1,21 @@
 <template>
   <el-row :gutter="20">
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
     <el-col :span="6" :offset="6"
-      ><div class="grid-content bg-purple"
+      ><div class="grid-content ep-bg-purple"
     /></el-col>
   </el-row>
   <el-row :gutter="20">
     <el-col :span="6" :offset="6"
-      ><div class="grid-content bg-purple"
+      ><div class="grid-content ep-bg-purple"
     /></el-col>
     <el-col :span="6" :offset="6"
-      ><div class="grid-content bg-purple"
+      ><div class="grid-content ep-bg-purple"
     /></el-col>
   </el-row>
   <el-row :gutter="20">
     <el-col :span="12" :offset="6"
-      ><div class="grid-content bg-purple"
+      ><div class="grid-content ep-bg-purple"
     /></el-col>
   </el-row>
 </template>
diff --git a/docs/examples/layout/column-spacing.vue b/docs/examples/layout/column-spacing.vue
index e6c05f1992..3b841b0bf2 100644
--- a/docs/examples/layout/column-spacing.vue
+++ b/docs/examples/layout/column-spacing.vue
@@ -1,9 +1,9 @@
 <template>
   <el-row :gutter="20">
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="6"><div class="grid-content bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
   </el-row>
 </template>
 
diff --git a/docs/examples/layout/hybrid-layout.vue b/docs/examples/layout/hybrid-layout.vue
index 5125bbb3e8..5684819a0b 100644
--- a/docs/examples/layout/hybrid-layout.vue
+++ b/docs/examples/layout/hybrid-layout.vue
@@ -1,18 +1,18 @@
 <template>
   <el-row :gutter="20">
-    <el-col :span="16"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="8"><div class="grid-content bg-purple" /></el-col>
+    <el-col :span="16"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
   </el-row>
   <el-row :gutter="20">
-    <el-col :span="8"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="8"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
   </el-row>
   <el-row :gutter="20">
-    <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="16"><div class="grid-content bg-purple" /></el-col>
-    <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="16"><div class="grid-content ep-bg-purple" /></el-col>
+    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
   </el-row>
 </template>
 
diff --git a/docs/examples/layout/index.scss b/docs/examples/layout/index.scss
index c76661aaa7..e13b64aa73 100644
--- a/docs/examples/layout/index.scss
+++ b/docs/examples/layout/index.scss
@@ -1,33 +1,30 @@
-.row-bg {
-  padding: 10px 0;
-  background-color: #f9fafc;
-}
-
-.bg-purple-dark {
-  background: #99a9bf;
-}
-.bg-purple {
-  background: #d3dce6;
-}
-.bg-purple-light {
-  background: #e5e9f2;
+:root {
+  --ep-c-bg-row: #f9fafc;
+  --ep-c-bg-purple: #d3dce6;
+  --ep-c-bg-purple-dark: #99a9bf;
+  --ep-c-bg-purple-light: #e5e9f2;
 }
 
 .dark {
-  .row-bg {
-    padding: 10px 0;
-    background-color: #18191a;
-  }
-
-  .bg-purple-light {
-    background: #242526;
-  }
-
-  .bg-purple {
-    background: #46494d;
-  }
-
-  .bg-purple-dark {
-    background: #667180;
-  }
+  --ep-c-bg-row: #18191a;
+  --ep-c-bg-purple: #46494d;
+  --ep-c-bg-purple-dark: #242526;
+  --ep-c-bg-purple-light: #667180;
+}
+
+.row-bg {
+  padding: 10px 0;
+  background-color: var(--ep-c-bg-row);
+}
+
+.ep-bg-purple-dark {
+  background: var(--ep-c-bg-purple-dark);
+}
+
+.ep-bg-purple {
+  background: var(--ep-c-bg-purple);
+}
+
+.ep-bg-purple-light {
+  background: var(--ep-c-bg-purple-light);
 }
diff --git a/docs/examples/layout/responsive-layout.vue b/docs/examples/layout/responsive-layout.vue
index 9119f0bfd4..a92df0e64a 100644
--- a/docs/examples/layout/responsive-layout.vue
+++ b/docs/examples/layout/responsive-layout.vue
@@ -1,16 +1,16 @@
 <template>
   <el-row :gutter="10">
     <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
-      ><div class="grid-content bg-purple"
+      ><div class="grid-content ep-bg-purple"
     /></el-col>
     <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
-      ><div class="grid-content bg-purple-light"
+      ><div class="grid-content ep-bg-purple-light"
     /></el-col>
     <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
-      ><div class="grid-content bg-purple"
+      ><div class="grid-content ep-bg-purple"
     /></el-col>
     <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
-      ><div class="grid-content bg-purple-light"
+      ><div class="grid-content ep-bg-purple-light"
     /></el-col>
   </el-row>
 </template>
diff --git a/ssr-testing/cases/layout.vue b/ssr-testing/cases/layout.vue
index 74f309a33d..ad230c50c1 100644
--- a/ssr-testing/cases/layout.vue
+++ b/ssr-testing/cases/layout.vue
@@ -2,90 +2,90 @@
   <el-row style="margin-bottom: 20px">
     <el-col :span="24" style="border-radius: 4px"
       ><div
-        class="grid-content bg-purple-dark"
+        class="grid-content ep-bg-purple-dark"
         style="border-radius: 4px; min-height: 36px; background: #99a9bf"
     /></el-col>
   </el-row>
   <el-row style="margin-bottom: 20px">
     <el-col :span="12" style="border-radius: 4px"
       ><div
-        class="grid-content bg-purple"
+        class="grid-content ep-bg-purple"
         style="border-radius: 4px; min-height: 36px; background: #d3dce6"
     /></el-col>
     <el-col :span="12" style="border-radius: 4px"
       ><div
-        class="grid-content bg-purple"
+        class="grid-content ep-bg-purple"
         style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
     /></el-col>
   </el-row>
   <el-row style="margin-bottom: 20px">
     <el-col :span="8" style="border-radius: 4px"
       ><div
-        class="grid-content bg-purple"
+        class="grid-content ep-bg-purple"
         style="border-radius: 4px; min-height: 36px; background: #d3dce6"
     /></el-col>
     <el-col :span="8" style="border-radius: 4px"
       ><div
-        class="grid-content bg-purple"
+        class="grid-content ep-bg-purple"
         style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
     /></el-col>
     <el-col :span="8" style="border-radius: 4px"
       ><div
-        class="grid-content bg-purple"
+        class="grid-content ep-bg-purple"
         style="border-radius: 4px; min-height: 36px; background: #d3dce6"
     /></el-col>
   </el-row>
   <el-row style="margin-bottom: 20px">
     <el-col :span="6" style="border-radius: 4px"
       ><div
-        class="grid-content bg-purple"
+        class="grid-content ep-bg-purple"
         style="border-radius: 4px; min-height: 36px; background: #d3dce6"
     /></el-col>
     <el-col :span="6" style="border-radius: 4px"
       ><div
-        class="grid-content bg-purple"
+        class="grid-content ep-bg-purple"
         style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
     /></el-col>
     <el-col :span="6" style="border-radius: 4px"
       ><div
-        class="grid-content bg-purple"
+        class="grid-content ep-bg-purple"
         style="border-radius: 4px; min-height: 36px; background: #d3dce6"
     /></el-col>
     <el-col :span="6" style="border-radius: 4px"
       ><div
-        class="grid-content bg-purple"
+        class="grid-content ep-bg-purple"
         style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
     /></el-col>
   </el-row>
   <el-row style="margin-bottom: 20px">
     <el-col :span="4" style="border-radius: 4px"
       ><div
-        class="grid-content bg-purple"
+        class="grid-content ep-bg-purple"
         style="border-radius: 4px; min-height: 36px; background: #d3dce6"
     /></el-col>
     <el-col :span="4" style="border-radius: 4px"
       ><div
-        class="grid-content bg-purple"
+        class="grid-content ep-bg-purple"
         style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
     /></el-col>
     <el-col :span="4" style="border-radius: 4px"
       ><div
-        class="grid-content bg-purple"
+        class="grid-content ep-bg-purple"
         style="border-radius: 4px; min-height: 36px; background: #d3dce6"
     /></el-col>
     <el-col :span="4" style="border-radius: 4px"
       ><div
-        class="grid-content bg-purple"
+        class="grid-content ep-bg-purple"
         style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
     /></el-col>
     <el-col :span="4" style="border-radius: 4px"
       ><div
-        class="grid-content bg-purple"
+        class="grid-content ep-bg-purple"
         style="border-radius: 4px; min-height: 36px; background: #d3dce6"
     /></el-col>
     <el-col :span="4" style="border-radius: 4px"
       ><div
-        class="grid-content bg-purple"
+        class="grid-content ep-bg-purple"
         style="border-radius: 4px; min-height: 36px; background: #e5e9f2"
     /></el-col>
   </el-row>