Changing the Appearance of your App
There are three ways to change the visual appearance of your app:
- Through your uploaded media assets
- Styling the Base Design
- Theming
Media
Your media files have a huge influence on the atmosphere of your app. It’s a way to change the appearance without going into technical details. You can upload your own media files in the Media section of the authoring system.
Think about, for example:
- colors: vivid colors, pastel colors, black and white, …
- style: realistic, cartoon, pictures, fictionalized, …
- backgrounds: light, dark, transparent, …
- meaning: descriptive images, abstract images, …
Map Styles
If your project uses a Map, you can change the appearence and style of the map layers. See Map Component Reference
Styling
Interkit comes with a set of variables that define the appearance of the Base Design. They are used throughout all components.
They let you define
- colors
- fonts
- spacings
- …
See the list of variables
| key | type | info |
|---|---|---|
| colorText | color | The default text color used in most places |
| colorTextStrong | color | A more intense variant of the default text color used in headers for example |
| colorTextSoft | color | A less intense variant of the default text color used for additional information |
| colorTextLink | color | The color used for links in richtext content. |
| colorBackground | color | The default background color used in most places |
| colorBackgroundHighlight | color | Background color that is used in modals, selected <BottomMenu> states and the popout <AudioPlayer> and other places |
| colorBackgroundBackdrop | color | Background color that is used in the backdrop of Sections and Chat background |
| colorBorder | color | The default border color used in most places |
| colorDummyAsset | color | The color used for dummy assets when no image is available |
| colorTextButtonPressed | color | The color used for the text of a button when it is pressed |
| colorBackgroundButtonPressed | color | The color used for the background of a button when it is pressed |
| colorTextButtonDanger | color | The color used for the text of a button when it is a danger button |
| colorBackgroundButtonDanger | color | The color used for the background of a button when it is a danger button |
| colorBackgroundButtonDangerPressed | color | The color used for the background of a button when it is a danger button and pressed |
| colorTextButtonPrimary | color | The color used for the text of a button when it is a primary button |
| colorTextButtonPrimaryPressed | color | The color used for the text of a button when it is a primary button and pressed |
| colorBackgroundButtonPrimary | color | The color used for the background of a button when it is a primary button |
| colorBackgroundButtonPrimaryPressed | color | The color used for the background of a button when it is a primary button and pressed |
| colorBorderButtonPrimary | color | The color used for the border of a button when it is a primary button |
| colorBorderButtonPrimaryPressed | color | The color used for the border of a button when it is a primary button and pressed |
| colorBackgroundLabel1 | color | The color for the background of a label, used in cards for example |
| colorTextLabel1 | color | The color for the text of a label, used in cards for example |
| colorBackgroundChatMe | color | The color for the background of a chat message sent by the current user |
| colorBackgroundChatOther | color | The color for the background of a chat message sent by another user |
| colorPagination | color | The color for the pagination indicator in PictureBook |
| borderWidth | size | The default border width used in most places |
| borderRadius | size | The default border radius used in many containers |
| borderRadiusButton | size | The default border radius used in buttons and in elements inside a container. Should be equal to borderRadius for best fit. |
| borderRadiusLabel | size | A smaller border radius used in labels |
| boxShadow | shadow | The default box shadow used in many containers. The default evaluates to a 1px border |
| googleFont | googleFont | url fragment for first font to load from google fonts |
| googleFont2 | googleFont | url fragment for second font to load from google fonts |
| fontFamilyInterface | fontStack | font stack for interface font (--font-family-interface) |
| fontFamilyContent | fontStack | font stack for content font (--font-family-content) |
| fontHeadline1 | font | text style for interface headlines 1 |
| fontHeadline2 | font | text style for interface headlines 2 |
| fontHeadline3 | font | text style for interface headlines 3 |
| fontHeadline4 | font | text style for interface headlines 4 |
| fontHeadline5 | font | text style for interface headlines 5 |
| fontBody1 | font | text style for interface body 1 |
| fontBody2 | font | text style for interface body 2 |
| fontSubtitle1 | font | text style for interface body 2 |
| fontSubtitle2 | font | text style for interface Subtitle 2 |
| fontButton | font | text style for interface buttons |
| fontCaption | font | text style for interface captions |
| fontCaptionBold | font | text style for interface captions (bold) |
| fontOverline | font | text style for interface 'overline' style |
| fontContentHeadline1 | font | text style for content headline 1 |
| fontContentHeadline2 | font | text style for content headline 2 |
| fontContentHeadline3 | font | text style for content headline 3 |
| fontContentHeadline4 | font | text style for content headline 4 |
| fontContentHeadline5 | font | text style for content headline 5 |
| fontContentBody1 | font | text style for content body 1 |
| fontContentBody2 | font | text style for content body 2 |
| letterSpacingHeadline1 | size | letter spacing for interface headlines 1 |
| letterSpacingHeadline2 | size | letter spacing for interface headlines 2 |
| letterSpacingHeadline3 | size | letter spacing for interface headlines 3 |
| letterSpacingHeadline4 | size | letter spacing for interface headlines 4 |
| letterSpacingHeadline5 | size | letter spacing for interface headlines 5 |
| letterSpacingBody1 | size | letter spacing for interface body 1 |
| letterSpacingBody2 | size | letter spacing for interface body 2 |
| letterSpacingSubtitle1 | size | letter spacing for interface Subtitle 1 |
| letterSpacingSubtitle2 | size | letter spacing for interface Subtitle 2 |
| letterSpacingButton | size | letter spacing for interface buttons |
| letterSpacingCaption | size | letter spacing for interface captions |
| letterSpacingCaptionBold | size | letter spacing for interface captions (bold) |
| letterSpacingOverline | size | letter spacing for interface 'overline' style |
| letterSpacingContentHeadline1 | size | letter spacing for content headline 1 |
| letterSpacingContentHeadline2 | size | letter spacing for content headline 2 |
| letterSpacingContentHeadline3 | size | letter spacing for content headline 3 |
| letterSpacingContentHeadline4 | size | letter spacing for content headline 4 |
| letterSpacingContentHeadline5 | size | letter spacing for content headline 5 |
| letterSpacingContentBody1 | size | letter spacing for content body 1 |
| letterSpacingContentBody2 | size | letter spacing for content body 2 |
| scale | number | A factor that scales the whole theme (anything that is defined in em or rem, and not in px) |
| distanceScaleFactor | number | A factor that is used to scale distances, serves only as the default value for inset/outset |
| inset | varOrNumber | A factor that is used to scale inner distances within elements (like paddings) |
| insetX | varOrNumber | A factor that is used to scale inner, horizontal distances within elements (like paddings) |
| insetY | varOrNumber | A factor that is used to scale inner, vertical distances within elements (like paddings) |
| outsetX | varOrNumber | A factor that is used to scale outer, horizontal distances between elements (like margins) |
| outsetY | varOrNumber | A factor that is used to scale outer, vertical distances between elements (like margins) |
You can change these variables visually in the Design section of the authoring system. When you press “Save”, a file called styleTokens.json is saved in your project. It contains all the values of your variables (You can also edit this file directly).
For example, if you change “Color / Text” in the “general” section, it changes the color text all over your app.
Press the “trashcan” to reset the variables to the default values. Press the “undo” icon to revert to the last saved version.
Using the Styling Component (advanced)
The styles that are defined in the “Styling” section of the Redaktionssystem are applied automatically to all parts of your app.
However, you can also style parts of the app differently using the <Styling> component. It opens the same style editor, but applies the values only to all it’s child components.
Some example usages:
- There is a tab in your app that is in fiction and another one that is out of fiction. You can put the tab content that is in fiction in another style, for example a dark background and fancy font, while the rest of you app appears clearly different.
- There is a special button that you want to emphasize. You can out it into the
<Styling>component and make it stand out, for example with a shadow and big font.
Theming
While Styling lets you change the values of a set of built-in variables, Theming is a way to extend and modify the appearence of an app in a deeper and more flexible way.
Applying a predefined theme
Interkit comes with some predefined themes from renowned design agencies:
| Name | Author | Details |
|---|---|---|
| Building Blocks | Knoth & Renner | README.md |
| Studio S/M/L | Studio S/M/L | README.md |
Use the Sidebar in the Design Tab to apply the themes to your project.
Note that whenever you apply a theme, it overwrites any existing theme files. Applying a theme actually just copies the theme’s files into the static/theme folder of your app.
Customizing
For full customization, see Theming