Docs

Documentation

Settings

Dashboard

Edit child theme info

Status & Tools

Debugger

Debugger options

How to debug

Maintenance mode

Designer

SCSS Compiler options

Global variables

Developer

Assets enqueue

Custom post types

Taxonomies

Custom fields

Customizer

Page preloader

Admin panel

Login page

Code editor

Code editor

Functions and variables

Help

Help center

Code snippets

Developers

Get on Gumroad

Global variables

Global variables

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Colors

Add & edit global color variables to use in customizer and child theme custom files code.
Optionally add automated color shades (light & dark versions) and complementary color.

On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global colors variables with custom files code:
Related custom files:
SCSS _colors.scss/custom/scss/_colors.scss
Partial SCSS for global variables.: Colors.
Type: SCSS
Size: 664 B
Modified: 2026/07/16 11:21:42
Open file in new tab
Related theme mods:
dct_variables_colors
Global variables list created with designer generator.
Global variables: Colors dct_variables_colors 2
{
    "advanced": false,
    "options": [
        {
            "name": "primary",
            "value": "#3fa6a5",
            "shade": 30,
            "complementary": true,
            "versions": {
                "base": "#3fa6a5",
                "dark": "#2a6e6d",
                "darker": "#153736",
                "light": "#6bc6c5",
                "lighter": "#a2dbda",
                "comp": "#a63f40"
            }
        }
    ]
}

Colors

Switch to advanced mode

Add & edit global color variables to use in customizer and child theme custom files code.
Optionally add automated color shades (light & dark versions) and complementary color.

On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global colors variables with custom files code:
Related custom files:
SCSS _colors.scss/custom/scss/_colors.scss
Partial SCSS for global variables.: Colors.
Type: SCSS
Size: 664 B
Modified: 2026/07/16 11:21:42
Open file in new tab
Related theme mods:
dct_variables_colors
Global variables list created with designer generator.
Global variables: Colors dct_variables_colors 2
{
    "advanced": false,
    "options": [
        {
            "name": "primary",
            "value": "#3fa6a5",
            "shade": 30,
            "complementary": true,
            "versions": {
                "base": "#3fa6a5",
                "dark": "#2a6e6d",
                "darker": "#153736",
                "light": "#6bc6c5",
                "lighter": "#a2dbda",
                "comp": "#a63f40"
            }
        }
    ]
}

No variables found.

1
Color variable with shades variations.

primary_darker
#153736

primary_dark
#2a6e6d

primary
#3fa6a5

primary_light
#6bc6c5

primary_lighter
#a2dbda

primary_comp
#a63f40

Delete
0 
Color variable with shades variations.
color-name_darker
color-name_dark
color-name
color-name_light
color-name_lighter
color-name_comp
Delete
 Colors
Switch to basic mode
 
Add & edit global color variables to use in customizer and child theme custom files code.
Optionally add automated color shades (light & dark versions) and complementary color.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global colors variables with custom files code:
Related custom files:
 SCSS _colors.scss/custom/scss/_colors.scss
Partial SCSS for global variables.: Colors.
Type: SCSS
Size: 664 B
Modified: 2026/07/16 11:21:42
 Open file in new tab
Related theme mods:
dct_variables_colors
Global variables list created with designer generator.
 Global variables: Colors dct_variables_colors 2
{
    "advanced": false,
    "options": [
        {
            "name": "primary",
            "value": "#3fa6a5",
            "shade": 30,
            "complementary": true,
            "versions": {
                "base": "#3fa6a5",
                "dark": "#2a6e6d",
                "darker": "#153736",
                "light": "#6bc6c5",
                "lighter": "#a2dbda",
                "comp": "#a63f40"
            }
        }
    ]
}
File: 
 SCSS _colors.scss/custom/scss/_colors.scss
Partial SCSS for global variables.: Colors.
Type: SCSS
Size: 664 B
Modified: 2026/07/16 11:21:42
 Open file in new tab
Toggle editor find & replace panel.
Hotkeys: CTRL + F to open, ESC to close
Copy editor contents to clipboard.
Toggle editor light/dark theme.
Currently using basic mode.
Updating the generator in advanced mode will overwrite basic mode generator options code.

















Fonts





Add & edit global fonts variables to use in child theme custom files code.
Optionally add @import rule on top of SCSS code, useful if font is not already imported.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global fonts variables with custom files code:
Related custom files:
 SCSS _fonts.scss/custom/scss/_fonts.scss
