Vue + Tailwind：可主題化的個人資料頁面

Question

我想創建一個應用程式（類似於社交網路），讓用戶註冊並輸入一堆個人資料資訊。此後，使用者可以選擇一個主題（從一組預先定義主題中），以便向查看個人資料的其他使用者顯示此資訊。

這與 Shopify 的店面主題非常相似。

我該如何嘗試為此設計解決方案？

對於一個非常高級的模糊問題提前表示歉意。

我知道如何在編寫程式碼時（或可能在建置步驟期間）設定主題和/或顏色等，但我甚至試圖推理如何在產品內部執行此操作。

Answer 1

您可以使用tw-colors來建立預定義主題

   const { createThemes } = require('tw-colors');

   module.exports = {
      content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
      plugins: [
         createThemes({
            banana: { 
               'primary': 'steelblue',
               'secondary': 'darkblue',
               'brand': '#F3F3F3',
            },
            halloween: { 
               'primary': 'turquoise',
               'secondary': 'tomato',
               'brand': '#4A4A4A',
            },
            darkula: { 
               'primary': '#2A9D8F',
               'secondary': '#E9C46A',
               'brand': '#264653',
            },
         })
      ],
   };

然後將主題套用到卡片容器上

<div class='theme-darkcula'>
    <h2 class='text-primary'>Username</h2>
    <p class='text-secondary'>...</p>
</div>

<div class='theme-halloween'>
    <h2 class='text-primary'>Username</h2>
    <p class='text-secondary'>...</p>
</div>

如果主題類別名稱來自 API 回應，您應該將它們列入安全性列表，否則 tailwind 將不會產生它們，請參閱 tailwind 文件以了解更多詳細資訊