Theme object

Available from version 5.4.2.

In AskiaScript, the theme object is a predefined object that contains a list of predefined variables, used to style a page or component within a page, such as an ADX component. It is available everywhere inside the page scope.

This topic covers:

Properties

FontFamily

Available from version 5.4.2.

Returns the theme's font family as a string.

Returns a String.

Example 
{%= Theme.FontFamily %} ' Print: Arial, Helvetica, sans-serif

↑ Top of page ↑

BaseFS

Available from version 5.4.2.

Returns the theme's of the base font size as a string.

Returns a String.

Example 
{%= Theme.BaseFS %} ' Print: 16px

↑ Top of page ↑

LargeFS

Available from version 5.4.2.

Returns the theme's large font size as a string.

Returns a String.

Example 
{%= Theme.LargeFS %} ' Print: 1.5rem

↑ Top of page ↑

NormalFS

Returns the theme's normal font size as a string.

Returns a String.

Example
{%= Theme.NormalFS %} ' Print: 1.05rem

↑ Top of page ↑

SmallFS

Available from version 5.4.2.

Returns the theme's small font size as a string.

Returns a String.

Example 
{%= Theme.SmallFS %} ' Print: 0.85rem

↑ Top of page ↑

LineHeight

Available from version 5.4.2.

Returns the theme's line height as a string.

Returns a String.

Example 
{%= Theme.LineHeight %} ' Print: 1.2

↑ Top of page ↑

BorderWidth

Available from version 5.4.2.

Returns the theme's border width as a string.

Returns a String.

Example 
{%= Theme.BorderWidth %} ' Print: 0.0625em

↑ Top of page ↑

BorderRadius

Available from version 5.4.2.

Returns the theme's border radius as a string.

Returns a String.

Example 
{%= Theme.BorderRadius %} ' Print: 0.1875em

↑ Top of page ↑

HPadding

Available from version 5.4.2.

Returns the theme's horizontal padding as a string.

Returns a String.

Example 
{%= Theme.HPadding %} ' Print: 1.0em

↑ Top of page ↑

VPadding

Available from version 5.4.2.

Returns the theme's vertical padding as a string.

Returns a String.

Example 
{%= Theme.VPadding %} ' Print: 1.0em

↑ Top of page ↑

WhiteColor 

Available from version 5.4.2.

Returns the theme's body back colour as a string.

Returns a String.

Examples

{%= Theme.WhiteColor %} ' Print: 255,255,255,1

{%= Theme.WhiteColor.ToHexa() %} ' Print: #ffffff

↑ Top of page ↑

BlackColor 

Available from version 5.4.2.

Returns the theme's body font colour as a string.

Returns a String.

Examples 
{%= Theme.BlackColor %} ' Print: 34,34,34,1

{%= Theme.BlackColor.ToHexa() %} ' Print: #000000

↑ Top of page ↑

PrimaryColor

Available from version 5.4.2.

Returns the theme's primary colour as a string.

Returns a String.

Example 
{%= Theme.PrimaryColor %} ' Print: 40,59,73,1

↑ Top of page ↑

PrimaryDarkColor

Available from version 5.4.2.

Returns the theme's primary dark colour as a string.

Returns a String.

Example 
{%= Theme.PrimaryDarkColor %} ' Print: 25,39,48,1

↑ Top of page ↑

PrimaryLightColor

Available from version 5.4.2.

Returns the theme's primary light colour as a string.

Returns a String.

Example 
{%= Theme.PrimaryLightColor %} ' Print: 72,101,121,1

↑ Top of page ↑

SecondaryColor

Available from version 5.4.2.

Returns the theme's secondary colour as a string.

Returns a String.

Example 
{%= Theme.SecondaryColor %} ' Print: 223,67,53,1

↑ Top of page ↑

SecondaryDarkColor

Available from version 5.4.2.

Returns the theme's secondary dark colour as a string.

Returns a String.

Example 
{%= Theme.SecondaryDarkColor %} ' Print: 175,36,23,1

↑ Top of page ↑

SecondaryLightColor

Available from version 5.4.2.

Returns the theme's secondary light colour as a string.

Returns a String.

Example 
{%= Theme.SecondaryLightColor %} ' Print: 240,120,109,1

↑ Top of page ↑

NeutralColor

Available from version 5.4.2.

Returns the theme's neutral colour as a string.

Returns a String.

Example 
{%= Theme.NeutralColor %} ' Print: 221,221,221,1

