> For the complete documentation index, see [llms.txt](https://docs.annoto.net/developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.annoto.net/developers/widget/theming.md).

# Theming

Many aspects of the widget UI can be modified via [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). 

## Overriding the Defaults

To override the defaults simply use `.annoto` CSS class selector. For Example:

```css
.annoto {
    --nnc-color-dark: #333333;
}
```

### Widget Utility Classes

The widget has different utility classes that are appended to the `.annoto` class based on a situation. The styling can be modified using combinations of those classes. For example, the most common state is dark theme of the widget:

```css
.annoto.nnc-dark-theme {
    --nnc-color-dark: #cecece;
}
```

For dark theme styling but only when the player is in full screen:

```css
.annoto.nnc-dark-theme.nn-player-fs {
    --nnc-color-dark: #b2b2b2;
}
```

Below is a list of the most useful utility classes:

| Utility Class    | Description                                                                                                                                                            |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `nnc-dark-theme` | Used it different cases such as when widget is an overlay inside the player, player is in full screen, or configured as the default theme in the widget configuration. |
| `nn-player-fs`   | Added when player is in full screen                                                                                                                                    |
| `nnc-mobile`     | Added when the user uses a mobile device, and the widget applies UX for mobile devices.                                                                                |
| `nn-is-open`     | Widget is in open state.                                                                                                                                               |
| `nn-[PAGE]-page` | <p>Changed based on the view the widget is showing. Common views:</p><p><code>nn-notes-page</code> <code>nn-comments-page</code>  <code>nn-preferences-page</code></p> |
| `nnc-rtl`        | Widget has Right to Left layout.                                                                                                                                       |

{% hint style="warning" %}
Please notice in most cases **`nnc`** prefix is used. but in some cases **`nn`** is used instead.
{% endhint %}

## Colors Palette

### Main Colors

The main colors used by the widget are: **primary, secondary, tertiary, light, medium, dark, darkest, success, warning, notice, danger.**

{% hint style="info" %}
Each main color has variants for different effects: **contrast, shade and tint**
{% endhint %}

Some or all the colors can be modified.

{% hint style="info" %}
If for example primary color is modified, please make sure to set all it's variants to appropriate values, a great helper tool by Ionic can be used to generate the variants: <https://ionicframework.com/docs/theming/color-generator>&#x20;
{% endhint %}

```css
.annoto {
    --nnc-color-primary: #ea5451;
    --nnc-color-primary-contrast: #ffffff;
    --nnc-color-primary-shade: #ce4a47;
    --nnc-color-primary-tint: #ec6562;
    --nnc-color-primary-rgb: 234,84,81;
    --nnc-color-primary-contrast-rgb: 255,255,255;
    
    --nnc-color-secondary: #00a9a4;
    --nnc-color-secondary-contrast: #ffffff;
    --nnc-color-secondary-shade: #009590;
    --nnc-color-secondary-tint: #1ab2ad;
    --nnc-color-secondary-rgb: 0,169,164;
    --nnc-color-secondary-contrast-rgb: 255,255,255;
    
    --nnc-color-tertiary: #5450e8;
    --nnc-color-tertiary-contrast: #ffffff;
    --nnc-color-tertiary-shade: #4a46cc;
    --nnc-color-tertiary-tint: #6562ea;
    --nnc-color-tertiary-rgb: 84,80,232;
    --nnc-color-tertiary-contrast-rgb: 255,255,255;
    
    --nnc-color-light: #f4f5f8;
    --nnc-color-light-contrast: #000000;
    --nnc-color-light-shade: #d7d8da;
    --nnc-color-light-tint: #f5f6f9;
    --nnc-color-light-rgb: 244,245,248;
    --nnc-color-light-contrast-rgb: 0,0,0;
    
    --nnc-color-dark: #35353a;
    --nnc-color-dark-contrast: #ffffff;
    --nnc-color-dark-shade: #2f2f33;
    --nnc-color-dark-tint: #49494e;
    --nnc-color-dark-rgb: 53,53,58;
    --nnc-color-dark-contrast-rgb: 255,255,255;
    
    
    /** same format is used for the other colors
     * medium, darkest, success, warning, notice, and danger
     */
}
```

### Base Colors

```css
.annoto {
    --nnc-bg: #ffffff;
    --nnc-bg-color: #ffffff;
    --nnc-color: #000000;
    --nnc-item-bg: #fafafa;
    --nnc-border-color: #e2e2e5;
    --nnc-color-text: rgba(0, 0, 0, .87);
    --nn-widget-bg: rgb(255, 255, 255);
    --nn-widget-bg-secondary: rgb(247, 247, 247);
}
```

### Utility Colors

```css
.annoto {
    --nnc-color-text-disabled: rgba(0, 0, 0, .26);
    --nnc-focused-box-shadow: 0 0 0 2px rgba(37, 137, 218, .9);
    --nnc-bg-hover: var(--nnc-color-step-950, #eeeeee);
}
```

### Vendor Colors

Those are standard colors of third party, usually they do not need to be changed.

```css
.annoto {
    --nnc-color-docx: #2B579A;
    --nnc-color-xlsx: #217346;
    --nnc-color-pptx: #B7472A;
}
```

### Step Colors

Those colors are different shades of grey used by the widget. Please notice, the main colors light, medium, dark and darkest are used for styling.

{% hint style="success" %}
In most cases there is no need to change any of the steps.
{% endhint %}

```css
.annoto {
    --nnc-color-step-950: #eeeeee;
    --nnc-color-step-900: #e1e1e1;
    --nnc-color-step-850: #d5d5d5;
    --nnc-color-step-800: #c8c8c8;
    --nnc-color-step-750: #bcbcbc;
    --nnc-color-step-700: #afafaf;
    --nnc-color-step-650: #a3a3a3;
    --nnc-color-step-600: #969696;
    --nnc-color-step-550: #8a8a8a;
    --nnc-color-step-500: #7d7d7d;
    --nnc-color-step-550: #717171;
    --nnc-color-step-400: #646464;
    --nnc-color-step-450: #585858;
    --nnc-color-step-300: #4b4b4b;
    --nnc-color-step-250: #3f3f3f;
    --nnc-color-step-200: #323232;
    --nnc-color-step-150: #262626;
    --nnc-color-step-100: #191919;
    --nnc-color-step-50: #0d0d0d;
    --nnc-color-step-950-rgb: 238, 238, 238;
    --nnc-color-step-900-rgb: 225, 225, 225;
    --nnc-color-step-850-rgb: 213, 213, 213;
    --nnc-color-step-800-rgb: 200, 200, 200;
    --nnc-color-step-750-rgb: 188, 188, 188;
    --nnc-color-step-700-rgb: 175, 175, 175;
    --nnc-color-step-650-rgb: 163, 163, 163;
    --nnc-color-step-600-rgb: 150, 150, 150;
    --nnc-color-step-550-rgb: 138, 138, 138;
    --nnc-color-step-500-rgb: 125, 125, 125;
    --nnc-color-step-450-rgb: 113, 113, 113;
    --nnc-color-step-400-rgb: 100, 100, 100;
    --nnc-color-step-350-rgb: 88, 88, 88;
    --nnc-color-step-300-rgb: 75, 75, 75;
    --nnc-color-step-250-rgb: 63, 63, 63;
    --nnc-color-step-200-rgb: 50, 50, 50;
    --nnc-color-step-150-rgb: 38, 38, 38;
    --nnc-color-step-100-rgb: 25, 25, 25;
    --nnc-color-step-50-rgb: 13, 13, 13;
}
```

## Typography

### Font Family

```css
.annoto {
    --nnc-font-family: 'Roboto','Helvetica','Arial',sans-serif;
}
```

### Fonts

```css
.annoto {
    --nnc-typo-body-size: 1em;
    --nnc-typo-body-weight: 400;
    
    --nnc-typo-title-size: 1.125em;
    --nnc-typo-title-weight: 400;
    
    --nnc-typo-subhead-size: 1em;
    --nnc-typo-subhead-weight: 500;
    
    --nnc-typo-caption-size: 0.75em;
    --nnc-typo-caption-weight: 400;
}
```

## Components

### Timeline

```css
.annoto {
    --nnc-timeline-cta-size: 36px;
}
```

### Comments

```css
.annoto {  
    --nnc-comment-bubble-bg: rgba(90, 101, 114, 0.06);
    --nnc-comment-font-size: 15px;
    --nnc-comment-avatar-size: 2.25em;
}
```

### Notes

```css
.annoto {
    --nnc-note-font-size: 15px;
}
```

### Chat

```scss
.annoto {
    --nnc-message-font-size: 15px;
    --nnc-message-bubble-bg: rgba(90, 101, 114, .06);
}
```

### Interactions

```scss
.annoto {
    --nnc-cta-item-bg: rgba(90, 101, 114, .06);
}
```

### Tooltips

```scss
.annoto {
    --nnc-tooltip-color: #fff;
    --nnc-tooltip-bg: rgba(66,66,66, 0.9);
}
```

### Scrollbar

```css
.annoto {
    --nnc-scrollbar-width: 6px;
    --nnc-scrollbar-thumb-color: var(--nnc-color-step-750, #bcbcbc);
    --nnc-scrollbar-thumb-hover-color: var(--nnc-color-step-600, #969696);
    --nnc-scrollbar-bg: var(--nnc-color-step-850, #d5d5d5);
}
```

### Misc

```scss
.annoto {
    --nnc-card-bg: #ffffff;
    --nnc-form-layout-bg: #ffffff;
    --nnc-item-bg: #ffffff;
}
```