From cc64afeefd051dd3e10a41177ce0f5681438ca36 Mon Sep 17 00:00:00 2001
From: "songwanli2025@163.com" <songwanli2025@163.com>
Date: Fri, 18 Oct 2019 17:14:47 +0800
Subject: [PATCH] feat(Notificatoion): add theme to Notification

---
 .../components/notificationDemo.vue           |  18 +-
 packages/common/Confirm/index.js              |   4 +-
 packages/common/LoadingBar/index.js           |   4 +-
 packages/common/Message/index.js              |   4 +-
 packages/common/Message/src/main.js           |  37 +--
 packages/common/Notification/index.js         |   2 +-
 .../Notification/src/NotificationCell.vue     |  37 +--
 packages/common/Notification/src/main.js      |  45 ++-
 packages/utils/installThemeableComponent.js   |  26 +-
 styles/Notification.scss                      | 272 ++++++++++--------
 .../themes/dark/components/Notification.scss  |  10 +
 styles/themes/dark/index.scss                 |  56 ++--
 .../themes/light/components/Notification.scss |  12 +
 styles/themes/light/index.scss                |  60 ++--
 14 files changed, 328 insertions(+), 259 deletions(-)
 create mode 100644 styles/themes/dark/components/Notification.scss
 create mode 100644 styles/themes/light/components/Notification.scss

diff --git a/demo/documentation/components/notificationDemo.vue b/demo/documentation/components/notificationDemo.vue
index 4bf72f3c0..9b24dbc76 100644
--- a/demo/documentation/components/notificationDemo.vue
+++ b/demo/documentation/components/notificationDemo.vue
@@ -1,25 +1,17 @@
 <template>
   <div
-    ref="doc"
     class="n-doc"
+    ref="doc"
   >
     <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        Notification / $nNotify
-      </n-gradient-text>
+      <n-gradient-text :font-size="20">Notification / $nNotify</n-gradient-text>
     </div>
     <div class="n-doc-body">
       <div class="n-doc-section">
-        <div class="n-doc-section__header">
-          Basic Usage
-        </div>
+        <div class="n-doc-section__header">Basic Usage</div>
         <div class="n-doc-section__view">
-          <n-button @click="notify1">
-            Wouldn't it be Nice
-          </n-button>
-          <n-button @click="notify2">
-            Satisfaction
-          </n-button>
+          <n-button @click="notify1">Wouldn't it be Nice</n-button>
+          <n-button @click="notify2">Satisfaction</n-button>
         </div>
         <div class="n-doc-section__source">
           <textarea>
diff --git a/packages/common/Confirm/index.js b/packages/common/Confirm/index.js
index 5f08094bf..a7f839e5b 100644
--- a/packages/common/Confirm/index.js
+++ b/packages/common/Confirm/index.js
@@ -1,7 +1,7 @@
 import Confirm from './src/index.js'
-import install from '../../utils/installThemeableComponent'
+import { install } from '../../utils/installThemeableComponent'
 
