[F/OS] ThMLT [v3.0.0] + Chrome Extension

hridoyhb · May 8, 2024, 12:42am

🧩 ThMLT

Specifications

ThMLT (Theme & Multilanguage Translation) is an advanced extension for App Inventor 2 (AI2) that streamlines theme management (colors & fonts) and enables seamless multilanguage support across your AI2 project.

Overview

Blocks

Methods

`Initialize`

Purpose: Initializes and loads data for color themes, fonts, and translations.

Initialize_Method

Parameter	Type
colorThemes	text
fonts	text
translations	text

Need help configuring your Translations, Fonts, or Colors?

Follow the official Data Configuration Guide → to set up your JSON schemas correctly.

`ApplyFormatting`

Purpose: Applies formatting to a layout using the active theme and language.

ApplyFormatting_Method

Parameter	Type
layout	component

`ApplyCustomizedFormatting`

Purpose: Applies formatting to a layout using a specific theme and language.

ApplyCustomizedFormatting_Method

Parameter	Type
layout	component
themeMode	text
languageCode	text

`Get`

Purpose: Retrieves a list of values for a given data category.

Get_Method

Parameter	Type
data	All _{(helper enums)}

Return: list
Why: Returns the complete list of items for enums like PrimitiveKeys, SemanticKeys, ThemeModes, FontTags, FontShortTags, TranslationKeys, SupportedLanguages.

`GetTranslation`

Purpose: Returns a translation for a given key using the active language.

GetTranslation_Method

Parameter	Type
translationKey	text

Return: text
Why: Returns the corresponding translation string, or Not Found if missing.

`GetFont`

Purpose: Returns a font name for a given key using the tag.

GetFont_Method

Parameter	Type
tag	text

Return: text
Why: Returns the corresponding font name, or Font not found if missing.

`GetTranslationForLanguage`

Purpose: Returns a translation for a key in a specific language.

GetTranslationForLanguage_Method

Parameter	Type
translationKey	text
languageCode	text

Return: text
Why:

Returns the translation string if found.
Returns Not Found if the key is missing.
Returns 'languageCode' is not supported if the languageCode is invalid.

`GetPrimitiveColor`

Purpose: Retrieves a primitive color as an integer value.

GetPrimitiveColor_Method

Parameter	Type
key	text

Return: number
Why:

Returns the integer color value if key exists.
Returns -1 if not found (error condition).

`GetSemanticColorSource`

Purpose: Retrieves the source reference of a semantic color for the active theme.

GetSemanticColorSource_Method

Parameter	Type
key	text

Return: text
Why:

Returns the primitive color key.
Returns a detailed error if the theme or key doesn't exist.

`GetSemanticColor`

Purpose: Retrieves a semantic color value (int) for the active theme mode.

GetSemanticColor_Method

Parameter	Type
key	text

Return: number
Why:

Returns resolved color as int if found.
Returns -1 if theme mode or color key is invalid.

`GetSemanticColorByThemeMode`

Purpose: Retrieves a semantic color value for a specific theme mode.

GetSemanticColorByThemeMode_Method

Parameter	Type
key	text
themeMode	text

Return: number
Why:

Returns resolved color as int if key exists in the given mode.
Returns -1 for missing theme/key.

Properties

`Setters`

`FontRegular`

Sets the regular font.

FontRegular_Set_Property

Input	Type
font	text

`FontBold`

Sets the bold font.

FontBold_Set_Property

Input	Type
font	text

`FontMaterial`

Sets the material icon font.

FontMaterial_Set_Property

Input	Type
font	text

`ColorPrimary`

Sets the primary color.

ColorPrimary_Set_Property

Input	Type
color	number

`ColorSecondary`

Sets the secondary color.

ColorSecondary_Set_Property

Input	Type
color	number

`ColorAccent`

Sets the accent color.

ColorAccent_Set_Property

Input	Type
color	number

`Language`

Sets the active translation language.

Language_Set_Property

Input	Type
code	text

`ThemeMode`

Sets the active theme mode (e.g., light, dark).

ThemeMode_Set_Property

Input	Type
mode	text

`Getters`

`FontRegular`

Gets the regular font.

FontRegular_Get_Property

Return	Type
font	text

`FontBold`

Gets the bold font.

FontBold_Get_Property

Return	Type
font	text

`FontMaterial`

Gets the material font.

FontMaterial_Get_Property

Return	Type
font	text

`ColorPrimary`

Gets the primary color.

ColorPrimary_Get_Property

Return	Type
color	number

`ColorSecondary`

Gets the secondary color.

ColorSecondary_Get_Property

Return	Type
color	number

`ColorAccent`

Gets the accent color.

ColorAccent_Get_Property

Return	Type
color	number

`Language`

Gets the current language code.

Language_Get_Property

Return	Type
code	text

`ThemeMode`

Gets the current theme mode.

ThemeMode_Get_Property

Return	Type
mode	text

Events

ErrorOccurred

Occurs when an error happens

ErrorOccurred_Event

Parameter	Type
errorFrom	text
error	text

Usage

Get started with ThMLT in just 3 simple steps — initialize once, format anywhere, and apply your style across the app.

Initialize ThMLT (One-Time Setup)

Set up ThMLT with a single block — no repeated calls needed.

Use the Initialize block on any screen (commonly Screen1). ThMLT handles global data sync across all screens automatically.

Best Practice: Call it inside the Screen.Initialize block for consistent behavior across the app.

Initialize_Method_On_Screen_Initialize

Need help configuring your Fonts, Colors, or Translations?

