Vue + Tailwind: Themeable profile page-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

Vue + Tailwind: Themeable profile page

P粉155710425 2023-09-03 14:50:24

396

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.

P粉155710425

reply all(1)

P粉7624473632023-09-04 14:04:32 1 floor

You can use tw-colors to create a predefined theme p>

   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


    Username
    ...



    Username
    ...

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