Skip to main content

Templates

WebJet Elements offers a number of global variables that can be used to modify the default template throughout the application. Application colors are useful for changing the appearance of many WebJET components.

Application colors

Application colors play an important role in the application and are often used in different contexts. They are particularly handy for seamlessly creating dark themes or topics that are in line with your brand identity.

NameDescription
--wje-border-colorDetermines the color of the borders throughout the application
--wje-border-radiusDetermines the rounding of edges throughout the application
--wje-border-sizeDetermines the width of the margins throughout the application
--wje-border-styleDetermines the style of borders throughout the application
--wje-colorSpecifies the text color across the application
--wje-font-familySpecifies the font of texts throughout the application
--wje-font-family-secondarySpecifies the secondary font for texts throughout the application
--wje-force-mac-font-familySpecifies the font of texts for Mac devices throughout the app
--wje-font-sizeSpecifies the size of text across the application
--wje-line-heightDetermines the height of texts throughout the application
NameDescription
--wje-backdropColor backdrop overlay overlays and modal backgrounds and backgrounds
--its-backdrop-opacityOpacity of the backdrop
--wje-border-radius-circleSpecifies the default roundness size in %
--wje-border-radius-largeBorder radius for large-sized elements
--wje-border-radius-mediumBorder radius for medium-sized elements
--wje-border-radius-pillBorder radius for pill-shaped elements
--wje-border-radius-smallBorder radius for small-sized elements
--wje-border-radius-x-largeBorder radius for extra-large-sized elements
--wje-border-sizeEdge thickness
--wje-border-styleStyle of borders
--its-box-shadow-largeBox shadow for large-sized elements
--its-box-shadow-mediumBox shadow for medium-sized elements
--wje-card-backgroundBackground color for card elements
--wje-card-colorText color for card elements
--wje-color-whiteWhite color
--wje-color-blackBlack color
--wje-font-familySpecifies the font of texts throughout the application
--wje-font-family-secondarySpecifies the secondary font for texts throughout the application
--wje-force-mac-font-familySpecifies the font of texts for Mac devices throughout the app
--wje-font-sizeBase font size
--wje-font-size-2x-largeFont size for 2x large text
--wje-font-size-3x-largeFont size for 3x large text
--wje-font-size-4x-largeFont size for 4x large text
--its-font-size-largeFont size for large text
--its-font-size-mediumFont size for medium text
--wje-font-size-smallFont size for small text
--wje-font-size-x-largeFont size for extra-large text
--wje-font-size-x-smallFont size for extra-small text
--wje-line-heightLine height for text elements

Graduated colors

While updating the background (--wje-background-color) and text (--wje-text-color) variables will change the appearance of the application for most components, there are certain Ionic components where this may look non-standard or non-functional. This will be more noticeable when using a darker theme.

In some components, we use a shade darker than the background or lighter than the text. For example, the heading text of an item may need color #404040, which is a few shades lighter than our default text color. Meanwhile, the background of the loading component is a shade darker than white, using #f2f2f2. We use graded colors to define these slight deviations. When updating the background color or text of an application, it is important to update the step colors.

By default, Ionic's step colors start at the default background color value of #ffffff and blend with the text color value of #000000 using an increasing percentage. The full list of step colors is given in the generator below.

Graduated color generator

Create a custom background theme and text color for your app. Update the hexadecimal values of the background colors or text below and then copy and paste the generated code directly into the WebJET Elements project.

Pozadie

Text

:root {
	--wj-background-color: #ffffff;
	--wj-background-color-rgb: 255,255,255;

	--wj-text-color: #000000;
	--wj-text-color-rgb: 0,0,0;

	--wj-color-step-1: #f2f2f2;
	--wj-color-step-2: #e6e6e6;
	--wj-color-step-3: #d9d9d9;
	--wj-color-step-4: #cccccc;
	--wj-color-step-5: #bfbfbf;
	--wj-color-step-6: #b3b3b3;
	--wj-color-step-7: #a6a6a6;
	--wj-color-step-8: #999999;
	--wj-color-step-9: #8c8c8c;
	--wj-color-step-10: #808080;
	--wj-color-step-11: #737373;
}