Wrikka Learn

Dark mode

Grok

Unocss for Design System ​

คือถ้าเราทำเป็น design system ถ้าเปลี่ยน css variable ทุกอย่างที่ใช้มันเปลี่ยนหมดเลย ซึ้งมันง่ายในการทำให้ทั่วทั้งเว็บเป็น theme เดียวกัน

❌ No Design System (ติดตั้งแล้ว ใช้งานเลย) ​

1. ติดตั้ง ​

  1. ติดตั้ง
bash
npm install -D unocss

2. ใช้งานเลย ​

  1. ใช่งาน utility class เลย
vue
<template>
  <div class="m-4 p-4 bg-gray-200 rounded">
    <button class="px-4 py-2 bg-blue-500 text-white rounded">
      สมัครสมาชิก
    </button>
  </div>
</template>

3. หรือาจจะกำหนด css reset เองใน .css ​

css
/* styles/reset.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  line-height: 1.5;
}
ts
import "./styles/reset.css";
import "virtual:uno.css";

✅ Design System ​

1. เลือก Preset ​

อ่านเพิ่มเติม Presets

2. ติดตั้ง css reset ​

แต่อันเจ้าจะมีค่าเริ่มต้นที่ไม่เหมือนกัน การกำหนด css reset จะช่วยให้ใช้ค่าเริ่มต้นที่เหมือนกันทั่วทุก browser

ปกติเราต้องถ้ากำหนดเอง แต่มันจะง่ายกว่าไหม ถ้ามีคนมาให้แล้ว

bash
npm install -D @unocss/reset/
bash
yarn add -D @unocss/reset/
bash
pnpm add -D @unocss/reset/

เลือก css reset ของเจ้าไหน

3. กำหนด theme ​

ใช้ css variable

css
:root {
  --primary: #1e40af;
  --secondary: #f59e42;
  --success: #1e40af;
  --warning: #1e40af;
  --danger: #1e40af;
}

.dark {
  --primary: #1e40af;
  --secondary: #f59e42;
  --success: #1e40af;
  --warning: #1e40af;
  --danger: #1e40af;
}
ts
export default defineConfig({
  theme: {
    colors: {
      primary: '--var(--primary)',
      secondary: '--var(--secondary)',
      success: '--var(--success)',
      warning: '--var(--warning)',
      danger: '--var(--danger)',
    },
    spacing: {
      sm: '0.5rem',
      md: '1rem',
    },
    borderRadius: {
      sm: '0.25rem',
      md: '0.5rem',
    }
  },
})
    
```vue [src/components/Card.vue]
<template>
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">Card Title</h3>
    </div>
    <div class="card-body">
      <p class="card-text">Card Text</p>
    </div>
  </div>
</template>

<script setup>