Temi

I temi cambiano l’aspetto dell’intera applicazione: i colori del canvas, dei grafici e del globo di Licensing, ma anche la forma dei controlli, i font e le icone.

Scegliere un tema

Apri le impostazioni Aspetto

Apri Impostazioni (Ctrl+, su Windows e Linux, Cmd+, su macOS) e scegli Aspetto.

Scegli un tema

Scegli il tema in Impostazioni > Aspetto > Tema. Sistema segue l’aspetto chiaro o scuro del sistema operativo, Chiaro e Scuro sono i temi integrati, e ogni estensione abilitata aggiunge i propri temi all’elenco. Quando una famiglia di temi ha sia un tema chiaro sia uno scuro, come Copper Night e Copper Day, l’elenco propone anche Copper (segue il sistema), che passa dall’uno all’altro seguendo il sistema operativo.

Controlla il risultato

Il tema cambia subito. Lo Stile del globo della dashboard di Licensing si imposta nella stessa finestra.

Puoi anche cambiare tema senza aprire le impostazioni: esegui dalla tavolozza comandi il comando Aspetto del tema, per esempio Aspetto: Pixel, oppure fai clic sull’icona Impostazioni in fondo alla barra attività e scegli un tema nel sottomenu Temi.

Finestra delle impostazioni sulla pagina Appearance nel tema Copper Night, con le impostazioni Interface language, Theme impostato su Copper Night, Globe style e la categoria Application — Le impostazioni nel tema Copper Night

Dashboard di Licensing nel tema Copper Night, con riquadri, barra laterale e barra attività nei colori del tema — La dashboard di Licensing nel tema Copper Night

Densità e dimensione del testo

Un tema stabilisce quanto sono ravvicinati i controlli e quanto è grande il testo. Densità e Dimensione del testo in Impostazioni > Aspetto cambiano i due valori per ogni tema:

Impostazione	Valori
Densità	Come il tema, Compatta, Normale, Ampia
Dimensione del testo	Come il tema, Piccolo, Normale, Grande

Come il tema, il valore predefinito, usa i valori del tema attivo.

Temi di esempio

Babel pubblica alcuni pacchetti di temi come esempi. Sono elencati nella vista Estensioni; installane uno e i suoi temi compaiono in Impostazioni > Aspetto > Tema.

Pacchetto	Temi	Aspetto
Copper	Copper Night, Copper Day	Accenti color rame su antracite o su pergamena, e un comando che apre le regole XML
Amethyst	Amethyst Night, Amethyst Day	Accenti ametista su prugna scuro o su lilla, con icone proprie per la barra attività
Parchment	Parchment Day, Parchment Night	Carta e inchiostro: superfici con texture, pulsanti timbrati e icone disegnate a mano
Pixel	Pixel	Grigio chiaro con font pixel, icone in pixel art e controlli quadrati

Parchment e Pixel contengono immagini e richiedono Babel Desktop 0.3.0 o successivo. Una versione precedente li elenca indicando che richiedono un Babel Desktop più recente e non li installa.

Pixel

Pixel è un unico tema chiaro, quindi non segue l’aspetto del sistema operativo. Il pacchetto non contiene codice: cambia l’aspetto dell’applicazione con token di colore, impostazioni di forma, tre file di font e immagini SVG.

Il canvas del progetto e il riquadro del target nel tema Pixel

Il tema modifica:

Colori: pannelli e barra di stato grigio chiaro, con un unico grigio scuro per la barra attività, i pulsanti primari, la scheda attiva e l’anello di focus. I grafici usano una scala di grigi con due tonalità tenui, blu acciaio e ocra.
Font: l’interfaccia usa Pixel Operator e il testo a spaziatura fissa usa Departure Mono. Entrambi i font sono nel pacchetto.
Forma: angoli quadrati, bordi spessi, schede incorniciate e campi con contorno.
Icone e logo: le 44 icone dell’interfaccia sono ridisegnate in pixel art su una griglia di 16 per 16, e anche il logo Babel è disegnato a pixel.
Caselle di controllo e pulsanti di opzione: una cornice quadrata a pixel e un cerchio a gradini sostituiscono i controlli di sistema.

Statistiche di protezione nel tema Pixel: schede incorniciate con Renaming selezionata, i contatori 540 simboli rinominati, 630 simboli idonei e 85,71 percento di copertura in un font pixel, e il grafico radar e le barre con il numero di simboli disegnati in grigio scuro e blu acciaio — I risultati di un’esecuzione nel tema Pixel

