Vue + Tailwind: Halaman profil bertema

Question

Saya mahu mencipta aplikasi (serupa dengan rangkaian sosial) yang membenarkan pengguna mendaftar dan memasukkan sekumpulan maklumat profil. Selepas itu, pengguna boleh memilih tema (dari satu set tema yang telah ditetapkan) untuk memaparkan maklumat ini kepada pengguna lain yang melihat profil.

Ini sangat serupa dengan tema etalase Shopify.

Bagaimanakah saya harus cuba mereka bentuk penyelesaian untuk ini?

Maaf terlebih dahulu untuk soalan yang tidak jelas.

Saya tahu cara menetapkan tema dan/atau warna dsb semasa menulis kod (atau mungkin semasa langkah binaan), tetapi saya juga cuba membuat alasan tentang cara melakukannya di dalam produk.

Answer 1

Anda boleh menggunakan tw-warna untuk mencipta tema yang dipratentukan

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

Kemudian sapukan tema pada bekas kad

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

Jika nama kelas subjek datang daripada respons API, anda harus menyenaraikannya dengan selamat, jika tidak, tailwind tidak akan menghasilkannya, lihat dokumentasi tailwinduntuk butiran lanjut