Installation
Add these tags in the <head> section to use Tocas UI, or download it from GitHub for offline use.
<!-- Core: Tocas UI -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas/5.0.1/tocas.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas/5.0.1/tocas.min.js"></script>
<!-- Fonts: Noto Sans TC -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet" />
<!-- Enable: Responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">Configuration
Tocas UI uses light and dark themes based on the user's system settings, but you can override this setting.
| Description | |
|---|---|
| is-light | Force using the light theme. |
| is-dark | Force using the dark theme. |
<!-- Add `is-dark` to apply the dark theme to the page -->
<html class="is-dark">Adjust the border radius of the components.
| Size | Description | |
|---|---|---|
| is-sharp | 0rem | No rounded corners. |
| 0.4rem | The default setting in Tocas UI. | |
| is-rounded | 1rem | A more modern, rounded corner look. |
<!-- Add `is-sharp` to remove border radius from all components -->
<html class="is-sharp">