Teme

Fă conținutul blogului să arate nativ pe site-ul tău. Întregul sistem de componente MD2 citește cincisprezece token-uri de culoare (plus o rază de colț) — le setezi o singură dată per blog, iar fiecare callout, grafic, ghid pas cu pas și badge le urmează.

Editorul de teme

Pe pagina blogului, cardul Temă MD2 are selectoare grupate:

Grup	Token-uri
Accente	informativ · avertisment · pericol · succes · notă
Nuanțe	un fundal discret per accent (stă în spatele textului)
Suprafețe	fundal · suprafață discretă · contur
Text	text · estompat
Rotunjire colțuri	rotunjirea colțurilor pentru panouri

Un exemplu live se re-randează pe măsură ce alegi culori, deci vezi callout-uri, nuanțe și contururi pe paleta ta înainte de a salva. Salvează tema o aplică pe paginile tale live în mai puțin de un minut; Elimină tema revine la aspectul neutru implicit. Dacă site-ul tău are un comutator light/dark, activează Variantă dark ca să menții o paletă per schemă — secțiunea „Site-uri cu comutator light/dark" de mai jos explică cum e servită perechea.

Propune pornind de la site-ul tău

Sari peste munca manuală: Propune după site scanează designul real al site-ului tău — pagina principală, foile ei de stil, culoarea de temă declarată și stivele de fonturi — și pune AI-ul să mapeze paleta ta existentă pe cele cincisprezece token-uri, cu o motivație de o linie pentru alegerile făcute.

Scanare
baas preia pagina ta principală și până la trei dintre foile ei de stil și inventariază culorile pe care chiar le folosești, ordonate după frecvență.
Propunere
Modelul păstrează schema ta luminoasă sau întunecată, refolosește culorile tale de accent unde se potrivesc și construiește nuanțe lizibile — avertismentul rămâne cald, pericolul se citește ca pericol, textul rămâne cu contrast ridicat.
Revizuire și aplicare
Propunerea apare cu mostre de culoare. Încarcă în editor completează selectoarele — ajustezi orice, apoi salvezi. Nimic nu se schimbă pe site-ul tău până nu salvezi.

Cum se livrează

Paleta ajunge ca un bloc CSS mic și scoped, împreună cu conținutul tău — inline pe paginile randate server-side, injectat o singură dată de SDK. Culorile sunt valori hex validate, deci blocul e inert dincolo de setarea token-urilor tale.

Suprascrii token-urile singur? Două reguli

Token-urile sunt proprietăți CSS custom simple, deci poți redirecționa oricare dintre ele din propria foaie de stil. Două lucruri decid dacă regula ta chiar are efect.

Depășește (0,1,0). Fiecare bloc pe care îl injectăm își declară token-urile la specificitatea (0,1,0) pe .baas-wrap și [data-baas-blog] — aceeași greutate în orice schemă de culoare. Dar noi injectăm la runtime, după CSS-ul tău de build, deci egalitatea ne revine nouă: regula ta are nevoie de (0,2,0) sau mai mult. Un strămoș plus hook-ul e suficient — .my-blog .baas-wrap.

Numește wrapper-ul, nu doar containerul tău. O proprietate custom declarată pe un element bate una moștenită de la un strămoș, oricât de specifică ar fi regula strămoșului — iar noi le declarăm pe .baas-wrap. Setarea --md2-* pe propriul container, care e părintele lui, nu face absolut nimic.

Site-uri cu comutator light/dark

Un blog poate stoca o pereche light/dark în loc de o singură paletă. Activează Variantă dark în editorul de teme: selectoarele se împart în tab-uri Light și Dark, ambele palete se previzualizează una lângă alta, iar Inversează light ↔ dark schimbă cele două seturi între ele (util când paleta ta unică a fost scanată din tema întunecată). Cu opțiunea dezactivată, paleta unică se aplică tuturor vizitatorilor, exact ca înainte.

Ce set primește un cititor se decide în această ordine, prima potrivire câștigând:

data-baas-theme="light" sau "dark" pe containerul blogului — tu ne spui direct ce e blogul acesta, indiferent ce face pagina din jur.
Propriul tău data-theme="light" / "dark", pe <html>, pe un wrapper sau pe container. Acesta e modul convențional în care site-urile își fac temele, deci un site cu un comutator obișnuit re-temează blogul gratuit, fără niciun CSS de-al tău.
Preferința de sistem a cititorului (prefers-color-scheme).
Dacă nimic din toate acestea, setul light.

Propune de pe website înțelege și comutatoarele: când scanarea găsește media query-uri prefers-color-scheme sau reguli data-theme în CSS-ul tău, inventariază separat culorile fiecărei scheme și propune ambele seturi dintr-o singură trecere. Verifică ambele tab-uri înainte de a salva, ca la orice propunere.

Comutatoare care nu folosesc data-theme

Dacă site-ul tău schimbă schemele altfel — o clasă .dark pe <html>, un atribut custom — doar preferința de sistem e vizibilă pentru CSS-ul injectat, deci un comutator forțat poate ieși din sincron. Fă puntea din propriul CSS. Numește wrapper-ul pe lângă container și începe cu un strămoș, ca regula să treacă de (0,1,0):

/* Exemplu: site-ul comută printr-o clasă .dark; redirecționezi token-urile */
:root.dark .my-blog[data-baas-blog],
:root.dark .my-blog .baas-wrap {
  --md2-bg: #101720;
  --md2-bg-soft: #16202b;
  --md2-border: #2b3a4a;
  --md2-text: #e8eef4;
  --md2-muted: #93a1b0;
}

Suprascrie oricare dintre cele 15 token-uri pe care le folosește conținutul tău (inclusiv nuanțele de fundal *-bg); verifică ambele teme pe un articol cu callout-uri și panouri.

Lasă site-ul tău să dețină paleta

Dacă site-ul tău are deja un strat de token-uri, îndreaptă-le pe ale noastre către el o singură dată, iar blogul se re-temează odată cu site-ul pentru totdeauna — nicio a doua paletă de întreținut și nicio scanare de refăcut când se schimbă brandul. Pune data-baas-theme="inherit" pe container ca să retragi complet paleta configurată a blogului, apoi furnizează token-urile tu:

<div data-baas-blog data-baas-theme="inherit" data-key="pk_…" …></div>

.my-blog[data-baas-blog],
.my-blog .baas-wrap {
  --md2-text: var(--text-body);
  --md2-muted: var(--text-muted);
  --md2-border: var(--border-neutral);
  --md2-bg: var(--surface-raised);
  --md2-bg-soft: var(--surface-card);
  --color-base-100: var(--surface-raised);   /* fallback-uri citite și de MD2 */
  --color-base-200: var(--surface-card);
  --color-base-300: var(--border-neutral);
  --color-base-content: var(--text-body);
}

Fiindcă variabilele tale fac treaba, ambele teme sunt acoperite de un singur bloc. Suprafețele și textul au nevoie de acest tratament; cele cinci accente sunt tonuri medii și se citesc pe ambele fundaluri, deci de obicei e corect să le lași pe seama paletei blogului.