前言
早在多年之前，我看過奶綠大大一篇網誌提到，tailwindcss可以做到更換語系並伴隨修改文字大小，且可以在10分鐘搞定，原理是靠檢測body上的一些property，然後對tailwindcss的ultility進行覆寫，架設text-lg是1rem，當遇到body[lang="en"]時text-lg就會變成0.75rem，這樣的效果。然而～我怎麼樣都找不到這篇文章，正確來說是找到了，但是點進去看看不到關鍵字（應該是基於某些原因部分內容被刪掉了）。因此只好自己開始摸索
原本想說只是檢測上層class應該是不難做到，結果官網看來看去也沒半點消息，只有一個darkMode的文件應該可以做到我要的需求。但這樣需要在每個要變換顏色的class加上不同膚色的前綴，例如text-primary, dark:text-primary, yellow:text-primary...，不是這樣開發效能非常不佳，因此列入備案，繼續尋找答案。
在苦思無果後上網發文，網路大神果然很熱心的回覆了，除了上述darkMode的方法，還另外得到了三個解法，記錄一下給大家參考
方法一，原生變數解法
// src/main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
.main {
--theme-main: #D53737
}
.test {
--theme-main: #007712
}
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{vue,js,ts}"],
theme: {
extend: {
colors: {
"theme-main": "var(--theme-main)",
},
spacing: {
mobile: "600px",
},
},
},
plugins: [],
}
// src/App.vue
div(class="max-w-mobile mx-auto my-0 h-full", :class="'test'") // or main
div(class="bg-theme-main") what is my bg color
第二種解法也相當容易，使用tw-colors的tailwindcss套件
// yarn add -D tw-colors
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
const { createThemes } = require("tw-colors")
export default {
content: ["./index.html", "./src/**/*.{vue,js,ts}"],
theme: {
extend: {
spacing: {
mobile: "600px",
},
},
},
plugins: [
createThemes({
main: {
"theme-main": "#D53737",
},
test: {
"theme-main": "#007712",
},
}),
],
}
架構方法類似，使用方法一樣，我就不多做介紹
最後介紹第三種，同樣是使用套件，叫daisyUI
// yarn add -D daisyui@latest
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
const { createThemes } = require("tw-colors")
export default {
daisyui: {
themes: [
"light",
"dark", {
"main": {
"theme-main": "#a991f7",
"primary": "#a991f7",
"secondary": "#f6d860",
"accent": "#37cdbe",
"neutral": "#3d4451",
"base-100": "#ffffff",
},
}],
},
plugins: [require("daisyui")],
}
<div data-theme="main">
This div will always use light theme
<span class="text-theme-main">This span will always use retro theme!</span>
</div>
至於還有一些奇怪招數，原生土法煉鋼法及NODE_ENV修改大法
.main {
text-theme-main: #b42222;
bg-theme-main: #b42222;
......
};
.test {
text-theme-main: #007712;
bg-theme-main: #007712;
......
}
/** @type {import('tailwindcss').Config} */
const { createThemes } = require("tw-colors")
export default {
content: ["./index.html", "./src/**/*.{vue,js,ts}"],
theme: {
extend: {
colors: {
"theme-main": NODE_ENV == "prod" ? "#D53737" : "#007712",
},
spacing: {
mobile: "600px",
},
},
},
}
恩.....我就不多解釋了
最終我選擇了tw-colors套件解法，原因就是夠簡單，當然靠css原生變數那招也很吸引我，且不用另外裝套件，但唯一缺點就是要分兩個檔案維護，開發上不夠直覺。至於daisyUI，看官網這應該是個滿強大的套件，但很多東西應該都制定好了，但感覺有點重，應該是適合當後台開發使用，前台設計師應該不會讓我這麼輕易不照他給的色碼開發，所以還是選用最簡單的tw-colors，好了，又完美解決了一次事件，祝大家有個美好的一天。
沒有留言:
張貼留言