diff --git a/ex/docs/alert.json b/ex/docs/alert.json
index 8f35367..b5ac026 100644
--- a/ex/docs/alert.json
+++ b/ex/docs/alert.json
@@ -42,6 +42,13 @@
       "type": "EventEmitter",
       "enum": null,
       "default": null
+    },
+    {
+      "name": "effect",
+      "notes": "Choose theme",
+      "type": "string",
+      "enum": "light / dark",
+      "default": "light"
     }
   ]
 }
diff --git a/src/alert/alert.ts b/src/alert/alert.ts
index b134f80..0d63fbb 100644
--- a/src/alert/alert.ts
+++ b/src/alert/alert.ts
@@ -16,7 +16,7 @@ export const ICON_CLASS_MAP: { [key: string]: string } = {
   animations: [fadeAnimation],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div [class]="'el-alert el-alert--' + type" [@fadeAnimation]="!visible"
+    <div [class]="'el-alert el-alert--' + type + ' is-' + effect" [@fadeAnimation]="!visible"
       [class.is-center]="center" role="alert">
       <i [class]="'el-alert__icon ' + makeIconClass()" *ngIf="showIcon"></i>
       <div class="el-alert__content">
@@ -41,6 +41,7 @@ export class ElAlert {
   @ContentChild('description') descriptionTmp: TemplateRef<any>
   
   @Input() type: string = 'info'
+  @Input() effect: string = 'light'
   @Input() center: boolean = false
   @Input() description: string
   @Input() closable: boolean = true