Willin Wang
retro
  • Dark
  • Light

DaysiUI Themes Previewer

发表于： 2022-07-11
阅读预计： 2 分钟
文章字数： 357
light
A
A
A
A
dark
A
A
A
A
cupcake
A
A
A
A
bumblebee
A
A
A
A
emerald
A
A
A
A
corporate
A
A
A
A
synthwave
A
A
A
A
retro
A
A
A
A
cyberpunk
A
A
A
A
valentine
A
A
A
A
halloween
A
A
A
A
garden
A
A
A
A
forest
A
A
A
A
aqua
A
A
A
A
lofi
A
A
A
A
pastel
A
A
A
A
fantasy
A
A
A
A
wireframe
A
A
A
A
black
A
A
A
A
luxury
A
A
A
A
dracula
A
A
A
A
cmyk
A
A
A
A
autumn
A
A
A
A
business
A
A
A
A
acid
A
A
A
A
lemonade
A
A
A
A
night
A
A
A
A
coffee
A
A
A
A
winter
A
A
A
A

export function Previewer() {
  return (
    <div class=' rounded-box grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5'>
      {themes.map((theme) => (
        <div
          class='border-base-content/20 hover:border-base-content/40 outline-base-content overflow-hidden rounded-lg border outline outline-2 outline-offset-2'
          data-set-theme={theme.id}
          data-act-class='outline'>
          <div
            data-theme={theme.id}
            class='bg-base-100 text-base-content w-full cursor-pointer font-sans'>
            <div class='grid grid-cols-5 grid-rows-3'>
              <div class='bg-base-200 col-start-1 row-span-2 row-start-1' />
              <div class='bg-base-300 col-start-1 row-start-3' />
              <div class='bg-base-100 col-span-4 col-start-2 row-span-3 row-start-1 flex flex-col gap-1 p-2'>
                <div class='font-bold'>{theme.id}</div>
                <div class='flex flex-wrap gap-1'>
                  <div class='bg-primary flex aspect-square w-5 items-center justify-center rounded lg:w-6'>
                    <div class='text-primary-content text-sm font-bold'>A</div>
                  </div>
                  <div class='bg-secondary flex aspect-square w-5 items-center justify-center rounded lg:w-6'>
                    <div class='text-secondary-content text-sm font-bold'>
                      A
                    </div>
                  </div>
                  <div class='bg-accent flex aspect-square w-5 items-center justify-center rounded lg:w-6'>
                    <div class='text-accent-content text-sm font-bold'>A</div>
                  </div>
                  <div class='bg-neutral flex aspect-square w-5 items-center justify-center rounded lg:w-6'>
                    <div class='text-neutral-content text-sm font-bold'>A</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

const themes = [
  {
    name: '🌝  light',
    id: 'light'
  },
  {
    name: '🌚  dark',
    id: 'dark'
  },
  {
    name: '🧁  cupcake',
    id: 'cupcake'
  },
  {
    name: '🐝  bumblebee',
    id: 'bumblebee'
  },
  {
    name: '✳️  Emerald',
    id: 'emerald'
  },
  {
    name: '🏢  Corporate',
    id: 'corporate'
  },
  {
    name: '🌃  synthwave',
    id: 'synthwave'
  },
  {
    name: '👴  retro',
    id: 'retro'
  },
  {
    name: '🤖  cyberpunk',
    id: 'cyberpunk'
  },
  {
    name: '🌸  valentine',
    id: 'valentine'
  },
  {
    name: '🎃  halloween',
    id: 'halloween'
  },
  {
    name: '🌷  garden',
    id: 'garden'
  },
  {
    name: '🌲  forest',
    id: 'forest'
  },
  {
    name: '🐟  aqua',
    id: 'aqua'
  },
  {
    name: '👓  lofi',
    id: 'lofi'
  },
  {
    name: '🖍  pastel',
    id: 'pastel'
  },
  {
    name: '🧚‍♀️  fantasy',
    id: 'fantasy'
  },
  {
    name: '📝  Wireframe',
    id: 'wireframe'
  },
  {
    name: '🏴  black',
    id: 'black'
  },
  {
    name: '💎  luxury',
    id: 'luxury'
  },
  {
    name: '🧛‍♂️  dracula',
    id: 'dracula'
  },
  {
    name: '🖨  CMYK',
    id: 'cmyk'
  },
  {
    name: '🍁  Autumn',
    id: 'autumn'
  },
  {
    name: '💼  Business',
    id: 'business'
  },
  {
    name: '💊  Acid',
    id: 'acid'
  },
  {
    name: '🍋  Lemonade',
    id: 'lemonade'
  },
  {
    name: '🌙  Night',
    id: 'night'
  },
  {
    name: '☕️  Coffee',
    id: 'coffee'
  },
  {
    name: '❄️  Winter',
    id: 'winter'
  }
];