theming

1thay hỗ trợ 4 brand modes qua attribute selectors. tất cả components tự động phản hồi — không cần thay đổi code. chuyển đổi qua dropdown BrandSwitch trên navbar.

cơ chế

demo trực quan

bấm vào brand switch trên navbar để thấy components thay đổi. dưới đây là một số components hiển thị với token hiện tại:

kỹ thuật

css

/* tokens.css — 4 brand modes, mỗi brand override semantic tokens */
[data-brand="reputa-premier"] {
  --color-brand-600: #A10B2E;
}

[data-brand="tramnghe"] {
  --color-brand-600: #044f44;
  --font-display: 'Merriweather', serif;
}

[data-brand="1thay"] {
  --color-brand-600: #FBC000;
  --font-display: 'Space Grotesk', monospace;
}

component

import { BrandSwitch } from '@1thay/core';

// đặt trong navbar
<BrandSwitch client:load />

// component tự động phản hồi CSS variables
// không cần props, không cần context

anti-flash

<script>
  (() => {
    const m = localStorage.getItem('1thay-brand');
    if (m && m !== 'reputa-blue')
      document.body.setAttribute('data-brand', m);
  })();
</script>

components

brandswitch component cho phep chuyen doi giua 4 brands:

<BrandSwitch client:load />