-Confirm.install = function (Vue) {
+Confirm.install = function(Vue) {
   Confirm.Vue = Vue
   install(Vue, Confirm, '$NModal')
 }
diff --git a/packages/common/LoadingBar/index.js b/packages/common/LoadingBar/index.js
index b72cb6f07..28093243e 100644
--- a/packages/common/LoadingBar/index.js
+++ b/packages/common/LoadingBar/index.js
@@ -1,8 +1,8 @@
 /* istanbul ignore file */
 import LoadingBar from './src/main.js'
-import install from '../../utils/installThemeableComponent'
+import { install } from '../../utils/installThemeableComponent'
 
-LoadingBar.install = function (Vue) {
+LoadingBar.install = function(Vue) {
   install(Vue, LoadingBar, '$NLoadingBar')
   LoadingBar.Vue = Vue
 }
diff --git a/packages/common/Message/index.js b/packages/common/Message/index.js
index 0afcfe402..0f70f2898 100644
--- a/packages/common/Message/index.js
+++ b/packages/common/Message/index.js
@@ -1,7 +1,7 @@
 import Message from './src/main.js'
-import install from '../../utils/installThemeableComponent'
+import { install } from '../../utils/installThemeableComponent'
 
-Message.install = function (Vue) {
+Message.install = function(Vue) {
   Message.Vue = Vue
   install(Vue, Message, '$NMessage')
 }
diff --git a/packages/common/Message/src/main.js b/packages/common/Message/src/main.js
index a45930756..330aa8392 100644
--- a/packages/common/Message/src/main.js
+++ b/packages/common/Message/src/main.js
@@ -1,13 +1,14 @@
-
 import Message from './Message'
 
-function setTheme (messageContainer) {
-  const themeClasses = Array.from(messageContainer.classList).filter(c => c.endsWith('-theme'))
+function setTheme(messageContainer) {
+  const themeClasses = Array.from(messageContainer.classList).filter(c =>
+    c.endsWith('-theme')
+  )
   themeClasses.forEach(c => messageContainer.classList.remove(c))
   if (this.theme) messageContainer.classList.add(`n-${this.theme}-theme`)
 }
 
-function attachMessageContainer () {
+function attachMessageContainer() {
   let messageContainer = document.querySelector('.n-message-container')
   if (!messageContainer) {
     messageContainer = document.createElement('div')
@@ -19,14 +20,14 @@ function attachMessageContainer () {
   return messageContainer
 }
 
-function registerMessageEl (container, el, option) {
+function registerMessageEl(container, el, option) {
   el.classList.add('n-message--enter')
   container.appendChild(el)
   el.getBoundingClientRect()
   el.classList.remove('n-message--enter')
-  setTimeout(function () {
-    setTimeout(function () {
-      setTimeout(function () {
+  setTimeout(function() {
+    setTimeout(function() {
+      setTimeout(function() {
         container.removeChild(el)
       }, option.vanishTransitionTimeout)
       el.classList.add('n-message--leave')
@@ -43,7 +44,7 @@ function registerMessageEl (container, el, option) {
  * @param {string} option.icon
  * @param {string} option.iconColor
  */
-function mixinOption (option) {
+function mixinOption(option) {
   const defaultOptions = {
     duration: 3000,
     emergeTransitionTimeout: 300,
@@ -67,30 +68,34 @@ const NMessage = {
     top: 20
   },
   attachMessageContainer,
-  notice (content, option) {
+  notice(content, option) {
+    console.log('test', this)
     const messageContainer = this.attachMessageContainer()
-    const messageCell = (new this.Vue({ ...Message, propsData: { option, content } })).$mount()
+    const messageCell = new this.Vue({
+      ...Message,
+      propsData: { option, content }
+    }).$mount()
     registerMessageEl(messageContainer, messageCell.$el, mixinOption(option))
   },
-  info (content, option) {
+  info(content, option) {
     option = mixinOption(option)
     option.type = 'info'
     this.notice(content, option)
   },
-  success (content, option) {
+  success(content, option) {
     option = mixinOption(option)
     option.type = 'success'
     this.notice(content, option)
   },
-  warning (content, option) {
+  warning(content, option) {
     option = mixinOption(option)
     option.type = 'warning'
     this.notice(content, option)
   },
-  error (content, option) {
+  error(content, option) {
     option = mixinOption(option)
     option.type = 'error'
-    this.notice(content, (option))
+    this.notice(content, option)
   }
 }
 
diff --git a/packages/common/Notification/index.js b/packages/common/Notification/index.js
index 7e6274d9d..a47325702 100644
--- a/packages/common/Notification/index.js
+++ b/packages/common/Notification/index.js
@@ -1,6 +1,6 @@
 import Notification from './src/main.js'
 
-Notification.install = function (Vue) {
+Notification.install = function(Vue) {
   Vue.prototype.$NNotification = Notification
   Vue.prototype.$nNotify = Notification.notify
 }
diff --git a/packages/common/Notification/src/NotificationCell.vue b/packages/common/Notification/src/NotificationCell.vue
index 2a9180dc8..0fbd32d34 100644
--- a/packages/common/Notification/src/NotificationCell.vue
+++ b/packages/common/Notification/src/NotificationCell.vue
@@ -1,47 +1,35 @@
 <template>
   <div
-    class="n-notification__cell"
     :class="{
       [`n-notification__cell--${type}`]: true
     }"
+    class="n-notification__cell 222"
   >
     <div class="n-notification-cell__wrapper">
       <div
-        v-if="!notification.avator"
         class="n-notification-cell__avator"
-      >
-        !
-      </div>
+        v-if="!notification.avator"
+      >!</div>
       <div
-        class="n-notification-cell__deactivator"
         @click="close"
+        class="n-notification-cell__deactivator"
       />
       <div
-        ref="body"
         class="n-notification-cell__body"
+        ref="body"
       >
-        <div class="n-notification-cell__header">
-          {{ notification.title }}
-        </div>
+        <div class="n-notification-cell__header">{{ notification.title }}</div>
         <div
-          v-if="notification.titleMeta"
           class="n-notification-cell__title-meta"
-        >
-          {{ notification.titleMeta }}
-        </div>
-        <div class="n-notification-cell__content">
-          {{ notification.content }}
-        </div>
+          v-if="notification.titleMeta"
+        >{{ notification.titleMeta }}</div>
+        <div class="n-notification-cell__content">{{ notification.content }}</div>
         <div class="n-notification-cell__footer">
-          <div class="n-notification-cell__meta">
-            {{ notification.meta }}
-          </div>
+          <div class="n-notification-cell__meta">{{ notification.meta }}</div>
           <div
-            class="n-notification-cell__action"
             @click="handleActionClick"
-          >
-            {{ notification.action }}
-          </div>
+            class="n-notification-cell__action"
+          >{{ notification.action }}</div>
         </div>
       </div>
     </div>
@@ -49,7 +37,6 @@
 </template>
 
 <script>
-
 export default {
   props: {
     type: {
diff --git a/packages/common/Notification/src/main.js b/packages/common/Notification/src/main.js
index f9100b965..b8e0a7ec6 100644
--- a/packages/common/Notification/src/main.js
+++ b/packages/common/Notification/src/main.js
@@ -1,12 +1,26 @@
-
 import Vue from 'vue'
 import NNotificationCell from './NotificationCell'
+import { getTheme } from '../../../utils/installThemeableComponent'
 
-function attachNotificationContainer () {
-  let notificationContainer = document.querySelector('.n-notification.n-notification__container')
+function setTheme(notificationContainer) {
+  let theme = getTheme(this)
+  const themeClasses = Array.from(notificationContainer.classList).filter(c =>
+    c.endsWith('-theme')
+  )
+  themeClasses.forEach(c => notificationContainer.classList.remove(c))
+  if (theme) notificationContainer.classList.add(`n-${theme}-theme`)
+}
+
+function attachNotificationContainer() {
+  let notificationContainer = document.querySelector(
+    '.n-notification.n-notification__container'
+  )
   if (!notificationContainer) {
     notificationContainer = document.createElement('div')
-    notificationContainer.classList.add('n-notification', 'n-notification__container')
+    notificationContainer.classList.add(
+      'n-notification',
+      'n-notification__container'
+    )
     notificationContainer.style = `
           z-index: 4000;
           position: fixed;
@@ -35,17 +49,18 @@ const defaultNotification = {
   actionCallback: () => {}
 }
 
-function mountNotificationEl (container, vm, option) {
+function mountNotificationEl(container, vm, option) {
   const el = vm.$el
   el.classList.add('is-going-to-emerge')
   container.appendChild(el)
   el.getBoundingClientRect()
   el.classList.remove('is-going-to-emerge')
-  el.style['max-height'] = `${30 + vm.$refs.body.getBoundingClientRect().height}px`
+  el.style['max-height'] = `${30 +
+    vm.$refs.body.getBoundingClientRect().height}px`
 }
 
-function removeNotificationEl (container, el, option, notificationVueInstance) {
-  setTimeout(function () {
+function removeNotificationEl(container, el, option, notificationVueInstance) {
+  setTimeout(function() {
     if (container.contains(el)) {
       container.removeChild(el)
       const notification = notificationVueInstance.notification
@@ -59,25 +74,27 @@ function removeNotificationEl (container, el, option, notificationVueInstance) {
 }
 
 const NMessage = {
-  notify (notification, type = 'success', option = defaultOptions) {
+  notify(notification, type = 'success', option = defaultOptions) {
     notification = { ...defaultNotification, ...notification }
     const notificationContainer = attachNotificationContainer()
-    const notificationCell = (new Vue({ ...NNotificationCell,
+    setTheme.call(this, notificationContainer)
+    const notificationCell = new Vue({
+      ...NNotificationCell,
       propsData: { type, notification: notification },
-      mounted () {
+      mounted() {
         if (notification.duration) {
           setTimeout(this.close, notification.duration)
         }
       },
       methods: {
-        close () {
+        close() {
           removeNotificationEl(notificationContainer, this.$el, option, this)
         },
-        handleActionClick () {
+        handleActionClick() {
           notification.actionCallback(this)
         }
       }
-    })).$mount()
+    }).$mount()
     mountNotificationEl(notificationContainer, notificationCell, option)
   }
 }
diff --git a/packages/utils/installThemeableComponent.js b/packages/utils/installThemeableComponent.js
index bb1a6decf..7b4668f67 100644
--- a/packages/utils/installThemeableComponent.js
+++ b/packages/utils/installThemeableComponent.js
@@ -1,4 +1,4 @@
-function getTheme (component) {
+function getTheme(component) {
   let cursor = component
   while (cursor.$parent) {
     const name = cursor.$options.name
@@ -13,20 +13,24 @@ function getTheme (component) {
   return null
 }
 
-function install (Vue, Component, name) {
-  const prototypeProxy = new Proxy(function () {
-    return Component
-  }, {
-    apply (target, thisArg, argumentsList) {
-      if (thisArg instanceof Vue) {
-        Component.theme = getTheme(thisArg)
+function install(Vue, Component, name) {
+  const prototypeProxy = new Proxy(
+    function() {
+      return Component
+    },
+    {
+      apply(target, thisArg, argumentsList) {
+        if (thisArg instanceof Vue) {
+          Component.theme = getTheme(thisArg)
+          console.log('theme', getTheme(thisArg))
+        }
+        return target.bind(thisArg)(...argumentsList)
       }
-      return target.bind(thisArg)(...argumentsList)
     }
-  })
+  )
   Object.defineProperty(Vue.prototype, name, {
     get: prototypeProxy
   })
 }
 
-export default install
+export { getTheme, install }
diff --git a/styles/Notification.scss b/styles/Notification.scss
index 502978e1d..719fba729 100644
--- a/styles/Notification.scss
+++ b/styles/Notification.scss
@@ -1,130 +1,168 @@
 @import './mixins/mixins.scss';
+
 @import './themes/vars.scss';
 
-@include b(notification) {
-  &.n-notification__container {
-    .n-notification__cell {
-      position: relative;
-      transform: translateX(0);
-      display: flex;
-      overflow: hidden;
-      transition: opacity .3s $default-cubic-bezier, transform .3s $default-cubic-bezier,  max-height .3s $default-cubic-bezier, margin-bottom .3s linear, padding-top .3s $default-cubic-bezier, padding-bottom .3s $default-cubic-bezier;
-      opacity: 1;
-      margin-bottom: 9px;
-      width:365px;
-      padding: 15px;
-      box-sizing: border-box;
-      max-height: 400px;
-      background:linear-gradient(225deg,rgba(91,197,161,1) 0%,rgba(116,127,157,1) 100%);
-      box-shadow:0px 2px 25px 0px rgba(0,0,0,0.5);
-      border-radius:6px;
-      flex-shrink: 0;
-      font-weight: 700;
-      color: #ffffff;
-      &.is-going-to-emerge {
-        opacity: 0;
-        transform: translateX(calc(100% + 15px));
-        max-height: 0px;
-        margin-bottom: 0;
-        padding-top: 0;
-        padding-bottom: 0;
-        .n-notification-cell__avator {
-          top: 0;
-        }
-        .n-notification-cell__close-mark {
-          top: 0;
-        }
-      }
-      &.is-vanishing {
-        opacity: 0;
-        transform: translateX(calc(100% + 15px));
-        padding-top: 0;
-        padding-bottom: 0;
-        max-height: 0;
-        margin-bottom: 0;
-      }
-      .n-notification-cell__wrapper {
-        position: relative;
-        width: 100%;
-        .n-notification-cell__deactivator {
-          position: absolute;
-          height: 15px;
-          width: 15px;
-          right: 0px;
-          top: 0px;
-          transition: top .3s $default-cubic-bezier;
-          cursor: pointer;
-          &::before {
-            box-sizing: content-box;
-            position: absolute;
-            transform: rotate(45deg);
-            height: 6px;
-            width: 6px;
-            top: -2px;
-            content: "";
-            border-right: 2px solid #a1d9c6;
-            border-bottom: 2px solid #a1d9c6
-          }
-          &::after {
-            box-sizing: content-box;
-            position: absolute;
-            height: 6px;
-            width: 6px;
-            content: "";
-            transform: rotate(45deg);
-            top: 7px;
-            border-left: 2px solid #a1d9c6;
-            border-top: 2px solid #a1d9c6;
-          }
-        }
-        .n-notification-cell__avator {
-          position: absolute;
-          height: 28px;
-          width: 28px;
-          border-radius: 14px;
-          background-color: #59C3B2FF;
-          left: 0px;
-          top: 0px;
-          text-align: center;
-          font-size: 18px;
-          line-height: 28px;
-          transition: top .3s $default-cubic-bezier,
-        }
-        .n-notification-cell__body {
+@include themes-mixin {
+  @include b(notification) {
+    &.n-notification__container {
+      .n-notification__cell {
+        background: linear-gradient(
+          225deg,
+          $--notification-background-start-color 0%,
+          $--notification-background-end-color 100%
+        );
+        color: $--notification-text-color;
+
+        @include once {
+          position: relative;
           display: flex;
-          flex-direction: column;
-          margin-left: 41px;
-          font-size: 14px;
-          width: calc(100% - 41px);
-          color: #ffffff;
-          .n-notification-cell__header {
-            font-weight: 700;
-            font-size: 16px;
-            margin-bottom: 8px;
+          overflow: hidden;
+          flex-shrink: 0;
+          box-sizing: border-box;
+          margin-bottom: 9px;
+          padding: 15px;
+          max-height: 400px;
+          width: 365px;
+          border-radius: 6px;
+          box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.5);
+          font-weight: 700;
+          opacity: 1;
+          transition: opacity 0.3s $default-cubic-bezier,
+            transform 0.3s $default-cubic-bezier,
+            max-height 0.3s $default-cubic-bezier, margin-bottom 0.3s linear,
+            padding-top 0.3s $default-cubic-bezier,
+            padding-bottom 0.3s $default-cubic-bezier;
+          transform: translateX(0);
+        }
+        @include once {
+          &.is-going-to-emerge {
+            margin-bottom: 0;
+            padding-top: 0;
+            padding-bottom: 0;
+            max-height: 0;
+            opacity: 0;
+            transform: translateX(calc(100% + 15px));
+
+            .n-notification-cell__avator {
+              top: 0;
+            }
+
+            .n-notification-cell__close-mark {
+              top: 0;
+            }
           }
-          .n-notification-cell__title-meta {
-            margin-bottom: 8px;
+
+          &.is-vanishing {
+            margin-bottom: 0;
+            padding-top: 0;
+            padding-bottom: 0;
+            max-height: 0;
+            opacity: 0;
+            transform: translateX(calc(100% + 15px));
           }
-          .n-notification-cell__title-meta, .n-notification-cell__meta {
-            font-size: 12px;
-            color: rgba(255,255,255,.4);
+        }
+
+        .n-notification-cell__wrapper {
+          position: relative;
+          width: 100%;
+
+          .n-notification-cell__deactivator {
+            @include once {
+              position: absolute;
+              top: 0;
+              right: 0;
+              width: 15px;
+              height: 15px;
+              cursor: pointer;
+              transition: top 0.3s $default-cubic-bezier;
+            }
+
+            &::before {
+              position: absolute;
+              top: -2px;
+              box-sizing: content-box;
+              width: 6px;
+              height: 6px;
+              border-right: 2px solid $--notification-cell_deactive-color;
+              border-bottom: 2px solid $--notification-cell_deactive-color;
+              content: '';
+              transform: rotate(45deg);
+            }
+
+            &::after {
+              position: absolute;
+              top: 7px;
+              box-sizing: content-box;
+              width: 6px;
+              height: 6px;
+              border-top: 2px solid $--notification-cell_deactive-color;
+              border-left: 2px solid $--notification-cell_deactive-color;
+              content: '';
+              transform: rotate(45deg);
+            }
           }
-          .n-notification-cell__content {
-            white-space: wrap;
-            color: #ffffff;
+
+          .n-notification-cell__avator {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 28px;
+            height: 28px;
+            border-radius: 14px;
+            background-color: #59c3b2ff;
+            text-align: center;
+            font-size: 18px;
+            line-height: 28px;
+            transition: top 0.3s $default-cubic-bezier;
           }
-          .n-notification-cell__action {
-            cursor: pointer;
-            color: #00FFA9FF;
-          }
-          .n-notification-cell__footer {
-            margin-top: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
+
+          .n-notification-cell__body {
+            @include once {
+              display: flex;
+              flex-direction: column;
+              margin-left: 41px;
+              width: calc(100% - 41px);
+              font-size: 14px;
+            }
+            @include once {
+              .n-notification-cell__title-meta {
+                margin-bottom: 8px;
+              }
+            }
+            @include once {
+              .n-notification-cell__footer {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-top: 8px;
+              }
+            }
+
+            .n-notification-cell__header {
+              margin-bottom: 8px;
+              color: $--notification-cell__header-color;
+              font-weight: 700;
+              font-size: 16px;
+            }
+
+            .n-notification-cell__title-meta,
+            .n-notification-cell__meta {
+              color: $--notification-cell__title-meta-color;
+              font-size: 12px;
+            }
+
+            .n-notification-cell__content {
+              color: $--notification-cell__content-color;
+              white-space: wrap;
+            }
+
+            .n-notification-cell__action {
+              color: $--notification-cell__action-color;
+              cursor: pointer;
+            }
           }
         }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/styles/themes/dark/components/Notification.scss b/styles/themes/dark/components/Notification.scss
new file mode 100644
index 000000000..1d46ce711
--- /dev/null
+++ b/styles/themes/dark/components/Notification.scss
@@ -0,0 +1,10 @@
+@mixin setup-dark-notification {
+  $--notification-background-start-color:  rgb(91, 197, 161) !global;
+  $--notification-background-end-color:  rgba(116,127,157,1) !global;
+  $--notification-text-color:  #ffffff !global;
+  $--notification-cell_deactive-color: #a1d9c6 !global;
+  $--notification-cell__header-color: #ffffff !global; 
+  $--notification-cell__content-color: #ffffff !global; 
+  $--notification-cell__title-meta-color: rgba(255,255,255,.4) !global;
+  $--notification-cell__action-color: #00FFA9FF !global; 
+}
\ No newline at end of file
diff --git a/styles/themes/dark/index.scss b/styles/themes/dark/index.scss
index c1c41f384..dbe222c1e 100644
--- a/styles/themes/dark/index.scss
+++ b/styles/themes/dark/index.scss
@@ -1,30 +1,31 @@
-@import "darkColors.scss";
-@import "components/Button.scss";
-@import "components/Divider.scss";
-@import "components/NimbusServiceLayout.scss";
-@import "components/Scrollbar.scss";
-@import "components/BaseLoading.scss";
-@import "components/BaseSelectMenu.scss";
-@import "components/BasePicker.scss";
-@import "components/BaseCancelMark.scss";
-@import "components/Tag.scss";
-@import "components/Table.scss";
+@import 'darkColors.scss';
+@import 'components/Button.scss';
+@import 'components/Divider.scss';
+@import 'components/NimbusServiceLayout.scss';
+@import 'components/Scrollbar.scss';
+@import 'components/BaseLoading.scss';
+@import 'components/BaseSelectMenu.scss';
+@import 'components/BasePicker.scss';
+@import 'components/BaseCancelMark.scss';
+@import 'components/Tag.scss';
+@import 'components/Table.scss';
 @import 'components/AdvanceTable.scss';
-@import "components/Popover.scss";
-@import "components/Tooltip.scss";
-@import "components/Confirm.scss";
-@import "components/CheckBox.scss";
-@import "components/Switch.scss";
-@import "components/Message.scss";
-@import "components/LoadingBar.scss";
-@import "components/Badge.scss";
-@import "components/Dropdown.scss";
-@import "components/Input.scss";
-@import "components/Alert.scss";
-@import "components/Anchor.scss";
-@import "components/BackTop.scss";
+@import 'components/Popover.scss';
+@import 'components/Tooltip.scss';
+@import 'components/Confirm.scss';
+@import 'components/CheckBox.scss';
+@import 'components/Switch.scss';
+@import 'components/Message.scss';
+@import 'components/LoadingBar.scss';
+@import 'components/Badge.scss';
+@import 'components/Dropdown.scss';
+@import 'components/Input.scss';
+@import 'components/Alert.scss';
+@import 'components/Anchor.scss';
+@import 'components/BackTop.scss';
+@import 'components/Notification.scss';
 
-@mixin setup-dark-theme () {
+@mixin setup-dark-theme() {
   @include setup-dark-colors();
   $--n-primary-color: $--primary-6 !global;
   $--n-primary-hover-color: $--primary-5 !global;
@@ -46,7 +47,7 @@
   $--n-table-body-color: $--neutral-9 !global;
   $--n-alpha-table-body-color: $--overlay-9 !global;
   $--n-card-color: $--neutral-9 !global;
-  $--n-disabled-text-color: rgba(255, 255, 255, .3) !global;
+  $--n-disabled-text-color: rgba(255, 255, 255, 0.3) !global;
   $--n-dialog-color: $--neutral-3 !global;
   $--n-background-color: $--neutral-10 !global;
   @include setup-dark-nimbus-service-layout;
@@ -73,4 +74,5 @@
   @include setup-dark-anchor;
   @include setup-dark-alert;
   @include setup-dark-back-top;
-}
\ No newline at end of file
+  @include setup-dark-notification;
+}
diff --git a/styles/themes/light/components/Notification.scss b/styles/themes/light/components/Notification.scss
new file mode 100644
index 000000000..90895abae
--- /dev/null
+++ b/styles/themes/light/components/Notification.scss
@@ -0,0 +1,12 @@
+@mixin setup-light-notification {
+  $--notification-background-start-color: rgb(255, 255, 255) !global;
+  $--notification-background-end-color: rgb(255, 255, 255) !global;
+  $--notification-text-color: #262626 !global;
+  $--notification-cell_deactive-color: #b4b4b4 !global;
+  $--notification-cell__header-color: #262626 !global;
+  $--notification-cell__content-color: #595959 !global;
+  $--notification-cell__title-meta-color: #8c8c8c !global;
+  $--notification-cell__action-color: $--primary-6 !global;
+  $--notification-cell__avator-background-color: #59c3b2ff !global;
+  // $--notification-cell__avator-text-color
+}
diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss
index e16e75a4f..0eba01936 100644
--- a/styles/themes/light/index.scss
+++ b/styles/themes/light/index.scss
@@ -1,30 +1,31 @@
 @import 'lightColors.scss';
-@import "components/Button.scss";
-@import "components/Divider.scss";
-@import "components/NimbusServiceLayout.scss";
-@import "components/Scrollbar.scss";
-@import "components/BaseLoading.scss";
-@import "components/BaseSelectMenu.scss";
-@import "components/BasePicker.scss";
-@import "components/BaseCancelMark.scss";
-@import "components/Tag.scss";
-@import "components/Table.scss";
-@import "components/AdvanceTable.scss";
-@import "components/Popover.scss";
-@import "components/Tooltip.scss";
-@import "components/Confirm.scss";
-@import "components/CheckBox.scss";
-@import "components/Switch.scss";
-@import "components/Message.scss";
-@import "components/LoadingBar.scss";
-@import "components/Badge.scss";
-@import "components/Dropdown.scss";
-@import "components/Input.scss";
-@import "components/Alert.scss";
-@import "components/Anchor.scss";
-@import "components/BackTop.scss";
+@import 'components/Button.scss';
+@import 'components/Divider.scss';
+@import 'components/NimbusServiceLayout.scss';
+@import 'components/Scrollbar.scss';
+@import 'components/BaseLoading.scss';
+@import 'components/BaseSelectMenu.scss';
+@import 'components/BasePicker.scss';
+@import 'components/BaseCancelMark.scss';
+@import 'components/Tag.scss';
+@import 'components/Table.scss';
+@import 'components/AdvanceTable.scss';
+@import 'components/Popover.scss';
+@import 'components/Tooltip.scss';
+@import 'components/Confirm.scss';
+@import 'components/CheckBox.scss';
+@import 'components/Switch.scss';
+@import 'components/Message.scss';
+@import 'components/LoadingBar.scss';
+@import 'components/Badge.scss';
+@import 'components/Dropdown.scss';
+@import 'components/Input.scss';
+@import 'components/Alert.scss';
+@import 'components/Anchor.scss';
+@import 'components/BackTop.scss';
+@import 'components/Notification.scss';
 
-@mixin setup-light-theme () {
+@mixin setup-light-theme() {
   @include setup-light-colors();
   $--n-primary-color: $--primary-6 !global;
   $--n-primary-hover-color: $--primary-5 !global;
@@ -33,18 +34,18 @@
   $--n-success-color: $--success-6 !global;
   $--n-warning-color: $--warning-6 !global;
   $--n-error-color: $--error-6 !global;
-  
+
   $n-selected-color: $neutral-7 !global;
   $--n-divider-color: $neutral-7 !global;
   $--n-border-color: $neutral-6 !global;
-  
+
   $--n-secondary-text-color: $neutral-3 !global;
   $--n-text-color: $neutral-2 !global;
   $--n-disabled-text-color: $neutral-5 !global;
   $--n-card-color: $neutral-10 !global;
   $--n-dialog-color: $neutral-10 !global;
   $--n-background-color: $neutral-10 !global;
- 
+
   @include setup-light-nimbus-service-layout;
   @include setup-light-divider;
   @include setup-light-scrollbar;
@@ -69,4 +70,5 @@
   @include setup-light-anchor;
   @include setup-light-alert;
   @include setup-light-back-top;
-}
\ No newline at end of file
+  @include setup-light-notification;
+}