---
# System prepended metadata

title: 變換網站色彩主題

---

# 變換網站色彩主題
## 功能
預設網站色彩主題或根據網站訪問者的選擇來變換網站色彩主題，並記億選擇，於下次訪問時訪問者不用再選擇。

## code 內容
⚠<font color="red">tip: 此函式只針對 <html> 這個標籤操作 className，不是操作 <html> 標籤勿用。</font>

websiteColorTheme.init(defaultClassNames) -> 進入網站初始化用，使用預設或繼使用者的上次設定來變換。

websiteColorTheme.set(classNames) -> 變換時使用。


| fn()'s Name            | 代入的變數 (type)           | other              | example                                 |
| ---------------------- | ------------------------- | ------------------ | --------------------------------------- |
| websiteColorTheme.init | defaultClassNames (Array) | 初次進入要代入的預設值 | websiteColorTheme.init(['dark', 'red']) |
| websiteColorTheme.set  | classNames (Array)        | 點選後要代入的設定值   | websiteColorTheme.set([])<br/> or <br/> const classNames = ['dark', 'red'] websiteColorTheme.set(classNames)            |

``` jsx!
  // 網站主題色相關
  const websiteColorTheme = {
    // 初始化主題顏色，localStorage 沒有就用預設
    init: async (defaultClassNames) => {
      const html = document.querySelector('html')
      if(defaultClassNames){
        html.classList.add(defaultClassNames)
        localStorage.setItem('websiteTheme',defaultClassNames)
      }
    },
    // 設定主題顏色
    set: (classNames) => {
      const html = document.querySelector('html')
      let websiteTheme = localStorage.getItem('websiteTheme')
      if(websiteTheme){
        html.classList.remove(websiteTheme)
      }
      if(classNames){
        html.classList.add(classNames)
        localStorage.setItem('websiteTheme',classNames)
      }
    },
  }
```

## 使用
### ex: aai pc
``` jsx!
// LayoutView.vue 部分
// 請根據情況改寫
<script setup>
  import { onMounted } from 'vue';
  import common from "@/utils/common";
  const { websiteColorTheme } = common();
  
  onMounted(async () => {
  // 初始化色彩主題
  // 變數為要加入 html tag 的 className 預設值；
  const defaultWebsiteColorTheme = ['light', 'blue']
  websiteColorTheme.init(defaultWebsiteColorTheme)
});
</script>
```

``` jsx!
// 可點擊更換顏色的.vue 部分
// 請根據情況改寫
<template>
  <!-- 月亮選擇 -->
  <div class="dropdown">
    <div data-bs-toggle="dropdown">
      <img v-if="circleMoon === 'light'" class="moon-icon" :src="getImage(DomainLayoutId + `/img/header/icon_header_moon_light_normal.svg`, siteSettingsInfo.managerCDNUrl)" alt="">
      <img v-else class="moon-icon" :src="getImage(DomainLayoutId + `/img/header/icon_header_moon_dark_normal.svg`, siteSettingsInfo.managerCDNUrl)" alt="">
    </div>
    <ul class="dropdown-menu">
      <li @click="() => { circleMoon = 'light' }">
        <img class="moon-icon" :src="getImage(DomainLayoutId + '/img/header/icon_header_moon_light_normal.svg', siteSettingsInfo.managerCDNUrl)" alt="">
      </li>
      <li @click="() => { circleMoon = 'dark' }">
        <img class="moon-icon" :src="getImage(DomainLayoutId + '/img/header/icon_header_moon_dark_normal.svg', siteSettingsInfo.managerCDNUrl)" alt="">
      </li>
    </ul>
  </div>

  <!-- 顏色選擇 -->
  <div class="dropdown">
    <div class="lang-option-circle colorful-circle" :class="[circleColor + '-circle']" data-bs-toggle="dropdown"></div>
    <ul class="dropdown-menu">
      <li @click="() => { circleColor = 'blue' }">
        <span class="lang-option-circle blue-circle"></span>
      </li>
      <li @click="() => { circleColor = 'red' }">
        <span class="lang-option-circle red-circle"></span>
      </li>
      <li @click="() => { circleColor = 'yellow' }">
        <span class="lang-option-circle yellow-circle"></span>
      </li>
    </ul>
  </div>
</template>

<script setup>
  // 引用
  import common from "@/utils/common";
  const { websiteColorTheme } = common();
  
  // 變數 circleColor、circleMoon  取 localStorage 資料
  const circleColor = ref(...JSON.parse(localStorage.getItem('websiteTheme')).classNames.filter(e => e !== 'dark' && e !== 'light'));
  const circleMoon = ref(JSON.parse(localStorage.getItem('websiteTheme')).classNames.includes('dark') ? 'dark' : 'light'
);
  
  
  const handleChangeTheme = (classNames) => {
    // 去除空值''
    classNames = classNames.filter(e => e !== '')
    // 使用
    websiteColorTheme.set(classNames)
  }

  // 監聽變化
  watch(() => [circleMoon.value, circleColor.value], () => {
    handleChangeTheme([circleMoon.value, circleColor.value])
  })
</script>
```

### ex: aak pc
``` jsx!
// LayoutView.vue 部分
// 請根據情況改寫
<script setup>
  import { onMounted } from 'vue';
  import common from "@/utils/common";
  const { websiteColorTheme } = common();
  
  onMounted(async () => {
    // 初始化色彩主題
    // 變數為要加入 html tag 的 className 預設值
    const defaultWebsiteColorTheme = []
    websiteColorTheme.init(defaultWebsiteColorTheme)
  });
</script>
```
``` jsx!
// 可點擊更換顏色的.vue 部分
// 請根據情況改寫
<template>
  <!-- 右側欄位--主內容 -->
    <div class="rightMenu-Wrap">
      <!-- 版面顏色控制 -->
      <!-- NOTE:點選light模式時，html加上.lightMod，dark模式拿掉.lightMod -->
      <ol class="rightMenu-styleMode">
        <li class="dark" @click="handleChangeTheme()"></li>
        <li class="light" @click="handleChangeTheme('lightMod')"></li>
      </ol>
    ...
</template>

<script setup>
  // 引用
  import common from "@/utils/common";
  const { websiteColorTheme } = common();
  
  // 變換 color theme
const handleChangeTheme = (className) => {
  websiteColorTheme.set(className ? [className] : [])
}
</script>
```


