fix(layout):transition &background-color

demo/header.vue

@@ -129,7 +129,6 @@ export default {
   align-items: center;
   padding-left: 44px;
   font-size: 18px;
-  transition: color .3s cubic-bezier(.4, 0, .2, 1);
 }
 .ui-logo > img {
   margin-right: 12px;

packages/common/Layout/src/Layout.vue

@@ -4,6 +4,7 @@
     :class="{
       [`n-layout--${mode}-positioned`]: mode,
       'n-layout--has-sider': hasSider,
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
     }"
     :style="{
       marginLeft: styleMarginLeft,
@@ -19,10 +20,12 @@
 
 <script>
 import layoutModeMixin from './layoutModeMixin'
+import themeable from '../../../mixins/themeable'
+import withapp from '../../../mixins/withapp'
 
 export default {
   name: 'NLayout',
-  mixins: [ layoutModeMixin ],
+  mixins: [ withapp, themeable, layoutModeMixin ],
   provide () {
     return {
       NLayout: this

packages/common/Layout/src/LayoutSider.vue

@@ -15,7 +15,7 @@
       width: styleWidth,
     }"
   >
-    <n-scrollbar v-if="!useNativeScrollbar">
+    <n-scrollbar v-if="!useNativeScrollbar" class="n-layout-sider__content">
       <slot />
     </n-scrollbar>
     <div v-else class="n-layout-sider__content">
@@ -156,11 +156,8 @@ export default {
     } else {
       this.styleWidth = `${this.width}px`
     }
-  },
-  mounted () {
     const NLayout = this.NLayout
     if (NLayout) {
-      NLayout.blockChildLayoutTransitionOneTick()
       NLayout.hasSider = true
       NLayout.siderWidth = this.width
       NLayout.collapsedSiderWidth = this.collapsedWidth

styles/Layout.scss

@@ -2,12 +2,14 @@
 
 @include themes-mixin {
   @include b(layout) {
+    color: $--layout-text-color;
+    background-color: $--layout-back-color;
     @include once {
       box-sizing: border-box;
       position: relative;
       display: flex;
       flex-wrap: nowrap;
-      transition: margin-left .3s $--n-ease-in-out-cubic-bezier;
+      transition: margin-left .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
       flex-direction: column;
       overflow: auto;
       @include m(has-sider) {

styles/Menu.scss

@@ -117,7 +117,7 @@ $layout-nav-height: 64px;
           top: calc(50% - 3px);
           transform: rotate(45deg) ;
           transform-origin: 25% 25%;
-          transition: transform 0.3s $--n-ease-in-out-cubic-bezier, opacity 0.3s $--n-ease-in-out-cubic-bezier;
+          transition: transform 0.3s $--n-ease-in-out-cubic-bezier, opacity 0.3s $--n-ease-in-out-cubic-bezier, border-color 0.3s $--n-ease-in-out-cubic-bezier;
         }
         @include m(collapsed) {
           &::after {

styles/NewNimbusServiceLayout.scss

@@ -2,8 +2,6 @@
 
 @include themes-mixin() {
   @include b(new-nimbus-service-layout) {
-    color: $service-layout-color;
-    background-color: $service-layout-body-background-color;
     @include e(header) {
       height: 64px;
       @include m(hide) {

styles/Scrollbar.scss

@@ -15,7 +15,7 @@
           overflow: scroll;
           height: 100%;
           max-height: inherit;
-          scrollbar-width: 0;
+          scrollbar-width: none;
           &::-webkit-scrollbar {
             width: 0;
             height: 0;

styles/themes/dark/components/Layout.scss

@@ -1,4 +1,6 @@
 @mixin setup-dark-layout {
+  $--layout-text-color: $--n-secondary-text-color !global;
+  $--layout-back-color: $--n-background-color !global;
   $--layout-header-background-color: $--n-card-color !global;
   $--layout-header-border-color: $--n-divider-color !global;
   $--layout-footer-border-color: $--n-divider-color !global;

styles/themes/light/components/Layout.scss

@@ -1,4 +1,6 @@
 @mixin setup-light-layout {
+  $--layout-text-color: $--n-secondary-text-color !global;
+  $--layout-back-color: $--neutral-9 !global;
   $--layout-header-background-color: $--n-card-color !global;
   $--layout-header-border-color: $--n-divider-color !global;
   $--layout-footer-border-color: $--n-divider-color !global;