---
title: Motorul UI & Teme
description: Prezentare a interfeței reactive VertiWiki, a modurilor modulare de layout și a sistemului de token-uri de design CSS.
tags: [vertiwiki, ui, teme, tokenuri-design, layout, css, romana]
---

# Motorul UI & Teme

> For the complete documentation index and agent navigation, see [llms.txt](/llms.txt).

VertiWiki dispune de o interfață complet decuplată, construită exclusiv cu TypeScript nativ, CSS Grid, Flexbox și proprietăți CSS personalizate. Oferă adaptare responsivă, mod întunecat/luminos și multiple stiluri de layout fără dependențe de framework-uri grele precum React sau Vue.

---

## 🖥️ Structura Interfeței (`src/ui/layout.ts`)

Aplicația se montează în containerul `#verti-app` și include următoarele zone principale:

```text
+-------------------------------------------------------------------------+
| .verti-header (Logo, Titlu, Căutare, Selector Temă, Selector Limbă)     |
+------------------------------------+------------------------------------+
| .verti-sidebar (Meniu Navigare)    | .verti-main-container              |
|                                    |   .verti-breadcrumbs               |
|                                    |   .verti-article (Conținut Articol)|
|                                    |   .verti-prev-next (Paginare)      |
|                                    |   .verti-footer                    |
+------------------------------------+------------------------------------+
|                                    | .verti-toc-sidebar (Cuprins Pagină)|
+------------------------------------+------------------------------------+
```

### Moduri Modulare de Layout (`data-layout`)
VertiWiki suportă mai multe moduri de afișare configurabile global în `config.json` (`"layoutMode": "..."`) sau per pagină prin frontmatter (`layout: book`):

| Mod Layout | Public Țintă | Comportament Vizual |
| :--- | :--- | :--- |
| `default` | Documentație tehnică & wiki standard | Structură clasică pe 3 coloane (Meniu + Articol + Cuprins) |
| `book` | Lectură continuă & cărți digitale | Text centrat, navigare discretă, stil carte |
| `handbook` | Politici de companie, proceduri interne, HR | Casete pastelate, stilizare liste de verificare |
| `api` | Referințe API pentru dezvoltatori | Coloane divizate (Explicații în stânga, Cod în dreapta) |
| `hub` | Portaluri enterprise & indexe de echipă | Grilă de carduri interactive cu banner introductiv |

### Lățime de Lectură (`contentWidth`)
Pentru a optimiza lizibilitatea:
- `normal`: Lățime standard de documentație (850px).
- `readable`: Limită optimă de lectură (68 caractere pe linie, line-height 1.8).
- `full`: Lățime completă (100%), ideală pentru tabele largi și diagrame complexe.

---

## 🎨 Motorul de Teme & Token-uri de Design (`src/ui/theme.ts`)

Stilizarea vizuală este guvernată de variabile CSS din spațiul de nume `--verti-*`:

```css
:root {
  --verti-bg-base: #ffffff;
  --verti-text-primary: #0f172a;
  --verti-text-secondary: #475569;
  --verti-border: #e2e8f0;
  --verti-primary: #2563eb;
  --verti-primary-fg: #ffffff;
  --verti-code-bg: #f8fafc;
  --verti-radius: 8px;
}
```

### Presets de Teme & Fișiere Externe JSON
Temele pot fi declarate în fișiere JSON independente în directorul `themes/` (ex: `themes/obsidian.json`, `themes/dracula.json`, `themes/nord.json`):

```json
{
  "id": "dracula",
  "name": "Dracula",
  "previewColor": "#bd93f9",
  "light": {
    "background": "#f8f8f2",
    "foreground": "#282a36",
    "primary": "#bd93f9",
    "border": "#e2e8f0"
  },
  "dark": {
    "background": "#282a36",
    "foreground": "#f8f8f2",
    "primary": "#bd93f9",
    "border": "#44475a"
  }
}
```

### Moștenirea Temelor (`extends`)
O temă personalizată poate extinde un preset existent, suprascriind doar anumite valori:
```json
{
  "id": "brandul-meu",
  "extends": "default",
  "dark": {
    "primary": "#10b981"
  }
}
```

---

## 🌐 Controale Vizuale Dinamice

### Cuprinsul Paginii (TOC) (`src/ui/toc.ts`)
Motorul de cuprins scanează antetele `h2` și `h3`, extrage titlurile curate și le monitorizează prin `IntersectionObserver` pentru a evidenția secțiunea activă pe măsură ce cititorul derulează pagina.

### Comutatorul de Limbă (`src/ui/language-chooser.ts`)
Când sunt definite două sau mai multe limbi în `config.json`, o pictogramă cu glob apare în antet. Făcând clic pe aceasta, se deschide meniul de selecție rapidă a limbii.

---

## 🔗 Pașii Următori

- Explorați extensiile în [Plugin-uri & Extensii](plugins-and-extensions.md).
- Consultați opțiunile de configurare în [Prezentare Configurare](../configuration/overview.md).
- Învățați să creați teme proprii în [Dezvoltare Locală](../guides/development.md).