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 文档了解更多详细信息