Follow the official Data Configuration Guide → to set up your JSON schemas correctly.

Format Your TextViews with Style

Use ThMLT's format syntax to apply translation, font, and color in one go — directly within a text string.

[tag1,tag2,tag3]Visible Fallback Text

Example

[name,regular,label]Welcome Back!

Tag	Purpose
`name`	Translation key (from your translations JSON)
`regular`	Font tag (matches `shortFontTag` in your Fonts JSON)
`label`	Semantic color key (from your Themes JSON's `Semantic` section)
`Welcome Back!`	Visible fallback text if translation fails or `#` is used

Partial Formatting Control with `#`

You can skip specific formatting layers by using # in any of the tag slots inside your [tag1,tag2,tag3] syntax.

[#,#,#]Text

Each # tells ThMLT to ignore that particular formatting layer:

Tag Position	Meaning	Example	Result
1st (`#`)	Skip Translation	`[#,bold,label]Hello`	Won’t translate; applies font & color. Applies fallback text
2nd (`#`)	Skip Font	`[greeting,#,label]Hi`	Uses translation & color, skips font
3rd (`#`)	Skip Color	`[greeting,bold,#]Hi`	Applies translation & font, no color

[#,regular,label]Welcome Back!
Skips translation → keeps visible text → applies font + color.

This gives you fine-grained control over how text is styled — even dynamically.

Apply Formatting Block

Use the ApplyFormatting block to automatically scan all TextViews inside an Arrangement and apply formatting wherever the syntax is detected.

ApplyFormattingBlock

How it works:

Loops through all text components

Detects text components that starts with [tag1,tag2,tag3] patterns

Applies font, color, and translation instantly

Important Notice

Version 3.0.0 introduces significant breaking changes. Please follow this guide carefully to avoid project breaking issues.

Use chrome extension

Features

Streamlined Project Control: Create, manage, and review projects effortlessly
Intelligent Color Management: Define primitives, map semantics, and switch theme modes to ensure consistent, flexible design
Easy JSON Export: Share project data with a single click
Text Formatter: Edit texts directly from AI2 Builder
Project Management: Import/export JSON data and manage multiple projects

Video Tutorial

v1

V1 - com.hridoy.thmlt.aix (13.0 KB)
AIA - ThMLT_Test.aia (267.6 KB)

v2

Blocks Added

Bug Fixes

Formatting not working in apk. It's fixed now

v2.1

AIX :
com.hridoy.thmlt.aix (10.3 KB)

AIA : ThMLT_V2_1.aia (269.3 KB)

v3.0.0 Latest

AIX: com.hridoy.thmlt.aix (26.7 KB)
AIA: ThMLT_3_0_0.aia (317.4 KB)

Open Source

Chrome Extension source

hridoyhb · June 12, 2024, 5:48pm

Update - V2

Blocks Added

Bug Fixes

Formatting not working in apk. It's fixed now

Pal_Csanyi · May 12, 2025, 7:51am

Hello!

I would like to use this extension and have a question about the json file.

Can I upload my json file into my project and use it from there with the call ThMLT1.Initialize block at translation files socket?

--
Best, Pál

hridoyhb · May 14, 2025, 6:38am

For now it only takes json string as a parameter. JSON file support will come in v3. And v3 will have breaking changes.

And to manage colors easily im developing a chrome extension that will visualize colors and themes like figma.

hridoyhb · June 5, 2025, 12:37pm

ThMLT Extension v3.0.0 Release Announcement

ThMLT Extension v3.0.0 is here!

Big changes, better performance, and cleaner code.

What’s new?

Simplified initialization
Smarter translation blocks
Advanced color theming (primitive, semantic, and theme-aware)
Property-based language management
Improved formatting methods

Heads up: This is a breaking update. Follow the upgrade guide carefully to avoid issues.

Get started with the beta, update your blocks, test thoroughly, then switch to the final release.

Happy coding!
— Hridoy

[F/OS] ThMLT [v3.0.0] + Chrome Extension

🧩 ThMLT

Specifications

Overview

Blocks

Initialize

ApplyFormatting

ApplyCustomizedFormatting

Get

GetTranslation

GetFont

GetTranslationForLanguage

GetPrimitiveColor

GetSemanticColorSource

GetSemanticColor

GetSemanticColorByThemeMode

Setters

FontRegular

FontBold

FontMaterial

ColorPrimary

ColorSecondary

ColorAccent

Language

ThemeMode

Getters

FontRegular

FontBold

FontMaterial

ColorPrimary

ColorSecondary

ColorAccent

Language

ThemeMode

ErrorOccurred

Usage

Initialize ThMLT (One-Time Setup)

Format Your TextViews with Style

Example

Partial Formatting Control with #

Apply Formatting Block

Important Notice

Use chrome extension

Features

Video Tutorial

ThMLT Extension v3.0.0 Release Announcement

`Initialize`

`ApplyFormatting`

`ApplyCustomizedFormatting`

`Get`

`GetTranslation`

`GetFont`

`GetTranslationForLanguage`

`GetPrimitiveColor`

`GetSemanticColorSource`

`GetSemanticColor`

`GetSemanticColorByThemeMode`

`Setters`

`FontRegular`

`FontBold`

`FontMaterial`

`ColorPrimary`

`ColorSecondary`

`ColorAccent`

`Language`

`ThemeMode`

`Getters`

`FontRegular`

`FontBold`

`FontMaterial`

`ColorPrimary`

`ColorSecondary`

`ColorAccent`

`Language`

`ThemeMode`

Partial Formatting Control with `#`