在前几篇，挑选一套自己喜欢的UI框架中提到，挑选Nebular的其中一个重要的原因是:可以很方便快速切换主题。这一篇就要来示范，如何做到一件切换主题!

什麽是切换布景主题

自从暗黑模式流行起来之後，越来越多的网站与应用程序加入了即时切换不同布景主题的模式。一般来说，都是光亮模式与暗黑模式之间的切换。

而Nebular 提供六套不同的预设主题，供开发者直接套用。我们就来挑战，切换 Light 与 Dark 两种不同的主题吧！

切换布景主题的原理也很简单，也就是切换不同主题的CSS档案，读取CSS布景主题的变数之後，套用上去，达到切换布景主题的效果

在执行时，即时切换主题

在Nebular的文件 Change Current Theme 的章节介绍到，如何在执行的时候切换布景主题：

// ...
  constructor(private themeService: NbThemeService) {
    this.themeService.changeTheme('corporate');
  }

就这样，没了！就是这麽简单！

只要引入Nebular 的 NbThemeService ，并且呼叫 changeTheme 的方法，就可以即时切换主题。

这个就是Nebular吸引我的地方，相较其他的UI 框架切换主题麻烦的设定，Nebular 简洁俐落多了。

在此同时也要反思自己，有没有办法写出这麽简洁又好用的程序码呢？

制做切换主题的按钮

了解如何切换主题後，要制做一个按钮，让使用者点击切换布景主题。

在页面的右上角，有一个切换的按钮让使用者切换布景主题

暗黑模式

亮白模式

制做按钮

按钮和 icon 是利用 nebular 内建的元件制做的，使用方法很简单，只要引入相关模组，就可以使用，另外还要汇入 FormsModule 使用双向绑定来记录元件的状态

@NgModule({
  imports: [
    NbToggleModule,
    NbIconModule,
		FormsModule
  ]
})

再来写下html

<nb-toggle
  status="basic"
  [(ngModel)]="themeToggle"
  (ngModelChange)="changeThemeMode(themeToggle)"
>
  <nb-icon [icon]="themeToggle ? 'moon' : 'sun-outline'"></nb-icon>
</nb-toggle>

利用 ngModel 去纪录目前按钮的状态，再来用 ngModelChange 去监听，当绑定的值出现变化，便触发 changeThemeMode 的方法去切换布景主题。

另外icon也利用 themeToggle 的变数去控制目前要显示太阳或月亮表示当前的布景主题

最後来写逻辑 typescript

  themeToggle = true;
  constructor(private themeService: NbThemeService) {
    this.detectTheme();
  }

  changeThemeMode(themeToggle: boolean): void {
    const theme = themeToggle ? 'dark' : 'default';
    this.themeService.changeTheme(theme);
  }

  detectTheme(): void {
    const isDarkMode =
      window.matchMedia &&
      window.matchMedia('(prefers-color-scheme: dark)').matches;
    this.themeToggle = isDarkMode;
    this.changeThemeMode(this.themeToggle);
  }

也就是依照官网的写法，来切换主题。

但是在这里有一个特别的是，笔者写了一个 detectTheme 的方法去侦测使用者装置系统预设主题，如果使用者装置设定暗黑模式，那麽网站打开预设就会是暗黑模式，让使用者可以有更一致的使用者体验。

window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; 就是一个很好的判断方法

如此一来就大功告成罗，最後来看看成果吧！