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