↑ Top of page ↑

NeutralDarkColor

Available from version 5.4.2.

Returns the theme's neutral dark colour as a string.

Returns a String.

Example 
{%= Theme.NeutralDarkColor %} ' Print: 170,170,170,1

↑ Top of page ↑

NeutralLightColor

Available from version 5.4.2.

Returns the theme's neutral light colour as a string.

Returns a String.

Example 
{%= Theme.NeutralLightColor %} ' Print: 238,238,238,1

↑ Top of page ↑

ErrorColor

Available from version 5.4.2.

Returns the theme's error colour as a string.

Returns a String.

Example 
{%= Theme.ErrorColor %} ' Print: 192,57,43,1

↑ Top of page ↑

SuccessColor

Available from version 5.4.6.

Returns the theme's success colour as a string.

Returns a String.

Example 
{%= Theme.SuccessColor %} ' Print: 141,198,63,1

↑ Top of page ↑

Methods

Var(name)

Available from version 5.4.2.

Returns the value of a specific theme variable as a variant.

Returns a Variant.

Parameter
Examples 
{%= Theme.Var("WhiteColor") %} ' Print: 255,255,255,1

{%= Theme.Var("WhiteColor").ToString().ToHexa() %} ' Print: #ffffff

:root {
    font-family : {%= Theme.Var("FontFamily") %};
    font-size   : {%= Theme.Var("BaseFS") %};
}

body  {
    background-color : rgba({%= Theme.Var("WhiteColor")%});
    color 	     : rgba({%= Theme.Var("BlackColor") %});
    margin 	     : 0;
    padding 	     : 0;
}

↑ Top of page ↑

PropValue(name)

Available from version 5.4.2.

Returns a specified property value as a string.

Returns a String.

Parameters
Examples 
{%= Theme.PropValue("WhiteColor") %} ' Print: 255,255,255,1

{%= Theme.PropValue("WhiteColor").ToHexa() %} ' Print: #ffffff

:root {
    font-family : {%= Theme.PropValue("FontFamily") %};
    font-size   : {%= Theme.PropValue("BaseFS") %};
}

body  {
    background-color : rgba({%= Theme.PropValue("WhiteColor")%});
    color 	     : rgba({%= Theme.PropValue("BlackColor") %});
    margin 	     : 0;
    padding 	     : 0;
}

↑ Top of page ↑

ToString()

Returns a string which represents the current theme object (expressed in JSON format).

Returns a String.

Example
' Output in a single line (broken into different lines here for readability)
Theme.ToString() 
' => {
"FontFamily" : "Arial, Helvetica, sans-serif",
"BaseFS" : "16px",
"LargeFS" : "1.5rem"

"NormalFS" : "1.05rem",
"SmallFS" : "0.85rem",
"LineHeight" : "1.2"
"BorderWidth" : "0.0625em",
"BorderRadius" : "0.1875em",
"HPadding" : "1.0em",
"VPadding" : "1.0em",
"WhiteColor" : "255,255,255,1",
"BlackColor" : "34,34,34,1",
"PrimaryColor" : "40,59,73,1",
"PrimaryDarkColor" : "25,39,48,1",
"PrimaryLightColor" : "72,101,121,1",
"SecondaryColor" : "223,67,53,1",
"SecondaryDarkColor" : "175,36,23,1",
"SecondaryLightColor" : "240,120,109,1",
"NeutralColor" : "221,221,221,1",
"NeutralDarkColor" : "170,170,170,1",
"NeutralLightColor" : "238,238,238,1",
"ErrorColor" : "192,57,43,1"
"SuccessColor" : "141,198,63,1"
}

↑ Top of page ↑

TypeOf()

Available from version 5.4.2.

Always returns "theme".

Returns a String.

Example
Theme.TypeOf() ' => "theme"

↑ Top of page ↑

List of theme variables

Because themes can be shared between elements within the page and ADX components, they must have a consistent and predefined list of variables.

