Home›Docs›Basic›Twilight Component

Twilight Component

Last updated: 4 months ago

Category: Basic

The twilight component enables global dark mode switching for the entire page, and also supports localized dark mode toggling.

Twilight Component4 months ago

Introduction

Modern web devices generally support dark mode switching, primarily through two methods:

Automatically detecting the user's browser dark mode preference via the prefers-color-scheme media query and updating global CSS variables
Manually toggling dark mode by setting the dark attribute or scheme=dark attribute on the root node to modify global CSS variables

The first method is fully automatic unless the user disables browser dark mode. The second is manual, toggled via button. Both have advantages and can be used together.

Toggle Button

This framework provides a twilight toggle button specifically for dark mode switching.

Simply insert an oc-twilight node. Clicking it will add the scheme=dark attribute to the body node to enable dark mode.

Output
HTML

```
                
                
            
```

Sizes

Set button size via the size attribute with three options: sm (18px height), md (24px height, default), and lg (32px height).

Output
HTML

```
                
                
            
```

Simplified Button

Use the feature attribute to simplify the button:

feature=icon: Removes label node, keeping only the icon
feature=plain: Keeps only the icon, removing label, background and border

Output
HTML

```
                
                
            
```

Specifying Root Node

Set the target attribute to specify which node receives the scheme attribute (uses node selector). If not found, defaults to body.

Output
HTML

```
                
                
            
```

Modifying Text

Default text is day and night. Modify via labels attribute as labels="day,night".

Output
HTML

```
                
                
            
```

Attributes

Name	Values	Default	Description
target	''/-	-	Target node selector
feature	'icon'/'plain'/''	-	Style variant
size	'sm'/'md'/'lg'/''/-	-	Size
labels	''	-	Label text (comma-separated)

Common Methods

Common component methods:

set: Set properties (takes key-value pairs or array)
reset: Reset properties (no params)
clear: Clear properties and values (no params)

Basic usage: CompElem.reset()

Common Events

Common component events:

connected: Component connected (no params)
disconnected: Component disconnected (no params)
adopted: Component moved (no params)
set: Property set (receives value)
cleared: Property cleared (no params)
reset: Property reset (no params)

Basic usage: CompElem.on('connected',()=>{console.log('connected')})

Tags: Native, Vanilla, Web Components

Pill Component: More Examples of Styles, Methods, and Event Operations

4 months ago

Checkbox Component