### WUIPluginThemes - HTML/CSS Setup
Source: https://context7.com/wui-js/wuijs-plugins-lib/llms.txt
Example HTML structure and CSS imports for integrating WUIPluginThemes.
```APIDOC
## WUIPluginThemes - Theme Setup (HTML/CSS)
### Description
Complete HTML structure and CSS imports required for WUIPluginThemes integration.
### Method
N/A
### Endpoint
N/A
### Parameters
None
### Request Example
```html
```
### Response
None
```
--------------------------------
### Complete Integration Example
Source: https://context7.com/wui-js/wuijs-plugins-lib/llms.txt
A full HTML/CSS/JS example demonstrating WUIPluginSelector integrated with WUIPluginThemes for a priority level selection.
```html
Select Priority Level
Selected: None
```
--------------------------------
### Installation Instructions
Source: https://github.com/wui-js/wuijs-plugins-lib/blob/main/README.md
Instructions for installing the WUI/JS Plugins library either from source or via npm.
```APIDOC
## Installation
### Option 1: Install from source
Clone the official GitHub repository and copy the library to your project's source directory.
```bash
git clone https://git@github.com/wui-js/wuijs-plugins-lib.git
cp -r ./wuijs-plugins-lib/src/wui-js/ ../src/libraries/
```
Alternatively, download as a ZIP file:
```bash
wget https://github.com/wui-js/wuijs-plugins-lib/archive/refs/heads/main.zip
unzip main.zip
cp -r ./wuijs-plugins-lib/src/wui-js/ ../src/libraries/
```
**Tip:** It is recommended to place the `/plugins` directory in the same location as the main library `/main`.
### Option 2: Install via npm
Install the library using npm:
```bash
npm i @wui-js/plugins
```
The resources will be available in the `./node_modules/@wui-js/plugins` directory.
```
--------------------------------
### Installation
Source: https://github.com/wui-js/wuijs-plugins-lib/blob/main/docs/README-en.md
Instructions for installing the WUI/JS Plugins library.
```APIDOC
## Installation
### Option 1: Install from source
Clone the official GitHub repository (`wui-js/wuijs-plugins-lib`) and copy the `wui-js` directory to your project's source libraries.
```bash
git clone https://git@github.com/wui-js/wuijs-plugins-lib.git
cp -r ./wuijs-plugins-lib/src/wui-js/ ../src/libraries/
```
Alternatively, download as a ZIP file:
```bash
wget https://github.com/wui-js/wuijs-plugins-lib/archive/refs/heads/main.zip
unzip main.zip
cp -r ./wuijs-plugins-lib/src/wui-js/ ../src/libraries/
```
> **TIP**: It is recommended that the `/plugins` directory be located in the same directory as the main library `/main`.
### Option 2: Install via npm
Install the library using npm:
```bash
npm i @wui-js/plugins
```
The resources will be available in the `./node_modules/@wui-js/plugins` directory.
```
--------------------------------
### WUIPluginThemes HTML and CSS Setup
Source: https://context7.com/wui-js/wuijs-plugins-lib/llms.txt
Complete HTML structure and CSS/JS imports required for integrating WUIPluginThemes. Includes basic body styling and a theme toggle switch example.
```html
```
--------------------------------
### Install WUI/JS Plugins Library via npm
Source: https://github.com/wui-js/wuijs-plugins-lib/blob/main/README.md
Install the WUI/JS Plugins library using npm. This is the recommended method for integrating the library into your project. The resources will be available in the node_modules directory.
```bash
npm i @wui-js/plugins
```
--------------------------------
### Download and Install WUI/JS Plugins Library via ZIP
Source: https://github.com/wui-js/wuijs-plugins-lib/blob/main/README.md
Download the WUI/JS Plugins library as a ZIP archive and extract it. This method is an alternative to cloning from the repository. Ensure you have wget and unzip installed.
```bash
wget https://github.com/wui-js/wuijs-plugins-lib/archive/refs/heads/main.zip
unzip main.zip
cp -r ./wuijs-plugins-lib/src/wui-js/ ../src/libraries/
```
--------------------------------
### Instantiate WUIPluginThemes and Get Version
Source: https://context7.com/wui-js/wuijs-plugins-lib/llms.txt
Instantiate the themes plugin and check its version. Requires WUIPluginThemes to be loaded.
```javascript
// Instantiate the themes plugin
const themes = new WUIPluginThemes();
// Check the class version
console.log(WUIPluginThemes.version); // "0.4"
```
--------------------------------
### Clone Existing Theme
Source: https://github.com/wui-js/wuijs-plugins-lib/blob/main/README.md
Use this script to clone an existing theme and create a new one as a starting point. It sets up the necessary files and updates selectors.
```bash
python clone-theme.py -n my-theme
```
--------------------------------
### Clone WUI/JS Plugins Library from Source
Source: https://github.com/wui-js/wuijs-plugins-lib/blob/main/README.md
Use this command to clone the WUI/JS Plugins library from its GitHub repository. Ensure you have git installed and are in the correct directory before running.
```bash
git clone https://git@github.com/wui-js/wuijs-plugins-lib.git
cp -r ./wuijs-plugins-lib/src/wui-js/ ../src/libraries/
```
--------------------------------
### Basic CSS Structure
Source: https://github.com/wui-js/wuijs-plugins-lib/blob/main/README.md
Standard CSS for HTML and body elements, often included as a base for theming. No specific setup required beyond standard CSS inclusion.
```css
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
nav {
display: flex;
margin: 10px;
align-items: center;
gap: 10px;
}
```
--------------------------------
### WUIPluginThemes: Get Current Scheme
Source: https://github.com/wui-js/wuijs-plugins-lib/blob/main/README.md
Retrieves the operating system's preferred color scheme. This method is useful for understanding user preferences independent of application settings.
```javascript
getScheme()
getCurrentScheme()
getTheme()
```
--------------------------------
### Get Operating System Preferred Scheme
Source: https://github.com/wui-js/wuijs-plugins-lib/blob/main/docs/README-en.md
Returns the operating system's preferred color scheme, irrespective of the application's configured scheme. This is useful for respecting user preferences.
```javascript
getCurrentScheme()
```
--------------------------------
### Instantiate WUIPluginSelector (Basic)
Source: https://context7.com/wui-js/wuijs-plugins-lib/llms.txt
Create a new WUIPluginSelector instance with essential configuration options like the selector target, accept button text, and cancel button text.
```javascript
// Basic instantiation
const selector = new WUIPluginSelector({
selector: ".wui-modal.my-selector",
acceptText: "Accept",
cancelText: "Cancel"
});
```
--------------------------------
### Instantiate WUIPluginSelector (Full Configuration)
Source: https://context7.com/wui-js/wuijs-plugins-lib/llms.txt
Create a WUIPluginSelector instance with a comprehensive set of configuration options, including multiple selection, text separators, empty state text, and visibility/data for accept and cancel buttons.
```javascript
// Full configuration
const selector = new WUIPluginSelector({
selector: ".wui-modal.my-selector",
multiple: false,
separatorValue: ",",
separatorText: ", ",
emptyText: "— Select —",
selecteableText: false,
acceptText: "OK",
cancelText: "Cancel",
acceptVisible: true,
cancelVisible: true,
acceptData: { key: "buttons.accept" },
cancelData: { key: "buttons.cancel" }
});
console.log(WUIPluginSelector.version); // "0.3"
```
--------------------------------
### Get Active Theme Name
Source: https://context7.com/wui-js/wuijs-plugins-lib/llms.txt
Retrieve the name of the currently active theme. This is determined by the `--wuiplugin-theme-name` CSS variable set on `document.body`.
```javascript
const themes = new WUIPluginThemes();
// Get the current active theme
const themeName = themes.getTheme();
console.log(themeName); // "default"
```
--------------------------------
### Get Current Color Scheme
Source: https://github.com/wui-js/wuijs-plugins-lib/blob/main/docs/README-en.md
Retrieves the value of the CSS `color-scheme` property from the `` element. This method is useful for understanding the currently applied scheme.
```javascript
getScheme()
```
--------------------------------
### WUIPluginSelector init()
Source: https://context7.com/wui-js/wuijs-plugins-lib/llms.txt
Builds the internal HTML structure and initializes the modal with accept and cancel buttons. This method must be called after instantiation to prepare the selector for use.
```APIDOC
## WUIPluginSelector init()
### Description
Builds the internal HTML structure and initializes the modal with accept and cancel buttons.
### Method
`selector.init()`
### Parameters
None
### Request Example
```javascript
const selector = new WUIPluginSelector({
selector: ".wui-modal.my-selector",
acceptText: "Accept",
cancelText: "Cancel"
});
// Initialize the selector (builds HTML structure)
selector.init();
```
### Response
#### Success Response (200)
- **void** - This method does not return a value.
```
--------------------------------
### Get Active Theme Name
Source: https://github.com/wui-js/wuijs-plugins-lib/blob/main/docs/README-en.md
Returns the name of the currently active theme based on the CSS classes applied to the `document.body`. This helps in identifying the active theme.
```javascript
getTheme()
```
--------------------------------
### Include Theme Plugin and Settings CSS
Source: https://github.com/wui-js/wuijs-plugins-lib/blob/main/docs/README-en.md
Link necessary CSS files for dynamic theme switching via JS. Ensure the correct paths for the main switch, themes plugin, and theme settings are used.
```html
```
--------------------------------
### Initialize Theme and Switcher with JS
Source: https://github.com/wui-js/wuijs-plugins-lib/blob/main/README.md
JavaScript code to initialize the WUIPluginThemes and WUISwitch components. The `onChange` callback dynamically sets the theme scheme based on the switch state.
```javascript
const init = () => {
const themes = new WUIPluginThemes();
const switchbox = new WUISwitch({
selector: ".wui-switch.my-switch",
value: "1",
activated: false,
onChange: (value, activated) => {
themes.setScheme(activated ? "dark" : "light");
}
});
switchbox.init();
}
window.addEventListener("DOMContentLoaded", init);
```
--------------------------------
### WUIPluginSelector Constructor and Properties
Source: https://github.com/wui-js/wuijs-plugins-lib/blob/main/README.md
Details on how to instantiate WUIPluginSelector and its configurable properties.
```APIDOC
## WUIPluginSelector API
### Constructor
`WUIPluginSelector([properties])`
- **properties**: `object` *optional* - An object containing initial property settings.
### Class Properties
- **version** (`string`): Plugin version.
### Instance Properties
- **value** (`string`): (get/set) Current selected value. In multiple selection mode, values are joined with `separatorValue`.
- **options** (`array`): (get/set) Array of option objects. See structure in the implementation section.
- **multiple** (`boolean`): (get/set) Indicates whether multiple selection is enabled. Affects how the linked `