Name Type Default value Description
Typography
FontFamily String Arial, Helvetica, sans-serif Font stack in the page
BaseFS Number with unt 16px Base font size of the highest level parent element of the page (:root)
LargeFS Number with unit 1.5rem Large font size (relative to the base font size)
NormalFS Number with unit 1.05rem Normal font size (relative to the base font size)
SmallFS Number with unit 0.85rem Smaller font size (relative to the base font size)
LineHeight Number 1.2 Line height
Borders
BorderWidth Number with unit 0.0625em Base width of the border (relative to the element font size)
BorderRadius Number with unit 0.1875em Base border radius (relative to the element font size)
Paddings
HPadding Number with unit 1.0em Base horizontal padding (relative to the element font size)
VPadding Number with unit 1.0em Base vertical padding (relative to the element font size)
Colors
WhiteColor Color (RGBA) 255,255,255,1 White color
BlackColor Color (RGBA) 34,34,34,1 Black color
PrimaryColor Color (RGBA) 40,59,73,1 Primary color
PrimaryDarkColor Color (RGBA) 25,39,48,1 Primary dark color
PrimaryLightColor Color (RGBA) 72,101,121,1 Primary light color
SecondaryColor Color (RGBA) 223,67,53,1 Secondary color
SecondaryDarkColor Color (RGBA) 175,36,23,1 Secondary dark color
SecondaryLightColor Color (RGBA) 240,120,109,1 Secondary light color
NeutralColor Color (RGBA) 221,221,221,1 Neutral color
NeutralDarkColor Color (RGBA) 170,170,170,1 Neutral dark color
NeutralLightColor Color (RGBA) 238,238,238,1 Neutral light color
ErrorColor Color (RGBA) 192,57,43,1 Error color
SuccessColor Color (RGBA) 141,198,63,1 Success color

 

↑ Top of page ↑

Default theme usage


{%
' Body
Dim theme_body_background = Theme.WhiteColor
Dim theme_body_color = Theme.BlackColor

' Typography
Dim theme_font_family = Theme.FontFamily
Dim theme_font_size_base = Theme.BaseFS
Dim theme_font_size_small = Theme.SmallFS
Dim theme_font_size_large = Theme.LargeFS
Dim theme_font_size_question = Theme.NormalFS
Dim theme_font_size_response = Theme.NormalFS

 ' Borders
Dim theme_border_width = Theme.BorderWidth
Dim theme_border_radius = Theme.BorderRadius

' Paddings
Dim theme_padding_horizontal  = Theme.HPadding
Dim theme_padding_vertical = Theme.VPadding

' Color scheme
Dim theme_color_primary = Theme.PrimaryColor
Dim theme_color_primary_dark = Theme.PrimaryDarkColor
Dim theme_color_primary_light = Theme.PrimaryLightColor
Dim theme_color_secondary = Theme.SecondaryColor
Dim theme_color_secondary_dark = Theme.SecondaryDarkColor
Dim theme_color_secondary_light = Theme.SecondaryLightColor
Dim theme_color_neutral = Theme.NeutralColor
Dim theme_color_neutral_dark = Theme.NeutralDarkColor
Dim theme_color_neutral_light = Theme.NeutralLightColor
Dim theme_color_error = Theme.ErrorColor
Dim theme_color_success = Theme.SuccessColor
%}
/* General page layout
-------------------------- */
:root {
    font-size   :	{%= theme_font_size_base %};
    font-family : 	{%= theme_font_family %};
}

/* ====================
Rules for small devices (smartphones)
==================== */
@media only screen and (max-width: 767px) {
    :root {
        font-size : {%= theme_font_size_base_large %};
    }
}

body {
    background-color : rgba({%= theme_body_background %});
    color		     : rgba({%= theme_body_color %});
    margin 			 : 0;
    padding 	     : 0;
}

/* General questions layout
-------------------------- */

/*  Label of the question  */
.askia-question-label  {
    font-size	   : {%= theme_font_size_question %};
    padding-top    : {%= theme_padding_horizontal %};
    padding-bottom : {%= theme_padding_vertical %};
}

/* Label of the question with error */
.askia-question-label.askia-error {
    color	: rgba({%= theme_color_error %});
}

/* Container of responses */
.askia-control {}

/* Container of responses with error */
.askia-control.askia-error {}

/* Input element in the responses container 
(when no .askia-response: Open-ended, numeric, date-time)*/
.askia-control input[type=text],
.askia-control input[type=number],
.askia-control textarea {
    outline         : none;            
    border-width	: {%= theme_border_width %};
    border-radius	: {%= theme_border_radius %};
}

/* Input element in the responses container with error
(when no .askia-response: Open-ended, numeric, date-time)*/
.askia.control.askia-error input[type=text],
.askia-control.askia-error input[type=number],
.askia-control.askia-error textarea {
    border-color: rgba({%= theme_color_error %});
}

