added style

src/client/styles/scss/_layout_kibela.scss

@@ -1,3 +1,5 @@
+@import '../scss/theme/layout_kibela_variable';
+
 body.kibela {
   .icon-link,
   .CodeMirror-hint-active,
@@ -12,7 +14,7 @@ body.kibela {
   }
 
   .bg-primary {
-    background-color: #1256a3 !important;
+    background-color: $primary !important;
   }
 
   .logo {
@@ -29,20 +31,6 @@ body.kibela {
     }
   }
 
-  /* btn */
-  .btn {
-    border-radius: 0.35em;
-  }
-
-  .btn-primary {
-    background: #1256a3;
-    border: 1px solid #1256a3;
-
-    &:hover {
-      opacity: .8;
-    }
-  }
-
   /* header */
   .background-t {
     background-color: transparent;
@@ -198,6 +186,54 @@ body.kibela {
     }
   }
 
+  /* Modal */
+  .modal-content {
+    background-color: $themelight;
+
+    .modal-header.bg-primary {
+      color: white;
+
+      .close {
+        color: white;
+      }
+    }
+  }
+
+  /* Inline Code */
+  :not(.hljs) > code:not(.hljs) {
+    background-color: $bgcolor-inline-code;
+    color: $color-inline-code;
+  }
+
+  /* Card */
+  .card {
+    border: 1px solid $border;
+
+    .card-header {
+      background-color: $lightthemecolor;
+      border-bottom: 1px solid $border;
+    }
+
+    .card-body {
+      background-color: $themelight;
+    }
+
+    .card-footer {
+      background: white;
+      border-top: 1px solid $border
+    }
+  }
+
+  /* button */
+  .btn {
+    border-radius: $radius;
+  }
+
+  .btn-primary {
+    background: $primary;
+    border: 1px solid $primary;
+  }
+
   /* edit */
   .CodeMirror {
     border: solid 1.2px #d8d8d8;
@@ -251,57 +287,6 @@ body.kibela {
       margin: 0;
     }
   }
-
-  /* modal */
-  .modal {
-      .modal-header.bg-primary,
-      .modal-header.bg-primary .close
-      {
-        color: #fff;
-      }
-
-      .modal-content {
-        background-color: #f4f5f6;
-        border-radius: 0.35em;
-      }
-  }
-
-  .modal.create-template {
-    .card-select-template {
-      .card-body {
-        min-height: 120px;
-      }
-    }
-  }
-
-  /* code */
-  :not(.hljs) > code:not(.hljs) {
-    background-color: #fff;
-    color: #5a95d8;
-    padding: 2px 4px;
-  }
-
-  /* card */
-  .card {
-    border-radius: 0.35em;
-    
-    .card-body {
-      background-color: #f4f5f6;
-    }
-
-    .card-header {
-      background-color: rgba(181,203,247,.61);
-      border-bottom: 1px solid rgba(181,203,247,.61);
-      color: #3e4d6c;
-    }
-
-    .card-footer {
-      background: #fff;
-      background-color: rgba(181,203,247,.1);
-      border-top: 1px solid rgba(181,203,247,.61);
-      color: #3e4d6c;
-    }
-  }
 }
 
 .on-edit {

src/client/styles/scss/theme/kibela.scss

@@ -1,5 +1,6 @@
 // import colors
 @import '../../agile-admin/inverse/colors/kibela';
+@import 'layout_kibela_valiable';
 
 // apply agile-admin theme
 @import '../../agile-admin/inverse/style';