# Temi grafici

### Come creare un MR per aggiungere un tema

Step preparativi alla modifica:

* Clonare il repository [https://gitlab.com/opencity-labs/area-personale/core](https://gitlab.com/opencity-labs/area-personale/core/)
* Posizionarsi sul branch master
* Creare un nuovo branch di nome add-theme-$themename e spostarsi sul nuovo branch con il comando `git checkout -b "add-theme-$themename"` sostituendo con il nome del nuovo tema che si vuole creare (per le indicazioni sui nomi dei temi vedere sotto)
* Creare una MR sul branch che effettui squash di tutti i commit del branch ed elimini il branch una volta mergiato come di seguito:

<figure><img src="/files/ASCvggn4oFR0hM3W5C6K" alt=""><figcaption></figcaption></figure>

Successivamente creare un nuovo file in `./assets/styles` copiando il contenuto di seguito che dovrebbe coincidere con il file `default.scss.` Il nome del file deve coincidere con il nome che avrà il tema e avere l'estensione .scss (l nome del tema può contenere solo lettere e il carattere \`-\`, deve rispondere cioè alla espressione regolare \[a-z]\[a-z0-9-]+. Es: se si vuole creare il tema "amaranto" aggiungiamo un file `amaranto.scss`):

```scss
@charset "UTF-8";

$primary: #3478bd;

$primary-a5: $primary;
$primary-a6: $primary;
$primary-a7: $primary;

// Header
$header-slim-bg-color: #2b649e;     // Colore di background del top header
$header-slim-button-color: #2b649e; // Colore di background del bottone di accesso all'area personale
$header-slim-button-hover-color: $primary; // Colore di background del bottone di accesso all'area personale su hover

$header-center-bg-color: #3478bd;       // Colore di background del header centrale
//$header-center-text-color: #fff; // Colore del testo del header centrale

// Footer
$bg-footer: #16334f; // Colore di background del footer

// Content
$card-link-color: $primary; // Colore link all'interno delle card

@import "core";

```

* Nel file cambiare le opzioni ed i colori a proprio piacimento
* Si compila il nuovo tema su webpack aggiungendo nel file [webpack.config.js](https://gitlab.com/opencity-labs/area-personale/core/-/blob/master/webpack.config.js) StyleEntry come di seguito: `.addStyleEntry('amaranto', './assets/styles/amaranto.scss')` (Il nome deve coincidere con il nome del file creato in precedenza). I colori devono tenere conto della linea guida Accessibilità.
* Si aggiunge alla piattaforma il nuovo tema aggiornando nel file [src/Model/Tenant/ThemeOptions.php](https://gitlab.com/opencity-labs/area-personale/core/-/blob/master/src/Model/Tenant/ThemeOptions.php) la costante `THEMES` e inserendo il nuovo tema come di seguito: `'Amaranto' => 'amaranto'`


---

# 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.opencityitalia.it/sviluppatori-e-partner-tecnologici/sviluppo/temi-grafici.md?ask=<question>
```

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.