/* Response container */
.askia-response {
    font-size	: {%= theme_font_size_response %};
    padding		: {%= theme_padding_horizontal %} {%= theme_padding_vertical %};
}

/* Label of repsonse */
.askia-response span,
.askia-response label {}

/* Input element in the response container 
(when no .askia-control: Classical responses layout) */
.askia-response input[type=text],
.askia-response input[type=number],
.askia-response textarea {
    outline       : none;            
    border-width  : {%= theme_border_width %};
    border-radius : {%= theme_border_radius %};
}

/* Input element in the responses container with error
(when no .askia-control: Classical responses layout) */
.askia.response.askia-error input[type=text],
.askia-response.askia-error input[type=number],
.askia-response.askia-error textarea {
    border-color: rgba({%= theme_color_error %});
}

/* Part below is used for question tables
----------------------------------------- */

/* Header row of the question table (first row of the table)
┌─────────┬───────┬───────┐
│         │  YES  │   NO  │ <▬▬ Selector of this row
├─────────┼───────┼───────┤
│ Item 1  │   Ø   │   Ø   │
├─────────┼───────┼───────┤
│ Item 2  │   Ø   │   Ø   │
├─────────┼───────┼───────┤
│ Item 3  │   Ø   │   Ø   │
└─────────┴───────┴───────┘
*/
.askia-grid-header {}

/* Top / Left cell of the question table

  Selector of this empty cell
       V
  ┌─────────┬───────┬───────┐
> │         │  YES  │   NO  │ 
  ├─────────┼───────┼───────┤
  │ Item 1  │   Ø   │   Ø   │
  ├─────────┼───────┼───────┤
  │ Item 2  │   Ø   │   Ø   │
  ├─────────┼───────┼───────┤
  │ Item 3  │   Ø   │   Ø   │
  └─────────┴───────┴───────┘
*/
.askia-grid-header td:nth-child(1) {}

/* Column header cell of the question table 

  Selector of YES/NO cells
               V       V
┌─────────┬───────┬───────┐
│         │  YES  │   NO  │ <
├─────────┼───────┼───────┤
│ Item 1  │   Ø   │   Ø   │
├─────────┼───────┼───────┤
│ Item 2  │   Ø   │   Ø   │
├─────────┼───────┼───────┤
│ Item 3  │   Ø   │   Ø   │
└─────────┴───────┴───────┘
*/
.askia-grid-header .askia-response {}

/* Row of the question table 

┌─────────┬───────┬───────┐
│         │  YES  │   NO  │ 
├─────────┼───────┼───────┤
│ Item 1  │   Ø   │   Ø   │   <▬▬ Selector
├─────────┼───────┼───────┤    
│ Item 2  │   Ø   │   Ø   │   <▬▬ of these 
├─────────┼───────┼───────┤
│ Item 3  │   Ø   │   Ø   │   <▬▬ rows
└─────────┴───────┴───────┘
*/
.askia-grid-row {}

/* Row of the question table with error */
.askia-grid-row.askia-error {}

/* Row header cell of the question table 

Selector of Item 1/ Item 2/ Item 3 cells
    V
  ┌─────────┬───────┬───────┐
  │         │  YES  │   NO  │ 
  ├─────────┼───────┼───────┤
> │ Item 1  │   Ø   │   Ø   │ 
  ├─────────┼───────┼───────┤    
> │ Item 2  │   Ø   │   Ø   │   
  ├─────────┼───────┼───────┤
> │ Item 3  │   Ø   │   Ø   │   
  └─────────┴───────┴───────┘
*/
.askia-grid-row .askia-question-label {
    font-size	: {%= theme_font_size_response %};
    padding		: {%= theme_padding_horizontal %} {%= theme_padding_vertical %};
}

/* Response cell of the question table 

┌─────────┬───────┬───────┐
│         │  YES  │   NO  │ 
├─────────┼───────┼───────┤
│ Item 1  │   Ø   │   Ø   │   <▬▬ Selector
├─────────┼───────┼───────┤    
│ Item 2  │   Ø   │   Ø   │   <▬▬ of responses
├─────────┼───────┼───────┤
│ Item 3  │   Ø   │   Ø   │   <▬▬ items cells
└─────────┴───────┴───────┘
              ^       ^
*/
.askia-grid-row .askia-response {}

↑ Top of page ↑

Create your own Knowledge Base