# Theming

Match the hosted funding pages to your brand. Theme settings are part of your program configuration: send the values you want to ADGT during onboarding and ADGT applies them. A custom stylesheet, if you use one, is hosted by you.

## How theming works

Styles are applied in five tiers, from most general to most specific:

| Tier | What it controls | Set with |
|  --- | --- | --- |
| 1. Default styles | Page structure, controls (buttons, selects, inputs) and responsiveness. The pages use the Ionic framework. | – |
| 2. Base theme | Background and font colors, validation and other generic labels | `themeBase` |
| 3. Accent theme | Solid banner, hyperlinks, buttons, some icons and other accent-colored elements | `themeAccent` |
| 4. Component variables | Overrides for individual components | Custom CSS |
| 5. Custom CSS | Full control: overrides component, accent and base settings | `CustomCss` |


For complete control through custom CSS, set `themeAccent` to `"off"`; the base theme then defaults to light.

## Required settings

To use the current themes:

- `isSpanEx30` set to `true`
- `borderColor` set to empty (`""`)
- `themeAccent` set to `""`, unless you use custom accent colors (below)


## Base themes

| Theme | ID |
|  --- | --- |
| Light (default) | `light-30` |
| Light flat | `light-flat-30` |
| Dark | `dark-30` |
| Black | `black-30` |


If `themeBase` is not set, the light theme is used.

## Custom accent colors

Set `themeAccent` to `"custom"` and give hex values for the properties below.

| Group | Properties |
|  --- | --- |
| Primary accent | `customAccentColor`, `customAccentContrastColor`, `customAccentColorShaded`, `customAccentColorTinted` |
| Secondary accent | `secondaryAccentColor`, `secondaryAccentContrast`, `secondaryAccentShaded`, `secondaryAccentTinted` |
| Banner | `bannerBackground`, `bannerFontColor` |
| Wizard icons | `wizardInactiveBackground`, `wizardInactiveIcon`, `wizardActiveBackground`, `wizardActiveIcon`, `wizardCompletedIcon` |


The contrast, shaded and tinted values are derived from the main color when not set. Other defaults:

- `secondaryAccentColor` → `customAccentColor`
- `bannerBackground` → `customAccentColor`
- `bannerFontColor` → `customAccentContrastColor`
- `wizardActiveBackground` → `customAccentContrastColor`
- `wizardInactiveBackground` → `var(--theme-base-placeholder-color)` on light themes, `var(--theme-base-bg-color)` on dark themes
- `wizardActiveIcon` → `customAccentColor`
- `wizardCompletedIcon` → `wizardActiveIcon`
- `wizardInactiveIcon` → `var(--theme-base-font-color)`


`customAccentColor` sets the accent CSS variables, for example:

```css
--theme-accent-color: #df4759;
--theme-accent-color-rgb: 223, 71, 89;
--theme-accent-contrast: #FFFFFF;
--theme-accent-contrast-rgb: 255, 255, 255;
--theme-accent-color-shade: #df4759;
--theme-accent-color-tint: #df4759;
```

### Example: primary color

```json
{
  "themeBase": "dark",
  "themeAccent": "custom",
  "customAccentColor": "#4C566A",
  "customAccentContrastColor": "#D8DEE9",
  "customAccentColorShaded": "#2E3440",
  "customAccentColorTinted": "#434C5E"
}
```

### Example: fully customized

```json
{
  "themeBase": "dark",
  "themeAccent": "custom",
  "customAccentColor": "#4C566A",
  "customAccentContrastColor": "#D8DEE9",
  "customAccentColorShaded": "#2E3440",
  "customAccentColorTinted": "#434C5E",
  "secondaryAccentColor": "#A3BE8C",
  "secondaryAccentContrast": "#5E81AC",
  "secondaryAccentShaded": "#81A1C1",
  "secondaryAccentTinted": "#88C0D0",
  "wizardActiveBackground": "#A3BE8C",
  "wizardActiveIcon": "#3B4252",
  "wizardInactiveBackground": "#D8DEE9",
  "wizardInactiveIcon": "#2E3440",
  "wizardCompletedIcon": "#BF616A",
  "bannerBackground": "#3B4252",
  "bannerFontColor": "#ECEFF4"
}
```

## Custom CSS

Use a custom stylesheet when the settings above are not enough. Change accent colors through the settings, not CSS.

