## Light/Dark Mode

### Configuration

To use Tailwind CSS's dark mode configuration, please configure `darkMode: 'class'` in `tailwind.config.js`. Refer to [Dark Mode](https://tailwindcss.com/docs/dark-mode) for more information.

### Switching Modes

Simply add or remove the `dark` class name to the `html` tag.

```js
// Switch to light mode
document.documentElement.classList.remove('dark');

// Switch to dark mode
document.documentElement.classList.add('dark');
```

## Color Configuration

Based on the Tailwind configuration file `tailwind.config.js`, configure the theme color system. Please ensure that the following basic colors are configured. Reference [STDF Guide - Color](/#/Guide?nav=color).

| Color Name  | Description                    | Default Value |
| ----------- | ------------------------------ | ------------- |
| primary     | Theme color - light mode       | #0B24FB       |
| dark        | Theme color - dark mode        | #FFC043       |
| success     | Functional color - success     | #11BB8D       |
| warning     | Functional color - warning     | #B95000       |
| error       | Functional color - error       | #DA1414       |
| info        | Functional color - information | #2E5AAC       |
| purple      | Extended color - purple        | #7356BF       |
| green       | Extended color - green         | #05944F       |
| orange      | Extended color - orange        | #FF6937       |
| black       | Auxiliary color - black        | #09101D       |
| gray1       | Auxiliary color - gray 1       | #23262B       |
| gray2       | Auxiliary color - gray 2       | #2A2B2F       |
| gray3       | Auxiliary color - gray 3       | #303239       |
| gray4       | Auxiliary color - gray 4       | #373940       |
| gray5       | Auxiliary color - gray 5       | #414249       |
| gray6       | Auxiliary color - gray 6       | #747B84       |
| gray7       | Auxiliary color - gray 7       | #DADEE3       |
| gray8       | Auxiliary color - gray 8       | #EBEEF2       |
| gray9       | Auxiliary color - gray 9       | #F4F6F9       |
| gray10      | Auxiliary color - gray 10      | #FAFAFB       |
| transparent | Auxiliary color - transparent  | transparent   |

Changing these color values will switch to different theme colors.