Suis Tema

Penggunaan

import { ThemeProvider } from "@govtechmy/myds-react/hooks";
import { ThemeSwitch } from "@govtechmy/myds-react/theme-switch";

export default () => (
  <ThemeProvider>
    <ThemeSwitch />
  </ThemeProvider>
);

Contoh

Sebagai Suis Togol

Secara lalai, ThemeSwitch akan muncul sebagai butang togol, beralih antara mod terang dan gelap, seperti di bawah.

Sebagai Pilihan

Anda juga boleh menggunakan ThemeSwitch sebagai menu pilihan dropdown, membolehkan pengguna memilih dari senarai tema.

Tema Tersuai

Anda juga boleh memperluaskan tema yang tersedia dengan menentukan sifat themes! Ini juga membolehkan anda menyesuaikan ikon tema atau mengubah susunan tema.

Props

ThemeSwitch

[
  { 
      label: "Terang",
      value: "light", 
      icon: <SunIcon />; 
  },
  { 
      label: "Gelap",
      value: "dark", 
      icon: <MoonIcon />; 
  }
]

ThemeProvider