[Nuxt3] shadcn-vue 切換主題

日期：
在之前介紹了 開源免費可自訂的元件庫 shadcn-vue ，在官網的主題頁面可以切換 5 個顏色，並且每個顏色都各有淺色和深色兩種，顏色非常棒，但是該如何實作出來呢？

切換淺色和深色模式

原理很簡單，就是在最外層的 <html> 這個標籤上加上 dark 這個 class 即可。

在 Nuxt3 中我們需要加上 @unhead/vue 這個套件： 
    
npm install @unhead/vue

註： 原先是使用 @vueuse/head 套件，後來遷移到 @vueuse/head

然後在 app.vue 中加入以下程式碼： 
    
<script setup lang="ts">
import { useHead } from '@unhead/vue'

// 設定 <html> 標籤的 class 屬性
useHead({
  htmlAttrs: {
    class: 'dark'
  }
})

</script>

開啟網頁後就會發現網頁變成深色，並且查看原始碼也會看到確實多了 dark 這個 class： 
    
<!DOCTYPE html>
<html class="dark">

</html>

增加顏色：

如果有按照步驟安裝，可以找到 assets\css\tailwind.css 這個檔案，內容如下： 
    
@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    /*省略*/
  }
 
  .dark {
    /*省略*/
  }
}
 
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

因為要有多個主題，所以先把原本的 :root 改成和官網一樣的名稱(筆者預設是選擇官網最左邊的黑色，名稱叫做 theme-zinc)，然後把 .dark 前面也加上，這樣要有兩個 class 才會套用： 
    
@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {

  .theme-zinc {
    /*省略*/
  }

  .theme-zinc.dark {
    /*省略*/
  }
  
}
 
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

然後再從官網複製新的主題，例如 theme-rose ，貼上後再改名為 .theme-rose 和 .dark.theme-rose 
    
@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {

  .theme-zinc {
    /*省略*/
  }

  .theme-zinc.dark {
    /*省略*/
  }

  .theme-rose {
    /*省略*/
  }

  .dark.theme-rose {
    /*省略*/
  }

}
 
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

這樣回到 app.vue 中就可以使用以下幾種來替換 class 了： 
    
theme-zinc
theme-zinc dark
theme-rose
theme-rose dark



參考資料：
shadcn-vue - Themes
Unhead - Install Vue Unhead
GitHub - vueuse/head
GitHub - unjs/unhead

留言

張貼留言

如果有任何問題、建議、想說的話或文章題目推薦，都歡迎留言或來信: a@ruyut.com