New Theming in GSv6

With GSv6 Web 5250 Terminal, color theming is easier than ever.

One of the common questions from our customers was to help them customize the terminal color scheme according to their environment such as PROD/DEV/TEST etc.

Now, in GSv6 without IE support, we can utilize all CSS features available. Terminal CSS for GSv6 is based on SCSS with CSS variables and smart variable overloading.

To learn how that simple but effective principle works, take a look below.

Set custom themes

To modify terminal colors, simply generate a custom list of CSS variables with desired color mappings.

Example: If the theme is called "mono"...

[data-gs-theme=mono] {
    --gs-term-background: #404040;
    --gs-term-green: #f5f5f5;
    --gs-term-white: #f5f5f5;
    --gs-term-red: #f5f5f5;
    --gs-term-blue: #f5f5f5;
    --gs-term-pink: #f5f5f5;
    --gs-term-yellow: #f5f5f5;
    --gs-term-turq: #f5f5f5;
    --gs-oia-background: #404040;
    --gs-oia-color: #f5f5f5;
    --gs-oia-border-color: #f5f5f5;
    --gs-oia-info-background: #404040;
    --gs-oia-info-color: #f5f5f5;
}

...we can activate it from browser Terminal API

Tn5250.Theme.setTheme('mono');

NOTE: Multiple custom themes as shown in the example above can be created and saved in a single CSS file which can be inserted into a web terminal through a Green Screens Web Admin console. Themes will be automatically loaded when web terminal starts.

Loaded custom themes can be set programmatically through a simple script injected into the web terminal through a Green Screens Web Admin console.

For example, we can create themes named by IBM i connection group (UUID) and virtual host name (HOST) used simply as these values are programmatically available from within Terminal API.

If we create a configuration named UUID:DEMO, HOST:PROD and UUID:DEMO, HOST:DEV; we can create themes named demo_prod and demo_dev.

[data-gs-theme=demo_prod] {
    --gs-term-background: #30164b;
    --gs-term-green: #ff7b00;
    --gs-term-white: #ff7b00;
    --gs-term-red: #ff7b00;
    --gs-term-blue: #ff7b00;
    --gs-term-pink: #ff7b00;
    --gs-term-yellow: #ff7b00;
    --gs-term-turq: #ff7b00;
    --gs-oia-color: #ff7b00;
    --gs-oia-background: #30164b;
    --gs-oia-border-color: #ff7b00;
    --gs-oia-info-background: #ff7b00;
    --gs-oia-info-color: #30164b; 
}

[data-gs-theme=demo_dev] {
    --gs-term-background: #404040;
    --gs-term-green: #f5f5f5;
    --gs-term-white: #f5f5f5;
    --gs-term-red: #f5f5f5;
    --gs-term-blue: #f5f5f5;
    --gs-term-pink: #f5f5f5;
    --gs-term-yellow: #f5f5f5;
    --gs-term-turq: #f5f5f5;
    --gs-oia-background: #404040;
    --gs-oia-color: #f5f5f5;
    --gs-oia-border-color: #f5f5f5;
    --gs-oia-info-background: #404040;
    --gs-oia-info-color: #f5f5f5;
}

And a simple script to autoload theme based on currently connected environment.

window.addEventListener('greenscreens', ()=> {
	const theme = `${Tn5250.Application.uuid}_${Tn5250.Application.host}`;
	Tn5250.Theme.setTheme(theme.toLowerCase());
});

'greenscreens' global event is fired as soon as terminal session starts. In the script above, we are watching for that event and activating the theme based on the active IBM i host connection.