# 變換網站色彩主題
## 功能
預設網站色彩主題或根據網站訪問者的選擇來變換網站色彩主題，並記億選擇，於下次訪問時訪問者不用再選擇。
## 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>
```
Sign in with Wallet
Connect another wallet