Finestra delle impostazioni sulla pagina Appearance nel tema Pixel, con Interface language impostata su English, Theme impostato su Pixel, Globe style, e Density e Text size entrambe su Follow theme — Le impostazioni nel tema Pixel

I font pixel sono disegnati su una griglia di pixel e risultano più nitidi alle dimensioni che sono multipli di quella griglia. Se il testo appare sfocato o piccolo, scegli una Dimensione del testo maggiore.

Creare un tema

Un tema è una piccola estensione. Parte dalla palette integrata chiara o scura (base) e sostituisce solo i token di colore che elenchi; gli altri vengono ereditati. Impostare solo accent, per esempio, basta a cambiare il colore di pulsanti, link, selezioni e indicatori del globo.

Scrivi il manifest

Crea un file extension.json che dichiara un tema singolo oppure una famiglia di temi chiaro e scuro:

extension.json


{
  "apiVersion": 1,
  "id": "acme.teal",
  "name": "Teal",
  "version": "1.0.0",
  "author": "Acme",
  "license": "MIT",
  "description": "A teal theme family for Babel Desktop.",
  "minApp": "0.1.0",
  "minEngine": "12.0.0",
  "permissions": ["themes"],
  "contributes": {
    "themes": [
      {
        "id": "teal-night",
        "name": "Teal Night",
        "base": "dark",
        "family": "Teal",
        "colors": { "accent": "#2cc7b5", "canvas": "#0f1a1c", "activity-bg": "#0b1416" }
      },
      {
        "id": "teal-day",
        "name": "Teal Day",
        "base": "light",
        "family": "Teal",
        "colors": { "accent": "#0f8a7c" }
      }
    ]
  }
}

Rispetta le regole del manifest

id ha la forma publisher.name in minuscolo, e version, minApp e minEngine sono versioni in tre parti.
base è light o dark. Una family abbina al massimo un tema chiaro e uno scuro.
colors accetta solo i token documentati, ciascuno come valore esadecimale a sei cifre. I token coprono la palette di base (bg, panel, panel-alt, text, muted, line, accent, accent-hover, accent-soft, on-accent, selection, focus, link), i colori di stato (success, warning, error e le relative superfici -bg), il canvas, il log e la barra di stato, la barra attività, i badge, i riquadri della dashboard, le serie dei grafici e il globo. Un token sconosciuto viene rifiutato con l’elenco dei nomi validi.
Un oggetto icons facoltativo sostituisce le icone indicate per nome, come activity.settings o canvas.run, con semplici forme vettoriali. Qui il markup SVG non è accettato; per usare file SVG, aggiungi una skin.
Un pacchetto può aggiungere anche commands che eseguono un’azione integrata (open-assembly, open-project, save, run, cancel, tab-settings, tab-rules, tab-activity, graph-fit, plugins); questo richiede il permesso commands.

Installa il tema

Salva il manifest come extension.json e installalo con Installa da file… nella vista Estensioni.

Crea il pacchetto per la distribuzione

Se vuoi distribuire il tema con una descrizione, immagini e traduzioni, crea un pacchetto .babelext: un archivio ZIP che contiene extension.json, un file README.md obbligatorio, mostrato nella scheda Dettagli, eventuali file README.<locale>.md tradotti, le immagini in una cartella media e le traduzioni dell’estensione in una cartella locales. Il Babel Desktop Extension SDK, distribuito con licenza MIT, fornisce lo schema del manifest e il comando babel-extension, che convalida e crea i pacchetti.

Incrementa version ogni volta che modifichi un tema, poi installa il nuovo pacchetto sopra quello vecchio.

Forma, controlli e tipografia

Oltre a colors, un tema può impostare shape, controls e type. Tutti e tre sono facoltativi, e un membro omesso mantiene il valore predefinito.

extension.json


{
  "id": "teal-night",
  "name": "Teal Night",
  "base": "dark",
  "family": "Teal",
  "shape": { "radius": "small", "density": "compact", "border": "thin" },
  "controls": { "button": "outline", "tabs": "boxed", "field": "underline" },
  "type": { "body": "sans", "size": "normal" },
  "colors": { "accent": "#2cc7b5" }
}

