Theme

The ty-theme is a versatile custom component designed for theme management. Powered by the Material Design 3 Color utility, it ensures that the generated theme colors adhere to high contrast standards, promoting better accessibility. The component offers users the capability to toggle between light and dark modes and allows customization of the primary theme color. This ensures a personalized user experience adapted to individual preferences.

Usage

To use the ty-theme, simply include it in your HTML. The component provides a color input for theme customization and a button to toggle between light and dark modes.

Live Editor

<div>
  <ty-button>
    <span class="material-icons md-18">star</span>
    Fill Button
  </ty-button>
  <ty-checkbox value="agree" checked> Check Me!</ty-checkbox>

  <ty-radio-group direction="column">
    <ty-radio name="option" value="option1"> Option 1</ty-radio>
    <ty-radio name="option" value="option2" checked> Option 2</ty-radio>
  </ty-radio-group>

  <ty-text variant="label">Choose Theme Color</ty-text>
  <ty-theme color-toggle="true"></ty-theme>
</div>

Result

Loading...

API

Properties

The ty-theme component accepts the following properties:

Name	Description	Type	Default
color	Specifies the primary theme color.	string	'#83254c'
modeToggle	Boolean value indicating if the theme toggle button is shown.	boolean	false
colorToggle	Boolean value indicating if the color toggle button is shown.	boolean	false
mode	Represents the current theme mode (light or dark).	'light' | 'dark'	'light'

Events

ty-radio-group

Name	Description	Detail
ty-change	Fires when the toggle changes	{ value: string }