Vue + Tailwind: Themeable profile page

Question

I want to create an application (similar to a social network) that lets users sign up and enter a bunch of profile information. Thereafter, the user can select a theme (from a set of predefined themes) to display this information to other users viewing the profile.

This is very similar to Shopify’s storefront theme.

How should I try to design a solution for this?

Sorry in advance for a very advanced vague question.

I know how to set the theme and/or colors etc while writing code (or maybe during the build step), but I'm even trying to reason about how to do this inside the product.

Answer 1

You can use tw-colors to create a predefined theme

   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',
            },
         })
      ],
   };

Then apply the theme to the card container

<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>

If subject class names come from API responses, you should safelist them, otherwise tailwind will not generate them, see tailwind documentation for more details