Membro	Valori	Predefinito
`shape.radius`	`none`, `small`, `medium`, `large`, `round`	`medium`
`shape.density`	`compact`, `normal`, `comfortable`	`normal`
`shape.border`	`thin`, `normal`, `thick`	`normal`
`controls.button`	`solid`, `outline`, `pill`	`solid`
`controls.tabs`	`underline`, `pill`, `boxed`	`underline`
`controls.field`	`outlined`, `filled`, `underline`	`outlined`
`type.body`	`system`, `sans`, `serif`, `rounded`, `mono` o `font:<fontId>`	`system`
`type.mono`	`mono` o `font:<fontId>`	`mono`
`type.size`	`small`, `normal`, `large`	`normal`

Le famiglie di font indicate per nome sono font già installati sul computer; non viene scaricato nulla. Le impostazioni Densità e Dimensione del testo dell’utente, quando non sono su Come il tema, hanno la precedenza su shape.density e type.size. Un manifest che usa uno qualsiasi di questi membri deve dichiarare minApp 0.2.0 o successivo.

Font

Un pacchetto .babelext può includere i propri font. Dichiarali in contributes.fonts e selezionane uno con font:<fontId>:

extension.json


"fonts": [
  { "id": "inter", "family": "Inter", "file": "fonts/Inter-Regular.woff2", "weight": 400, "style": "normal", "license": "OFL-1.1" },
  { "id": "inter-semibold", "family": "Inter", "file": "fonts/Inter-SemiBold.woff2", "weight": 600, "style": "normal", "license": "OFL-1.1" }
]

I font sono file WOFF2 nella cartella fonts, di al massimo 1 MiB ciascuno e 4 MiB in totale.
license è obbligatoria e deve essere OFL-1.1, Apache-2.0, MIT, CC0-1.0 o Ubuntu-1.0.
Ogni file dichiarato deve essere nel pacchetto e ogni file di font deve essere dichiarato. I font non vengono mai caricati dalla rete, e un file extension.json non impacchettato non può dichiararli.
Una famiglia usata per type.body deve avere, oltre alla variante normale, una variante di peso 600 o superiore.

Skin

Una skin aggiunge immagini a un tema. Ha quattro parti facoltative:

Parte	Contenuto
`surfaces`	Texture dietro `window`, `titlebar`, `activitybar`, `sidebar`, `canvas`, `panel`, `dialog` e `statusbar`
`controls`	Immagini di sfondo per `button.primary`, `button.secondary`, `button.icon`, `tab`, `tab.active` e `field`, e immagini per `checkbox` e `radio`
`icons`	File SVG per gli slot delle icone
`logo`	Un file PNG o SVG che sostituisce il logo Babel nella schermata iniziale, nella finestra Informazioni e sui target principali del canvas

extension.json


"skin": {
  "surfaces": { "window": { "image": "skins/paper.png", "layout": "tile" } },
  "controls": { "button.primary": { "image": "skins/stamp.svg", "slice": [10, 12, 10, 12], "ink": "#ffffff", "tone": "#6b3fa0" } },
  "icons": { "canvas.run": { "file": "skins/run.svg" } },
  "logo": { "file": "skins/mark.svg", "mode": "tint" }
}

Le immagini si trovano direttamente nella cartella skins: file PNG fino a 512 KiB e 2048 pixel per lato, con un file @2x facoltativo di dimensioni doppie, e file SVG fino a 64 KiB. L’intera cartella non supera i 4 MiB.
L’immagine di sfondo di un controllo viene divisa in nove parti da slice, quattro numeri interi per i lati superiore, destro, inferiore e sinistro, così si estende senza deformare gli angoli. Dichiara anche il colore del testo ink e il colore di sfondo tone, con un contrasto di almeno 4,5:1.
Un’icona o un logo con mode tint, il valore predefinito, viene disegnato nel colore che l’applicazione usa già in quel punto; color mantiene i colori del file.
I file SVG vengono controllati prima dell’uso: script, stili, riferimenti esterni ed entità vengono rifiutati.
Ogni file della cartella deve essere usato e ogni file indicato nel manifest deve essere presente. Un file extension.json non impacchettato non può avere una skin.
Un manifest con una skin deve dichiarare minApp 0.3.0 o successivo. L’icona dell’applicazione e l’installer non si possono personalizzare con un tema.