Build custom web-based Suduxu controller layouts using reusable HTML components.

HTML Themes

HTML themes allow you to build custom controller interfaces using standard web technologies.

Unlike XML themes, which are converted into native Android UI components, HTML themes are rendered inside a WebView on the client device. This gives you complete control over layout, styling, animations, and interactions through HTML, CSS, and JavaScript.

How HTML Themes Work

HTML themes run inside a WebView through the Suduxu Client, allowing you to build custom controller interfaces using HTML, CSS, JavaScript, custom styling, animations, and responsive layouts, making them the most flexible theming option available in Suduxu.

HTML themes are ideal when you need highly customized interfaces, advanced layouts, or visual effects that would be difficult to achieve with XML themes.

Suduxu Web Components

Suduxu provides a collection of reusable custom HTML elements that automatically integrate with the Suduxu input system.

Available components:

Component	Purpose
`sdx-button`	Standard button input
`sdx-dpad`	Directional pad
`sdx-joystick`	Analog joystick
`sdx-exit-button`	Exit / back button

These components automatically dispatch Suduxu input events and require significantly less code than building controls from scratch.

Example

<sdx-button button-input="A">
    A
</sdx-button>

<sdx-button button-input="B">
    B
</sdx-button>

Including Components

Include the scripts and stylesheets for the components you want to use.

<script defer src="https://cdn.jsdelivr.net/gh/Suduxu/Suduxu-Web-Themes@v1.0.0-hotfix/dist/sdxbutton.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Suduxu/Suduxu-Web-Themes@v1.0.0-hotfix/dist/sdxbutton.min.css">

Additional components such as the D-Pad, Joystick and Exit Button are available through the same repository.

Component Documentation

Detailed documentation for every component, available attributes, events, and styling options can be found in the official Suduxu Web Themes repository.

The repository contains component documentation, usage examples, event references, styling guides, build instructions, and the complete source code.

Choosing Between HTML and XML Themes

Select the theme format that best matches your UI requirements:

HTML Themes	XML Themes
Web technology integration	Native rendering
Responsive interfaces	Faster theme creation
Advanced styling	Simpler layouts
Full control over rendering	Minimal styling requirements

For most controller layouts, XML themes are usually faster to build. HTML themes become valuable when you need complete visual freedom.

HTML-Themes