Partial SCSS for global variables.: Fonts.
Type: SCSS
Size: 177 B
Modified: 2026/07/16 10:30:38
 Open file in new tab
Related theme mods:
dct_variables_fonts
Global variables list created with designer generator.
 Global variables: Fonts dct_variables_fonts 2
{
    "options": [],
    "advanced": false
}





 Fonts
Switch to advanced mode
 
Add & edit global fonts variables to use in child theme custom files code.
Optionally add @import rule on top of SCSS code, useful if font is not already imported.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global fonts variables with custom files code:
Related custom files:
 SCSS _fonts.scss/custom/scss/_fonts.scss
Partial SCSS for global variables.: Fonts.
Type: SCSS
Size: 177 B
Modified: 2026/07/16 10:30:38
 Open file in new tab
Related theme mods:
dct_variables_fonts
Global variables list created with designer generator.
 Global variables: Fonts dct_variables_fonts 2
{
    "options": [],
    "advanced": false
}
No variables found.
0 
Font with @import.
Add @import url code if needed:: @import url("https://fonts.googleapis.com/css2?family=PT+Sans&display=swap");
Delete
 Fonts
Switch to basic mode
 
Add & edit global fonts variables to use in child theme custom files code.
Optionally add @import rule on top of SCSS code, useful if font is not already imported.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global fonts variables with custom files code:
Related custom files:
 SCSS _fonts.scss/custom/scss/_fonts.scss
Partial SCSS for global variables.: Fonts.
Type: SCSS
Size: 177 B
Modified: 2026/07/16 10:30:38
 Open file in new tab
Related theme mods:
dct_variables_fonts
Global variables list created with designer generator.
 Global variables: Fonts dct_variables_fonts 2
{
    "options": [],
    "advanced": false
}
File: 
 SCSS _fonts.scss/custom/scss/_fonts.scss
Partial SCSS for global variables.: Fonts.
Type: SCSS
Size: 177 B
Modified: 2026/07/16 10:30:38
 Open file in new tab
Toggle editor find & replace panel.
Hotkeys: CTRL + F to open, ESC to close
Copy editor contents to clipboard.
Toggle editor light/dark theme.
Currently using basic mode.
Updating the generator in advanced mode will overwrite basic mode generator options code.

















Sizes





Add & edit global sizes variables to use in child theme custom files code.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global sizes variables with custom files code:
Related custom files:
 SCSS _sizes.scss/custom/scss/_sizes.scss
Partial SCSS for global variables.: Sizes.
Type: SCSS
Size: 177 B
Modified: 2026/07/16 10:30:38
 Open file in new tab
Related theme mods:
dct_variables_sizes
Global variables list created with designer generator.
 Global variables: Sizes dct_variables_sizes 2
{
    "options": [],
    "advanced": false
}





 Sizes
Switch to advanced mode
 
Add & edit global sizes variables to use in child theme custom files code.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global sizes variables with custom files code:
Related custom files:
 SCSS _sizes.scss/custom/scss/_sizes.scss
Partial SCSS for global variables.: Sizes.
Type: SCSS
Size: 177 B
Modified: 2026/07/16 10:30:38
 Open file in new tab
Related theme mods:
dct_variables_sizes
Global variables list created with designer generator.
 Global variables: Sizes dct_variables_sizes 2
{
    "options": [],
    "advanced": false
}
No variables found.
0 
Delete
 Sizes
Switch to basic mode
 
Add & edit global sizes variables to use in child theme custom files code.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Variables will be deleted.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
How to use global sizes variables with custom files code:
Related custom files:
 SCSS _sizes.scss/custom/scss/_sizes.scss
Partial SCSS for global variables.: Sizes.
Type: SCSS
Size: 177 B
Modified: 2026/07/16 10:30:38
 Open file in new tab
Related theme mods:
dct_variables_sizes
Global variables list created with designer generator.
 Global variables: Sizes dct_variables_sizes 2
{
    "options": [],
    "advanced": false
}
File: 
 SCSS _sizes.scss/custom/scss/_sizes.scss
Partial SCSS for global variables.: Sizes.
Type: SCSS
Size: 177 B
Modified: 2026/07/16 10:30:38
 Open file in new tab
Toggle editor find & replace panel.
Hotkeys: CTRL + F to open, ESC to close
Copy editor contents to clipboard.
Toggle editor light/dark theme.
Currently using basic mode.
Updating the generator in advanced mode will overwrite basic mode generator options code.