▲ PromNET

SÚGÓ › Kezdési útmutató

AppShell vibe — saját téma, sidebar-szín, accent

Hogyan szabd személyre az /app megjelenését: dark / light mód, sidebar-színváltó, accent-szín, saját CSS-cseppentő.

A PromNET /app felülete (AppShell) alaphelyzetben dark mode, de a “vibe-customization” rendszerrel többféleképpen is testreszabhatod: sidebar-szín, accent-szín, light/dark mód, és (haladóknak) saját CSS.

Ez a cikk: hol találod a beállításokat, mit lehet változtatni, és hogyan tartja meg a beállításodat a böngésző.

Hol állítod be

Az /app/profil oldalon, a “Megjelenés” szekcióban:

  1. Lépj be a profilodra
  2. Görgess a “Megjelenés” szekcióhoz (vagy kattints a top-bar paletta-ikonjára)
  3. Itt látod a vibe-előbeállításokat egy live-preview kártyán
  4. Kattints arra a vibe-ra, amelyik tetszik
  5. “Mentés” — azonnal aktív, az /app oldalt frissítve látod az új színeket

Mit állíthatsz

1. Light / dark mód

  • Dark mode (default) — sötét háttér, szem-kímélő, éjszakai munkához
  • Light mode — fehér háttér, klasszikus, nappali használathoz
  • Auto — a böngésződ prefers-color-scheme-jét követi (ha napi szinten váltakozol éjszakai/nappali között)

2. Sidebar-szín

A bal oldali navigációs sávhoz választható szín-paletta:

  • Default (semleges) — sötétszürke háttér
  • Mély-piros — PromNET-brand szín
  • Indigo — egy lágy lila-kék
  • Esőerdő-zöld — földes, kontrasztos
  • Éjkék — tiszta dark-blue
  • Custom — saját hex-kód (haladók)

3. Accent-szín

A linkek, gombok, kiemelt elemek színe:

  • PromNET piros (default)
  • Cobalt (kék)
  • Smaragd (zöld)
  • Borostyán (sárga / arany)
  • Ametiszt (lila)

A választott accent mindenhol érvényesül — gombok, linkek, fókusz-keret, progress-bar-ok.

4. Sűrűség

  • Komfort (default) — több padding, jobb olvashatóság
  • Kompakt — szorosabb sorközök, több info egy képernyőn (laptop-on hasznos)

Saját CSS — haladók

A “Megjelenés” szekció alján van egy “Saját CSS” mező — egy textarea, amibe CSS-szabályokat írhatsz. Ezt a kódot a /app/* oldalakon beillesztjük a <head>-be utolsóként, így felülbírál minden előbeállítást.

Példa — sidebar átlátszó:

.app-sidebar {
  background: rgba(15, 15, 15, 0.6);
  backdrop-filter: blur(12px);
}

Példa — kompaktabb gomb-ok:

.btn-primary {
  padding: 6px 12px;
  font-size: 13px;
}

Korlátok:

  • Max. 4 KB — ennél hosszabb CSS-t a “Mentés” elutasít
  • @import blokkolva (extern CSS-betöltés tiltva — biztonsági ok)
  • expression() és javascript: URL-ek blokkolva
  • position: fixed korlátozott — a top-bar nem mozdul

A saját CSS csak rád érvényes — nem látja senki más, kizárólag a saját böngésződ kérése esetén kerül be a HTML-be.

Hogyan tárolódik

A vibe-beállítások két helyen tárolódnak:

  1. D1-adatbázisban a fiókodhoz kötve — minden eszközről ugyanazt látod (asztal + laptop + telefon)
  2. localStorage-ben a böngésződben — első page-load gyorsabb (nem kell várni a fetch-re)

Ha más böngészőből jelentkezel be (pl. új laptop), a beállításaid szinkronizálódnak — nem kell újra-állítani.

Hibaelhárítás

“Mentés gomb nyomása után nem változik a vibe” — frissítsd az oldalt (Ctrl+R / Cmd+R). A localStorage-cache miatt néha az új beállítás csak a következő full-load-on jelenik meg. Ha tartós, töröld a böngésző-cache-t a /app/* URL-re.

“A saját CSS-em nem érvényesül” — ellenőrizd:

  1. Mentés sikeres volt-e (ha nem, hibaüzenet jelenik meg, pl. túl hosszú, blokkolt szabály)
  2. A CSS-szelektorod tényleg passzol-e (DevTools → Inspect)
  3. A specificitás magasabb-e, mint az alapértelmezett szabályé (használj !important-et csak végszükségben)

“Light mode-ban a logo láthatatlan” — bug, jelezted egy threadet a /community/altalanos-on, vagy ticketet a /app/support-on. A light mode béta funkció, néhány elem még nincs teljesen átszabva.

“Visszaállítás default-ra” — a “Megjelenés” szekció alján “Vibe visszaállítás” gomb. Egy klikk → minden default lesz (dark mode, PromNET-piros, semleges sidebar, üres custom CSS).

Roadmap

A vibe-customization aktív béta:

  • Téma-export / import — JSON-formátumban megosztható tématok
  • Marketplace-tématok — ingyenes / fizetős tématok (pl. 990 Ft egy szép, profi vibrate)
  • Per-projekt-vibe — minden Cloud-projekt-konfignál más vibe (most a globális AppShell-vibe-ot követi minden)
  • Auto-light/dark idő-alapon — pl. 18:00 után automatikus dark mode

Következő lépés

Nyisd meg a profilod “Megjelenés” szekcióját és játssz a színekkel. A vibe-váltás reverzibilis — bármikor visszatérhetsz a default-hoz.

← Kezdési útmutató Frissítve: 2026. 05. 02.