1. Configure a base theme and an accent theme.
2. Create a CSS file. Start from `custom-css-template.css`, available from ADGT on request.
3. Host it on HTTPS at a publicly reachable address.
4. Send ADGT the address for the `CustomCss` setting.


Base theme overrides go inside the base theme class (`.theme-base-<theme id>`); all other overrides go inside `body`:

```css
/* Theme base overrides */
body.theme-base-light {
  --theme-base-bg-color: lightblue;
  --theme-base-bg-color-contrast: gray;
  --theme-base-font-color: purple;
}

/* Component overrides */
body {
  --form-control-bg-color: lightblue;
  --form-control-text-color: purple;
}
```

### Base theme variables

Defaults for the light themes:

```css
.theme-base-light-30,
.theme-base-light-flat-30 {
  --theme-base-bg-color: #FFFFFE;
  --theme-base-bg-color-contrast: #f5f5f5;
  --theme-base-font-color: #35334B;
  --theme-base-font-color-contrast: #ffffff;
  --theme-base-label-color: #616161;
  --theme-base-placeholder-color: #9E9E9E;
  --theme-base-line-color: #9E9E9E;
  --theme-base-line-color-light: #E0E0E0;
  --theme-base-input-validation-color: #FF5722;
  --theme-base-form-validation-color: #616161;
  --theme-base-alert-error-color: #FF5722;
  --theme-base-alert-success-color: #1F1F1F;
  --theme-base-alert-warn-color: #1F1F1F;
  --theme-base-disabled-color: #9E9E9E;
  --theme-base-banner-color: #2F2E40;
  --theme-base-wizard-icon-bg-color-inactive: #474457;
  --theme-base-banner-font-color: #FBFBFD;
}
```

| Variable | Used for |
|  --- | --- |
| `--theme-base-bg-color` | Background of the main content container |
| `--theme-base-bg-color-contrast` | Contrasting background: the wrapper around the main content on desktop, and the footer |
| `--theme-base-font-color` | Default text color |
| `--theme-base-label-color` | Captions, form input labels and alert headers |
| `--theme-base-placeholder-color` | Placeholder text in selects and inputs |
| `--theme-base-line-color` | Borders of selects and inputs |
| `--theme-base-line-color-light` | Line separators, and the header and table borders of the legal notice |
| `--theme-base-input-validation-color` | Input validation borders and text |
| `--theme-base-form-validation-color` | Form validation label |
| `--theme-base-alert-error-color` | Error alert background |
| `--theme-base-alert-success-color` | Success alert background |
| `--theme-base-alert-warn-color` | Warning alert background |
| `--theme-base-disabled-color` | Disabled button background |


### Accent theme variables

| Variable | Used for |
|  --- | --- |
| `--theme-accent-color` | Hyperlinks, solid banner background, input borders, info icon; primary button background, secondary button text and hover state |
| `--theme-accent-color-rgb` | RGB value of the accent color |
| `--theme-accent-contrast` | Contrast to the accent color; primary button text |
| `--theme-accent-contrast-rgb` | RGB value of the contrast color |
| `--theme-accent-color-shade` | Accent variation for control states (focus, active, hover) |
| `--theme-accent-color-tint` | Accent variation for control states (focus, active, hover) |


### Component variables

Component variables give the most flexibility. Put them inside `body`:

```css
body {
  --banner-bg-color: #FF5722;
  --banner-solid-bg-color: var(--banner-bg-color);
}
```

| Component | Variables |
|  --- | --- |
| Form controls | `--form-control-bg-color`, `--form-control-border-color`, `--form-control-text-color`, `--form-control-placeholder-color`, `--form-control-contrast-bg-color` |
| Focused form control | `--form-control-focus-border-color` |
| Labels | `--label-text-color` |
| Page header (below the banner) | `--page-header-bg-color` (defaults to the base contrast color) |
| Page footer | `--footer-bg-color` |
| Modals | `--modal-header-bg-color`, `--modal-footer-bg-color` |
| Line separator | `--hr-separator-color` |
| Well (content container) | `--well-bg-color` |
| Hyperlinks | `--link-color` |
| Info alerts | `--info-alert-bg-color`, `--info-alert-border-color`, `--info-alert-text-color` |


When you override `--form-control-bg-color`, set `--form-control-contrast-bg-color: var(--form-control-bg-color);` as well, so controls with a contrast color pick it up.