HarmonyOS鸿蒙Next中HdsSideBar组件为什么在手机上不会根据系统深浅色自动变色？

HarmonyOS鸿蒙Next中HdsSideBar组件为什么在手机上不会根据系统深浅色自动变色？ 系统设置为深色模式时HdsSideBar的侧边栏区域依然为浅色。

完全按照示例代码来写的，在PC上就可以自动变色，手机上却不行。

import { HdsSideBar } from '@kit.UIDesignKit';

@Entry
@ComponentV2
struct Index {
  @Local isShowSidebar: boolean = true;

  //左侧侧边栏区
  @Builder
  SideBarPanelBuilder() {
    Column() {
      Text('左侧侧边栏区')
    }
    .width('100%')
    .height('100%')
    .margin(40)
  }

  //右侧内容区
  @Builder
  ContentPanelBuilder() {
    Text('右侧内容区')
      .margin(40)
  }

  @BuilderParam contentBuilder: () => void = this.ContentPanelBuilder
  @BuilderParam sideBarBuilder: () => void = this.SideBarPanelBuilder

  @Builder
  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Button() {
        SymbolGlyph(this.isShowSidebar ? $r('sys.symbol.open_sidebar') : $r('sys.symbol.close_sidebar'))
          .fontWeight(FontWeight.Normal)
          .fontSize($r('sys.float.ohos_id_text_size_headline7'))
          .fontColor([$r('sys.color.ohos_id_color_titlebar_icon')])
          .hitTestBehavior(HitTestMode.None)
      }
      .id('side_bar_button')
      .backgroundColor($r('sys.color.ohos_id_color_button_normal'))
      .height(30)
      .width(30)
      .onClick(() => {
        this.isShowSidebar = !this.isShowSidebar;
      })
      .zIndex(1)
      .margin({ top: 10, left: 10 })

      HdsSideBar({
        sideBarPanelBuilder: (): void => {
          this.sideBarBuilder()
        },
        contentPanelBuilder: (): void => {
          this.contentBuilder()
        },
        sideBarContainerType: SideBarContainerType.Overlay,
        maxSideBarWidth: 100,
        isShowSideBar: this.isShowSidebar,
        $isShowSideBar: (isShowSidebar: boolean) => {
          this.isShowSidebar = !isShowSidebar
        },
      })
    }
  }
}