# 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` |

Changed based on the view the widget is showing. Common views:

nn-notes-page nn-comments-page nn-preferences-page

| | `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: {% 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; } ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.annoto.net/developers/widget/theming.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.