ajustes: los seis accesos arriba y colores configurables

Arriba de Ajustes, una rejilla con lo que se elige en la bienvenida (identidad, perfil de uso, portada, comunidad y saludo) y Colores. Cada acceso baja a su bloque y cada bloque guarda al tocar. Colores: ocho paletas de un toque y fondo, texto y resalte a mano. Se guardan en la config (mobileColors) y van en /mobile-colors.css, la ultima hoja (la CSP no deja estilos en linea). Solo con el aspecto Acampada; elegir colores pasa a el. Si el texto no se lee sobre el fondo se cambia por negro o blanco y se avisa. En la bienvenida, Colores es un paso mas, despues del tipo de portada. Identidad y saludo envian a las rutas del dev de la bienvenida; fork_routes.js cambia su vuelta a /welcome por la vuelta a Ajustes. Todo en mobile_settings.js; en las vistas del dev solo hay llamadas a mobile_ui. Miniaturas de los skins rehechas (salia Karvan).
2026-10-20 12:23:25 +02:00 · 2026-10-20 12:23:25 +02:00 · e861b05946
commit e861b05946
parent 18098dd38e
11 changed files with 709 additions and 18 deletions
--- a/src/backend/fork_routes.js
+++ b/src/backend/fork_routes.js
@ -4,8 +4,9 @@
 // Va en la cadena justo delante de las rutas del dev (backend.js lo monta con una
 // sola linea). Lo que no atiende pasa al del dev con next(). Aqui viven:
 //  - mobile_layer.js: lanzador, filtro y avatar de la barra de arriba
-//  - wrapUpstream: mira lo que contesta el dev (seccion apagada, guardar modulos)
-//  - las rutas propias: tema y Modulos en el movil, barra de abajo, identidades
+//  - wrapUpstream: mira lo que contesta el dev (seccion apagada, guardar modulos,
+//    vuelta a Ajustes desde los formularios de la bienvenida)
+//  - las rutas propias: tema, colores y Modulos en el movil, barra de abajo, identidades
 //
 // backend.js es del dev y cambia en 34 de cada 39 versiones: nada de esto va alli.
 // Ver GUIA_DE_DESARROLLO.md.
@ -43,6 +44,13 @@ const wrapUpstream = async (ctx, next) => {
  await next();
  if (!isMobile() || ctx.status < 300 || ctx.status >= 400) return;
  const to = String(ctx.response.get('Location') || '');
+  // identidad y saludo desde Ajustes usan las rutas de la bienvenida (las del dev);
+  // estas vuelven a /welcome y aqui se cambia por el bloque de Ajustes de donde se vino
+  if (ctx.method === 'POST' && /^\/welcome\/(profile|greeting)$/.test(ctx.path) && /^(https?:\/\/[^/]+)?\/welcome$/.test(to)) {
+    const back = String((ctx.request.body || {}).returnTo || '');
+    if (/^\/settings(#[a-z-]+)?$/.test(back)) ctx.redirect(back);
+    return;
+  }
  // guardar en Modulos: volver con el aviso de guardado
  if (ctx.method === 'POST' && ctx.path === '/save-modules') { ctx.redirect('/modules?saved=1'); return; }
  if (ctx.method === 'GET' && ctx.path !== '/modules' && /^(https?:\/\/[^/]+)?\/modules$/.test(to)) {
@ -69,6 +77,27 @@ const mobileLayer = require('./mobile_layer')({ getViewerId, about });
    ctx.cookies.set('theme', theme, { httpOnly: true, sameSite: 'strict', secure: ctx.secure });
    ctx.redirect('/settings#theme');
  })
+  // colores del movil (mobile_settings.js): se guardan en la config y el aspecto pasa
+  // a Acampada, que es el tema que lee esas variables
+  .post('/settings/colors', koaBody(), async (ctx, next) => {
+    if (!isMobile()) return next();
+    const body = ctx.request.body || {};
+    const cfg = getConfig();
+    cfg.mobileColors = require('../views/mobile_settings').colorsFromBody(body);
+    if ((cfg.themes || {}).current !== 'Acampada') {
+      cfg.themes = { ...(cfg.themes || {}), current: 'Acampada' };
+      ctx.cookies.set('theme', 'Acampada', { httpOnly: true, sameSite: 'strict', secure: ctx.secure });
+    }
+    saveConfig(cfg);
+    const back = String(body.returnTo || '');
+    ctx.redirect(/^\/(settings|welcome)(#[a-z-]+)?$/.test(back) ? back : '/settings#colors');
+  })
+  .get('/mobile-colors.css', async (ctx, next) => {
+    if (!isMobile()) return next();
+    ctx.type = 'text/css';
+    ctx.set('Cache-Control', 'public, max-age=31536000, immutable');
+    ctx.body = require('../views/mobile_settings').colorsCss(getConfig());
+  })
  // Modulos en el movil: la vista propia (mobile_modules_view.js); en escritorio, la de upstream
  .get('/modules', async (ctx, next) => {
    if (!isMobile()) return next();
--- a/src/backend/mobile_layer.js
+++ b/src/backend/mobile_layer.js
@ -2,7 +2,7 @@
 // Lo que la interfaz de la rama necesita del backend, fuera de backend.js.
 //
 // Prepara lo que leen la barra de arriba y el lanzador de hive_views.js: el filtro
-// Personal/Social, que el lanzador no va en la portada y el avatar propio. Lo
+// Personal/Social, que el lanzador no va en la portada y el avatar y nombre propios. Lo
 // monta el router propio (fork_routes.js) delante de las rutas del dev. Nada de
 // esto corre en escritorio. Ver GUIA_DE_DESARROLLO.md.
 //
@ -24,11 +24,17 @@ module.exports = ({ getViewerId, about }) => {
      if (typeof img === 'string' && img[0] === '&' && img !== NULL_IMG) global.__OASIS_SELF_AVATAR__ = `/image/256/${encodeURIComponent(img)}`;
      else if (typeof img === 'string' && img[0] === '/') global.__OASIS_SELF_AVATAR__ = img;
      else global.__OASIS_SELF_AVATAR__ = null;
+      // el nombre, para el bloque de identidad de Ajustes
+      const name = me ? await about.name(me) : null;
+      // sin nombre puesto, ssb-about da un trozo de la clave: eso no es un nombre
+      global.__OASIS_SELF_NAME__ = typeof name === 'string' && name[0] !== '@' && !String(me).startsWith('@' + name) ? name : '';
    } catch (_) {}
  };

  return async (ctx, next) => {
    if (!isMobile() || !isPage(ctx.path)) return next();
+    // al guardar nombre o avatar, la siguiente pagina ya los lee nuevos
+    if (ctx.method === 'POST' && /^\/(welcome\/profile|profile\/edit)$/.test(ctx.path)) { await next(); avatarAt = 0; return; }
    global.__OASIS_HIVE_FILTER__ = (ctx.path === '/activity' && (ctx.query.hive === 'personal' || ctx.query.hive === 'community')) ? ctx.query.hive : '';
    // el lanzador ya no va en la portada: la portada es la actividad y los modulos
    // estan en la hoja de la pestaña Menu (docs/ESTUDIO_NAVEGACION.md)
--- a/src/client/assets/images/theme-acampada.png
+++ b/src/client/assets/images/theme-acampada.png
--- a/src/client/assets/images/theme-oasismobile.png
+++ b/src/client/assets/images/theme-oasismobile.png
--- a/src/client/assets/styles/mobile_ux.css
+++ b/src/client/assets/styles/mobile_ux.css
@ -15,7 +15,7 @@
  --ux-bg: var(--a26-bg, #121212);
  --ux-fg: var(--a26-fg, #f2f2f2);
  --ux-accent: var(--a26-neon, #ffd700);
-  --ux-on-accent: #000;
+  --ux-on-accent: var(--a26-on-neon, #000);
  --ux-soft: var(--a26-soft, #1e1e1e);
  --ux-muted: var(--a26-muted, #a8a8a8);
  --ux-line: var(--a26-fg, #3a3a3a);
@ -365,7 +365,7 @@ body .main-content > .main-column { padding-left: 0 !important; padding-right: 0
 /* filas etiqueta / valor de las fichas (plazo, estado, creado el): en dos columnas */
 .main-column table.tribe-info-table tr { display: grid !important; grid-template-columns: minmax(96px, 38%) 1fr; align-items: center; }
 .main-column table.tribe-info-table td { display: block !important; border: 0 !important; padding: 8px 10px !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-.main-column table.tribe-info-table tr + tr { border-top: 1px solid #ccc !important; }
+.main-column table.tribe-info-table tr + tr { border-top: 1px solid var(--a26-line, #ccc) !important; }

 /* bienvenida: "Ahora no" al final, como enlace discreto */
 .main-column .welcome-skip-end { text-align: center; margin: 8px 0 0 !important; }
@ -624,6 +624,56 @@ body:has(#oasis-menu-toggle:checked) form.oasis-phone-state { display: none !imp
 }
@media (min-width: 700px) { .main-column .wf-pick button.ux-pick-card { flex-direction: row; text-align: left; margin: 0 0 10px !important; } }

+/* ---------- Ajustes: los seis accesos de arriba (mobile_settings.js) ---------- */
+/* rejilla de 3x2 a 360px: icono, nombre y lo que hay puesto. Cada acceso baja a su
+   bloque; el bloque deja aire arriba para que el titulo no quede pegado al borde */
+.main-column section[id] { scroll-margin-top: 76px; }
+.main-column div.quick-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 10px; margin: 0 0 6px !important; padding: 0 !important; }
+.main-column a.quick-tile {
+  display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
+  min-height: 104px; min-width: 0; padding: 12px 6px 10px !important; box-sizing: border-box; text-decoration: none !important;
+  background: var(--ux-bg) !important; color: var(--ux-fg) !important;
+  border: 2px solid var(--ux-line) !important; border-radius: 14px !important; box-shadow: 0 3px 0 var(--ux-line) !important;
+}
+.main-column a.quick-tile:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ux-line) !important; background: var(--ux-accent) !important; color: var(--ux-on-accent) !important; }
+.main-column .quick-tile .quick-ico.has-svg { display: block; width: 30px; height: 30px; margin: 0 0 6px; }
+.main-column .quick-tile .quick-ico svg { width: 100%; height: 100%; }
+.main-column .quick-tile .quick-name { display: block; font-size: 14px; font-weight: 700; line-height: 1.15; }
+.main-column .quick-tile .quick-now { display: block; max-width: 100%; margin-top: 3px; font-size: 12px; line-height: 1.2; color: var(--ux-muted) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.main-column .quick-tile:active .quick-now { color: inherit !important; }
+.main-column div.quick-links { display: block !important; margin: 0 !important; padding: 0 !important; }
+.main-column div.quick-links a { display: block !important; text-align: center; margin: 0 0 10px !important; }
+.main-column section#identity .filter-btn { display: inline-block; margin-top: 12px !important; }
+
+/* ---------- colores ---------- */
+/* paletas de un toque, dos por fila, con su muestra (fondo, texto y acento); debajo,
+   "A tu gusto" con los tres selectores de color del sistema */
+.main-column div.color-pick { margin: 0 !important; padding: 0 !important; }
+.main-column div.pal-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 10px; padding: 0 !important; margin: 0 0 12px !important; }
+.main-column button.pal-card {
+  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; width: 100% !important; min-width: 0 !important; min-height: 56px !important; height: auto !important;
+  margin: 0 !important; padding: 8px 10px !important; text-align: left; text-transform: none !important; font-family: var(--ux-text) !important;
+  background: var(--ux-bg) !important; color: var(--ux-fg) !important; border: 2px solid var(--ux-line) !important; border-radius: 14px !important; box-shadow: 0 3px 0 var(--ux-line) !important;
+}
+.main-column button.pal-card.is-current { border-width: 3px !important; box-shadow: 0 0 0 3px var(--ux-accent), 0 3px 0 var(--ux-line) !important; }
+.main-column button.pal-card { justify-content: flex-start !important; }
+.main-column .pal-card .pal-name { flex: 1 1 auto; min-width: 0; text-align: left; font-size: 15px; font-weight: 700; line-height: 1.15; }
+.main-column .pal-card .ux-pick-now { display: none; }
+.pal-swatch { display: inline-flex; flex: 0 0 auto; width: 42px; height: 30px; margin-right: 10px; border-radius: 8px; overflow: hidden; border: 2px solid var(--ux-line); }
+.pal-swatch .pal-bg { flex: 2 1 0; }
+.pal-swatch .pal-fg { flex: 1 1 0; }
+.pal-swatch .pal-ac { flex: 1 1 0; }
+.main-column details.color-custom { margin: 4px 0 0 !important; padding: 0 !important; border: 2px solid var(--ux-line) !important; border-radius: 14px !important; background: var(--ux-bg) !important; }
+.main-column details.color-custom > summary { display: flex; align-items: center; min-height: 52px; padding: 8px 12px; font-weight: 700; cursor: pointer; list-style: none; }
+.main-column details.color-custom > summary::-webkit-details-marker { display: none; }
+.main-column details.color-custom > summary::after { content: "\25BE"; margin-left: auto; font-size: 18px; }
+.main-column details.color-custom[open] > summary::after { content: "\25B4"; }
+.main-column form.color-custom-form { padding: 4px 12px 14px !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
+.main-column form.color-custom-form label.color-field { display: flex !important; align-items: center; justify-content: space-between; min-height: 52px; margin: 0 0 8px !important; }
+.main-column label.color-field input[type="color"] { width: 64px !important; height: 44px !important; padding: 2px !important; border: 2px solid var(--ux-line) !important; border-radius: 10px !important; background: var(--ux-bg) !important; }
+.main-column form.color-custom-form .create-button { width: 100% !important; margin-top: 6px !important; }
+.main-column .color-pick .welcome-action { margin-top: 4px !important; }
+
 /* ---------- tabletas y pantallas anchas ---------- */
 /* a 800dp todo se estiraba: lineas larguisimas y la hoja del menu con cinco iconos
   repartidos en 800px. Contenido a 720px como mucho, centrado; la hoja, igual */
--- a/src/client/assets/translations/i18n_fork.js
+++ b/src/client/assets/translations/i18n_fork.js
@ -22,6 +22,36 @@ module.exports = {
    bbMenuClose: "Close",
    uxPickHint: "Tap one and it is saved. You can change it any time in Settings.",
    uxPickCurrent: "In use",
+    quickTitle: "The basics",
+    quickHint: "What you chose when you started, one tap away.",
+    quick_identity: "Identity",
+    quick_workflow: "Profile",
+    quick_ux: "Home screen",
+    quick_colors: "Colours",
+    quick_community: "Community",
+    quick_greeting: "Greeting",
+    quickProfileMore: "Description and more",
+    quickJoinPub: "Join a pub",
+    quickSeePeers: "Who you sync with",
+    quickGreetingPlaceholder: "Say hello to the community",
+    welcomeHintColors: "Background, text and highlight colour of the app.",
+    colorsHint: "Tap a palette and it is applied.",
+    colorsSkinNote: "Colours go with the Acampada look; choosing one switches to it.",
+    colorsCustom: "Your own",
+    colorsBg: "Background",
+    colorsFg: "Text",
+    colorsAccent: "Highlight",
+    colorsApply: "Apply",
+    colorsFixed: "The text could not be read on that background, so it was set to black or white.",
+    colorsKeep: "Keep these",
+    palette_acampada: "Acampada",
+    palette_noche: "Night",
+    palette_oro: "Gold",
+    palette_bosque: "Forest",
+    palette_lila: "Lilac",
+    palette_brasa: "Ember",
+    palette_papel: "Paper",
+    palette_contraste: "High contrast",
    welcomeStepUseMobile: "Profile",
    welcomeHintUseMobile: "What you use Oasis for. It turns on the modules you need.",
    wfHint_activists: "Assemblies, tribes, votes, forums and shared documents",
@ -116,6 +146,36 @@ module.exports = {
    bbMenuClose: "Cerrar",
    uxPickHint: "Toca uno y queda guardado. Puedes cambiarlo cuando quieras en Ajustes.",
    uxPickCurrent: "En uso",
+    quickTitle: "Lo básico",
+    quickHint: "Lo que elegiste al empezar, a un toque.",
+    quick_identity: "Identidad",
+    quick_workflow: "Perfil",
+    quick_ux: "Portada",
+    quick_colors: "Colores",
+    quick_community: "Comunidad",
+    quick_greeting: "Saludo",
+    quickProfileMore: "Descripción y más",
+    quickJoinPub: "Unirme a un pub",
+    quickSeePeers: "Con quién sincronizas",
+    quickGreetingPlaceholder: "Saluda a la comunidad",
+    welcomeHintColors: "Fondo, texto y color de resalte de la app.",
+    colorsHint: "Toca una paleta y se aplica.",
+    colorsSkinNote: "Los colores van con el aspecto Acampada; al elegir uno se pasa a ese aspecto.",
+    colorsCustom: "A tu gusto",
+    colorsBg: "Fondo",
+    colorsFg: "Texto",
+    colorsAccent: "Resalte",
+    colorsApply: "Aplicar",
+    colorsFixed: "El texto no se leía sobre ese fondo, así que se ha puesto en negro o blanco.",
+    colorsKeep: "Dejar estos",
+    palette_acampada: "Acampada",
+    palette_noche: "Noche",
+    palette_oro: "Oro",
+    palette_bosque: "Bosque",
+    palette_lila: "Lila",
+    palette_brasa: "Brasa",
+    palette_papel: "Papel",
+    palette_contraste: "Alto contraste",
    welcomeStepUseMobile: "Perfil",
    welcomeHintUseMobile: "Para qué usas Oasis. Enciende los módulos que hacen falta.",
    wfHint_activists: "Asambleas, tribus, votaciones, foros y documentos compartidos",
@ -216,6 +276,36 @@ module.exports = {
    bbMenuClose: "Fermer",
    uxPickHint: "Touchez-en un et c'est enregistré. Vous pouvez le changer à tout moment dans les Paramètres.",
    uxPickCurrent: "Actuel",
+    quickTitle: "L'essentiel",
+    quickHint: "Ce que vous avez choisi au début, à portée de doigt.",
+    quick_identity: "Identité",
+    quick_workflow: "Profil",
+    quick_ux: "Accueil",
+    quick_colors: "Couleurs",
+    quick_community: "Communauté",
+    quick_greeting: "Salut",
+    quickProfileMore: "Description et plus",
+    quickJoinPub: "Rejoindre un pub",
+    quickSeePeers: "Avec qui vous synchronisez",
+    quickGreetingPlaceholder: "Dites bonjour à la communauté",
+    welcomeHintColors: "Fond, texte et couleur d'accent de l'application.",
+    colorsHint: "Touchez une palette et elle s'applique.",
+    colorsSkinNote: "Les couleurs vont avec l'aspect Acampada ; en choisir une passe à cet aspect.",
+    colorsCustom: "À votre goût",
+    colorsBg: "Fond",
+    colorsFg: "Texte",
+    colorsAccent: "Accent",
+    colorsApply: "Appliquer",
+    colorsFixed: "Le texte n'était pas lisible sur ce fond, il a été mis en noir ou en blanc.",
+    colorsKeep: "Garder celles-ci",
+    palette_acampada: "Acampada",
+    palette_noche: "Nuit",
+    palette_oro: "Or",
+    palette_bosque: "Forêt",
+    palette_lila: "Lilas",
+    palette_brasa: "Braise",
+    palette_papel: "Papier",
+    palette_contraste: "Contraste élevé",
    welcomeStepUseMobile: "Profil",
    welcomeHintUseMobile: "À quoi vous sert Oasis. Active les modules nécessaires.",
    wfHint_activists: "Assemblées, tribus, votes, forums et documents partagés",
@ -310,6 +400,36 @@ module.exports = {
    bbMenuClose: "Itxi",
    uxPickHint: "Bat ukitu eta gordeta geratzen da. Nahi duzunean alda dezakezu Ezarpenetan.",
    uxPickCurrent: "Erabiltzen",
+    quickTitle: "Oinarrizkoa",
+    quickHint: "Hasieran aukeratu zenuena, ukitu batera.",
+    quick_identity: "Nortasuna",
+    quick_workflow: "Profila",
+    quick_ux: "Azala",
+    quick_colors: "Koloreak",
+    quick_community: "Komunitatea",
+    quick_greeting: "Agurra",
+    quickProfileMore: "Deskribapena eta gehiago",
+    quickJoinPub: "Pub batean sartu",
+    quickSeePeers: "Norekin sinkronizatzen zaren",
+    quickGreetingPlaceholder: "Agurtu komunitatea",
+    welcomeHintColors: "Aplikazioaren hondoa, testua eta nabarmentze-kolorea.",
+    colorsHint: "Ukitu paleta bat eta aplikatzen da.",
+    colorsSkinNote: "Koloreak Acampada itxurarekin doaz; bat aukeratzean itxura horretara pasatzen da.",
+    colorsCustom: "Zure gustura",
+    colorsBg: "Hondoa",
+    colorsFg: "Testua",
+    colorsAccent: "Nabarmendua",
+    colorsApply: "Aplikatu",
+    colorsFixed: "Testua ez zen irakurtzen hondo horretan, beltzez edo zuriz jarri da.",
+    colorsKeep: "Hauek utzi",
+    palette_acampada: "Acampada",
+    palette_noche: "Gaua",
+    palette_oro: "Urrea",
+    palette_bosque: "Basoa",
+    palette_lila: "Lila",
+    palette_brasa: "Txingarra",
+    palette_papel: "Papera",
+    palette_contraste: "Kontraste handia",
    welcomeStepUseMobile: "Profila",
    welcomeHintUseMobile: "Oasis zertarako erabiltzen duzun. Behar diren moduluak pizten ditu.",
    wfHint_activists: "Batzarrak, tribuak, bozketak, foroak eta dokumentu partekatuak",
@ -404,6 +524,36 @@ module.exports = {
    bbMenuClose: "Schließen",
    uxPickHint: "Tippe eins an und es ist gespeichert. Du kannst es jederzeit in den Einstellungen ändern.",
    uxPickCurrent: "Aktiv",
+    quickTitle: "Das Wichtigste",
+    quickHint: "Was du am Anfang gewählt hast, mit einem Tipp.",
+    quick_identity: "Identität",
+    quick_workflow: "Profil",
+    quick_ux: "Startseite",
+    quick_colors: "Farben",
+    quick_community: "Gemeinschaft",
+    quick_greeting: "Gruß",
+    quickProfileMore: "Beschreibung und mehr",
+    quickJoinPub: "Einem Pub beitreten",
+    quickSeePeers: "Mit wem du synchronisierst",
+    quickGreetingPlaceholder: "Sag der Gemeinschaft Hallo",
+    welcomeHintColors: "Hintergrund, Text und Akzentfarbe der App.",
+    colorsHint: "Tippe auf eine Palette und sie wird angewendet.",
+    colorsSkinNote: "Die Farben gehören zum Acampada-Design; mit einer Auswahl wechselst du dorthin.",
+    colorsCustom: "Eigene",
+    colorsBg: "Hintergrund",
+    colorsFg: "Text",
+    colorsAccent: "Akzent",
+    colorsApply: "Anwenden",
+    colorsFixed: "Der Text war auf diesem Hintergrund nicht lesbar, daher wurde er schwarz oder weiß gesetzt.",
+    colorsKeep: "Diese behalten",
+    palette_acampada: "Acampada",
+    palette_noche: "Nacht",
+    palette_oro: "Gold",
+    palette_bosque: "Wald",
+    palette_lila: "Flieder",
+    palette_brasa: "Glut",
+    palette_papel: "Papier",
+    palette_contraste: "Hoher Kontrast",
    welcomeStepUseMobile: "Profil",
    welcomeHintUseMobile: "Wofür du Oasis nutzt. Schaltet die nötigen Module ein.",
    wfHint_activists: "Versammlungen, Stämme, Abstimmungen, Foren und gemeinsame Dokumente",
@ -498,6 +648,36 @@ module.exports = {
    bbMenuClose: "Chiudi",
    uxPickHint: "Toccane uno ed è salvato. Puoi cambiarlo quando vuoi nelle Impostazioni.",
    uxPickCurrent: "In uso",
+    quickTitle: "L'essenziale",
+    quickHint: "Quello che hai scelto all'inizio, a portata di tocco.",
+    quick_identity: "Identità",
+    quick_workflow: "Profilo",
+    quick_ux: "Pagina iniziale",
+    quick_colors: "Colori",
+    quick_community: "Comunità",
+    quick_greeting: "Saluto",
+    quickProfileMore: "Descrizione e altro",
+    quickJoinPub: "Entra in un pub",
+    quickSeePeers: "Con chi sincronizzi",
+    quickGreetingPlaceholder: "Saluta la comunità",
+    welcomeHintColors: "Sfondo, testo e colore di risalto dell'app.",
+    colorsHint: "Tocca una tavolozza e viene applicata.",
+    colorsSkinNote: "I colori vanno con l'aspetto Acampada; sceglierne uno passa a quell'aspetto.",
+    colorsCustom: "A modo tuo",
+    colorsBg: "Sfondo",
+    colorsFg: "Testo",
+    colorsAccent: "Risalto",
+    colorsApply: "Applica",
+    colorsFixed: "Il testo non si leggeva su quello sfondo, quindi è stato messo nero o bianco.",
+    colorsKeep: "Tieni questi",
+    palette_acampada: "Acampada",
+    palette_noche: "Notte",
+    palette_oro: "Oro",
+    palette_bosque: "Bosco",
+    palette_lila: "Lilla",
+    palette_brasa: "Brace",
+    palette_papel: "Carta",
+    palette_contraste: "Alto contrasto",
    welcomeStepUseMobile: "Profilo",
    welcomeHintUseMobile: "A cosa ti serve Oasis. Attiva i moduli necessari.",
    wfHint_activists: "Assemblee, tribù, votazioni, forum e documenti condivisi",
@ -592,6 +772,36 @@ module.exports = {
    bbMenuClose: "Fechar",
    uxPickHint: "Toque num e fica guardado. Pode mudá-lo quando quiser nas Definições.",
    uxPickCurrent: "Em uso",
+    quickTitle: "O essencial",
+    quickHint: "O que escolheu ao começar, a um toque.",
+    quick_identity: "Identidade",
+    quick_workflow: "Perfil",
+    quick_ux: "Página inicial",
+    quick_colors: "Cores",
+    quick_community: "Comunidade",
+    quick_greeting: "Saudação",
+    quickProfileMore: "Descrição e mais",
+    quickJoinPub: "Entrar num pub",
+    quickSeePeers: "Com quem sincroniza",
+    quickGreetingPlaceholder: "Diga olá à comunidade",
+    welcomeHintColors: "Fundo, texto e cor de destaque da app.",
+    colorsHint: "Toque numa paleta e ela aplica-se.",
+    colorsSkinNote: "As cores vão com o aspeto Acampada; escolher uma passa para esse aspeto.",
+    colorsCustom: "À sua maneira",
+    colorsBg: "Fundo",
+    colorsFg: "Texto",
+    colorsAccent: "Destaque",
+    colorsApply: "Aplicar",
+    colorsFixed: "O texto não se lia nesse fundo, por isso ficou preto ou branco.",
+    colorsKeep: "Manter estas",
+    palette_acampada: "Acampada",
+    palette_noche: "Noite",
+    palette_oro: "Ouro",
+    palette_bosque: "Floresta",
+    palette_lila: "Lilás",
+    palette_brasa: "Brasa",
+    palette_papel: "Papel",
+    palette_contraste: "Alto contraste",
    welcomeStepUseMobile: "Perfil",
    welcomeHintUseMobile: "Para que usa o Oasis. Liga os módulos necessários.",
    wfHint_activists: "Assembleias, tribos, votações, fóruns e documentos partilhados",
@ -686,6 +896,36 @@ module.exports = {
    bbMenuClose: "关闭",
    uxPickHint: "点一下即保存。随时可以在设置中更改。",
    uxPickCurrent: "使用中",
+    quickTitle: "基本设置",
+    quickHint: "开始时的选择，一点即达。",
+    quick_identity: "身份",
+    quick_workflow: "用途",
+    quick_ux: "首页",
+    quick_colors: "颜色",
+    quick_community: "社区",
+    quick_greeting: "问候",
+    quickProfileMore: "简介及更多",
+    quickJoinPub: "加入 pub",
+    quickSeePeers: "与谁同步",
+    quickGreetingPlaceholder: "向社区问好",
+    welcomeHintColors: "应用的背景、文字和强调色。",
+    colorsHint: "点一个配色即可应用。",
+    colorsSkinNote: "颜色配合 Acampada 外观；选择后会切换到该外观。",
+    colorsCustom: "自定义",
+    colorsBg: "背景",
+    colorsFg: "文字",
+    colorsAccent: "强调色",
+    colorsApply: "应用",
+    colorsFixed: "文字在该背景上看不清，已改为黑色或白色。",
+    colorsKeep: "保留这些",
+    palette_acampada: "Acampada",
+    palette_noche: "夜晚",
+    palette_oro: "金色",
+    palette_bosque: "森林",
+    palette_lila: "丁香",
+    palette_brasa: "余烬",
+    palette_papel: "纸张",
+    palette_contraste: "高对比度",
    welcomeStepUseMobile: "用途",
    welcomeHintUseMobile: "你用 Oasis 做什么。会打开需要的模块。",
    wfHint_activists: "集会、部落、投票、论坛和共享文档",
@ -780,6 +1020,36 @@ module.exports = {
    bbMenuClose: "إغلاق",
    uxPickHint: "المس واحدًا ويُحفظ. يمكنك تغييره في أي وقت من الإعدادات.",
    uxPickCurrent: "قيد الاستخدام",
+    quickTitle: "الأساسيات",
+    quickHint: "ما اخترته في البداية، بلمسة واحدة.",
+    quick_identity: "الهوية",
+    quick_workflow: "الملف",
+    quick_ux: "الصفحة الرئيسية",
+    quick_colors: "الألوان",
+    quick_community: "المجتمع",
+    quick_greeting: "التحية",
+    quickProfileMore: "الوصف والمزيد",
+    quickJoinPub: "الانضمام إلى pub",
+    quickSeePeers: "مع من تتزامن",
+    quickGreetingPlaceholder: "قل مرحبًا للمجتمع",
+    welcomeHintColors: "لون الخلفية والنص والتمييز في التطبيق.",
+    colorsHint: "المس لوحة ألوان فتُطبَّق.",
+    colorsSkinNote: "الألوان تأتي مع مظهر Acampada؛ اختيار لون ينقلك إليه.",
+    colorsCustom: "على ذوقك",
+    colorsBg: "الخلفية",
+    colorsFg: "النص",
+    colorsAccent: "التمييز",
+    colorsApply: "تطبيق",
+    colorsFixed: "لم يكن النص مقروءًا على تلك الخلفية، فجُعل أسود أو أبيض.",
+    colorsKeep: "الإبقاء على هذه",
+    palette_acampada: "Acampada",
+    palette_noche: "ليل",
+    palette_oro: "ذهب",
+    palette_bosque: "غابة",
+    palette_lila: "ليلكي",
+    palette_brasa: "جمر",
+    palette_papel: "ورق",
+    palette_contraste: "تباين عالٍ",
    welcomeStepUseMobile: "الملف",
    welcomeHintUseMobile: "لماذا تستخدم Oasis. يفعّل الوحدات التي تحتاجها.",
    wfHint_activists: "جمعيات وقبائل وتصويت ومنتديات ووثائق مشتركة",
@ -874,6 +1144,36 @@ module.exports = {
    bbMenuClose: "बंद करें",
    uxPickHint: "एक पर टैप करें और वह सेव हो जाएगा। सेटिंग्स में इसे कभी भी बदल सकते हैं।",
    uxPickCurrent: "चालू",
+    quickTitle: "मूल बातें",
+    quickHint: "शुरुआत में जो चुना था, एक टैप पर।",
+    quick_identity: "पहचान",
+    quick_workflow: "प्रोफ़ाइल",
+    quick_ux: "मुखपृष्ठ",
+    quick_colors: "रंग",
+    quick_community: "समुदाय",
+    quick_greeting: "अभिवादन",
+    quickProfileMore: "विवरण और अधिक",
+    quickJoinPub: "किसी pub से जुड़ें",
+    quickSeePeers: "आप किसके साथ सिंक करते हैं",
+    quickGreetingPlaceholder: "समुदाय को नमस्ते कहें",
+    welcomeHintColors: "ऐप का पृष्ठभूमि, टेक्स्ट और हाइलाइट रंग।",
+    colorsHint: "किसी पैलेट पर टैप करें और वह लागू हो जाएगा।",
+    colorsSkinNote: "रंग Acampada रूप के साथ चलते हैं; कोई चुनने पर वही रूप लग जाता है।",
+    colorsCustom: "अपनी पसंद",
+    colorsBg: "पृष्ठभूमि",
+    colorsFg: "टेक्स्ट",
+    colorsAccent: "हाइलाइट",
+    colorsApply: "लागू करें",
+    colorsFixed: "उस पृष्ठभूमि पर टेक्स्ट पढ़ा नहीं जा रहा था, इसलिए काला या सफ़ेद कर दिया गया।",
+    colorsKeep: "इन्हें रखें",
+    palette_acampada: "Acampada",
+    palette_noche: "रात",
+    palette_oro: "सोना",
+    palette_bosque: "जंगल",
+    palette_lila: "बकाइन",
+    palette_brasa: "अंगार",
+    palette_papel: "काग़ज़",
+    palette_contraste: "उच्च कंट्रास्ट",
    welcomeStepUseMobile: "प्रोफ़ाइल",
    welcomeHintUseMobile: "आप Oasis किस लिए इस्तेमाल करते हैं। ज़रूरी मॉड्यूल चालू करता है।",
    wfHint_activists: "सभाएँ, ट्राइब, मतदान, फ़ोरम और साझा दस्तावेज़",
@ -968,6 +1268,36 @@ module.exports = {
    bbMenuClose: "Закрыть",
    uxPickHint: "Нажмите на вариант, и он сохранится. Изменить можно в любой момент в Настройках.",
    uxPickCurrent: "Сейчас",
+    quickTitle: "Основное",
+    quickHint: "То, что вы выбрали в начале, в одно касание.",
+    quick_identity: "Личность",
+    quick_workflow: "Профиль",
+    quick_ux: "Главный экран",
+    quick_colors: "Цвета",
+    quick_community: "Сообщество",
+    quick_greeting: "Приветствие",
+    quickProfileMore: "Описание и другое",
+    quickJoinPub: "Войти в pub",
+    quickSeePeers: "С кем вы синхронизируетесь",
+    quickGreetingPlaceholder: "Поздоровайтесь с сообществом",
+    welcomeHintColors: "Фон, текст и цвет выделения в приложении.",
+    colorsHint: "Нажмите на палитру, и она применится.",
+    colorsSkinNote: "Цвета идут с оформлением Acampada; при выборе включается оно.",
+    colorsCustom: "Свои",
+    colorsBg: "Фон",
+    colorsFg: "Текст",
+    colorsAccent: "Выделение",
+    colorsApply: "Применить",
+    colorsFixed: "Текст не читался на этом фоне, поэтому он стал чёрным или белым.",
+    colorsKeep: "Оставить эти",
+    palette_acampada: "Acampada",
+    palette_noche: "Ночь",
+    palette_oro: "Золото",
+    palette_bosque: "Лес",
+    palette_lila: "Сирень",
+    palette_brasa: "Угли",
+    palette_papel: "Бумага",
+    palette_contraste: "Высокий контраст",
    welcomeStepUseMobile: "Профиль",
    welcomeHintUseMobile: "Для чего вам Oasis. Включает нужные модули.",
    wfHint_activists: "Собрания, племена, голосования, форумы и общие документы",
--- a/src/views/main_views.js
+++ b/src/views/main_views.js
@ -2010,6 +2010,7 @@ const template = (titlePrefix, ...elements) => {
        ? [ link({ rel: "stylesheet", href: `/assets/styles/mobile.css?v=${assetVersion()}` }), acampadaBase(theme), themeLink, acampadaLink(theme) ]
        : [ themeLink, link({ rel: "stylesheet", href: `/assets/styles/mobile.css?v=${assetVersion()}`, media: "(max-width: 768px)" }) ]),
      process.env.OASIS_MOBILE === '1' ? link({ rel: "stylesheet", href: `/assets/styles/mobile_ux.css?v=${assetVersion()}` }) : null,
+      process.env.OASIS_MOBILE === '1' ? require('./mobile_ui').colorsLink() : null,
      link({ rel: "icon", href: "/assets/images/favicon.svg" }),
      meta({ charset: "utf-8" }),
      meta({ name: "description", content: i18n.oasisDescription }),
@ -2398,6 +2399,7 @@ exports.ainavHomeView = ({ recentTags = [] } = {}) => {
        ? [ link({ rel: "stylesheet", href: `/assets/styles/mobile.css?v=${assetVersion()}` }), acampadaBase(theme), link({ rel: "stylesheet", href: `/assets/themes/${theme}.css?v=${assetVersion()}` }), acampadaLink(theme) ]
        : [ link({ rel: "stylesheet", href: `/assets/themes/${theme}.css?v=${assetVersion()}` }), link({ rel: "stylesheet", href: `/assets/styles/mobile.css?v=${assetVersion()}`, media: "(max-width: 768px)" }) ]),
      process.env.OASIS_MOBILE === '1' ? link({ rel: "stylesheet", href: `/assets/styles/mobile_ux.css?v=${assetVersion()}` }) : null,
+      process.env.OASIS_MOBILE === '1' ? require('./mobile_ui').colorsLink() : null,
      link({ rel: "icon", href: "/assets/images/favicon.svg" }),
      meta({ charset: "utf-8" }),
      meta({ name: "description", content: i18n.oasisDescription }),
--- a/src/views/mobile_icons.js
+++ b/src/views/mobile_icons.js
@ -84,6 +84,7 @@ const ICONS = {
  data: '<ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3"/>',
  mic: '<rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v4"/>',
  camera: '<rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/>',
+  palette: '<path d="M12 3a9 9 0 1 0 0 18c1.1 0 1.8-.8 1.8-1.8 0-.5-.2-.9-.5-1.2-.3-.3-.5-.7-.5-1.2 0-1 .8-1.8 1.8-1.8H17a4 4 0 0 0 4-4c0-4.4-4-8-9-8z"/><circle cx="7.5" cy="11" r="1"/><circle cx="10.5" cy="7" r="1"/><circle cx="15.5" cy="7.5" r="1"/>',
  hangup: '<path d="M3 15.5c5-4.7 13-4.7 18 0l-2.5 2.5-3-1.5v-2.5a10 10 0 0 0-7 0v2.5l-3 1.5z"/>'
 };

--- a/src/views/mobile_settings.js
+++ b/src/views/mobile_settings.js
@ -0,0 +1,267 @@
+"use strict";
+// Ajustes del movil: los seis accesos de arriba y lo que hay detras de cada uno.
+//
+// Lo que se elige en la bienvenida (identidad, perfil de uso, portada, comunidad y
+// saludo) tiene que poder cambiarse despues sin buscarlo. Arriba de Ajustes va una
+// rejilla con esos cinco y un sexto, Colores; cada acceso baja a su bloque, y cada
+// bloque guarda al tocar, igual que en la bienvenida.
+//
+// Los formularios de identidad y saludo envian a las rutas del dev (/welcome/profile,
+// /welcome/greeting) con un returnTo; fork_routes.js cambia su redireccion a
+// /welcome por la vuelta a Ajustes. Colores es propio: /settings/colors y la hoja
+// /mobile-colors.css, que va la ultima.
+//
+// Los colores son las variables --a26-* del tema Acampada; por eso al elegir colores
+// el aspecto pasa a Acampada (OasisMobile.css es del dev y lleva los suyos fijos).
+
+const crypto = require("crypto");
+const { a, button, details, div, form, img, input, label, p, section, span, summary, textarea, h2 } = require("../server/node_modules/hyperaxe");
+const { iconNode } = require("./mobile_icons");
+
+const t = () => require("./main_views").i18n;
+const cfgNow = () => { try { return require("../configs/config-manager.js").getConfig() || {}; } catch (_) { return {}; } };
+
+// ---------- colores ----------
+
+// [clave, fondo, texto, acento]; la primera es la de Acampada tal cual
+const PALETTES = [
+  ["acampada", "#ffffff", "#000000", "#00e5ff"],
+  ["noche", "#101114", "#f2f2f2", "#00e5ff"],
+  ["oro", "#121212", "#f2f2f2", "#ffd700"],
+  ["bosque", "#f3f7ef", "#13231a", "#3ccf7e"],
+  ["lila", "#faf7ff", "#1d1430", "#b48cff"],
+  ["brasa", "#fff8f2", "#1a0f0a", "#ff6a2b"],
+  ["papel", "#f5efe3", "#2a2420", "#ff4f8b"],
+  ["contraste", "#000000", "#ffffff", "#ffff00"]
+];
+const DEFAULT = PALETTES[0];
+
+const HEX = /^#[0-9a-f]{6}$/i;
+const rgb = (hex) => [1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16));
+const toHex = (c) => "#" + c.map(v => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0")).join("");
+const mix = (x, y, k) => { const p = rgb(x), q = rgb(y); return toHex(p.map((v, i) => v + (q[i] - v) * k)); };
+const lum = (hex) => {
+  const [r, g, b] = rgb(hex).map(v => { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+const contrast = (x, y) => { const p = lum(x), q = lum(y); return (Math.max(p, q) + 0.05) / (Math.min(p, q) + 0.05); };
+// negro o blanco, el que mas se lea encima
+const readableOn = (hex) => contrast(hex, "#000000") >= contrast(hex, "#ffffff") ? "#000000" : "#ffffff";
+
+// lo guardado, ya comprobado; sin nada guardado, Acampada
+const colorState = (cfg) => {
+  const c = (cfg || cfgNow()).mobileColors;
+  if (!c || typeof c !== "object" || ![c.bg, c.fg, c.accent].every(v => HEX.test(String(v || "")))) {
+    return { preset: DEFAULT[0], bg: DEFAULT[1], fg: DEFAULT[2], accent: DEFAULT[3], chosen: false, fixed: false };
+  }
+  const preset = c.preset === "custom" || PALETTES.some(x => x[0] === c.preset) ? c.preset : "custom";
+  return { preset, bg: c.bg.toLowerCase(), fg: c.fg.toLowerCase(), accent: c.accent.toLowerCase(), chosen: true, fixed: c.fixed === true };
+};
+
+// lo que llega del formulario -> lo que se guarda. Un texto que no se lee sobre el
+// fondo se cambia por negro o blanco y se avisa (fixed)
+const colorsFromBody = (body) => {
+  const pick = String(body.preset || "");
+  const pal = PALETTES.find(x => x[0] === pick);
+  if (pal) return { preset: pal[0], bg: pal[1], fg: pal[2], accent: pal[3] };
+  const now = colorState();
+  const bg = HEX.test(String(body.bg || "")) ? body.bg.toLowerCase() : now.bg;
+  let fg = HEX.test(String(body.fg || "")) ? body.fg.toLowerCase() : now.fg;
+  const accent = HEX.test(String(body.accent || "")) ? body.accent.toLowerCase() : now.accent;
+  let fixed = false;
+  if (contrast(bg, fg) < 4.5) { fg = readableOn(bg); fixed = true; }
+  return { preset: "custom", bg, fg, accent, fixed };
+};
+
+const PREVIEW_CSS = PALETTES.map(([k, bg, fg, ac]) =>
+  `.pal-${k} .pal-bg{background:${bg}!important}.pal-${k} .pal-fg{background:${fg}!important}.pal-${k} .pal-ac{background:${ac}!important}`).join("\n");
+
+// la hoja que va la ultima: las variables del tema con los colores elegidos y las
+// muestras de las paletas (la CSP no deja estilos en linea)
+const colorsCss = (cfg) => {
+  const c = colorState(cfg);
+  // solo con Acampada: OasisMobile.css es del dev y lleva su paleta fija
+  const onAcampada = ((cfg || cfgNow()).themes || {}).current === "Acampada";
+  const vars = c.chosen && onAcampada ? [
+    `--a26-bg:${c.bg}`, `--a26-fg:${c.fg}`, `--a26-neon:${c.accent}`,
+    `--a26-on-neon:${readableOn(c.accent)}`,
+    `--a26-soft:${mix(c.bg, c.fg, 0.06)}`,
+    `--a26-muted:${mix(c.fg, c.bg, 0.35)}`,
+    `--a26-tint:${mix(c.bg, c.accent, 0.2)}`,
+    `--a26-line:${mix(c.bg, c.fg, 0.25)}`,
+    `color-scheme:${lum(c.bg) < 0.2 ? "dark" : "light"}`
+  ] : [];
+  const custom = `.pal-custom .pal-bg{background:${c.bg}!important}.pal-custom .pal-fg{background:${c.fg}!important}.pal-custom .pal-ac{background:${c.accent}!important}`;
+  return (vars.length ? `:root{${vars.join(";")}}\n` : "") + PREVIEW_CSS + "\n" + custom + "\n";
+};
+const colorsVersion = (cfg) => crypto.createHash("sha1").update(colorsCss(cfg)).digest("hex").slice(0, 10);
+const colorsLink = () => require("../server/node_modules/hyperaxe").link({ rel: "stylesheet", href: `/mobile-colors.css?v=${colorsVersion()}` });
+
+const swatch = (key) => span({ class: `pal-swatch pal-${key}`, "aria-hidden": "true" },
+  span({ class: "pal-bg" }), span({ class: "pal-fg" }), span({ class: "pal-ac" }));
+
+// el selector de colores, el mismo en Ajustes y en la bienvenida
+const colorsPick = (returnTo, withKeep) => {
+  const i18n = t();
+  const c = colorState();
+  const cur = c.chosen ? c.preset : DEFAULT[0];
+  const theme = (cfgNow().themes || {}).current;
+  return div({ class: "color-pick" },
+    form({ method: "POST", action: "/settings/colors", class: "ux-pick" },
+      input({ type: "hidden", name: "returnTo", value: returnTo }),
+      p({ class: "ux-pick-hint" }, i18n.colorsHint || "Tap a palette and it is applied."),
+      theme && theme !== "Acampada" ? p({ class: "form-hint" }, i18n.colorsSkinNote || "Colours go with the Acampada look; choosing one switches to it.") : null,
+      div({ class: "pal-grid" },
+        ...PALETTES.map(([k]) => button(Object.assign({ type: "submit", name: "preset", value: k, class: k === cur ? "pal-card is-current" : "pal-card" }, k === cur ? { "aria-current": "true" } : {}),
+          swatch(k),
+          span({ class: "pal-name" }, i18n[`palette_${k}`] || k),
+          k === cur ? span({ class: "ux-pick-now" }, i18n.uxPickCurrent || "In use") : null
+        ))
+      ),
+      withKeep && !c.chosen ? div({ class: "welcome-action" }, button({ type: "submit", name: "preset", value: DEFAULT[0], class: "welcome-skip-btn" }, i18n.colorsKeep || "Keep these")) : null
+    ),
+    details(Object.assign({ class: "color-custom" }, cur === "custom" ? { open: true } : {}),
+      summary(swatch("custom"), span(i18n.colorsCustom || "Your own")),
+      form({ method: "POST", action: "/settings/colors", class: "color-custom-form" },
+        input({ type: "hidden", name: "returnTo", value: returnTo }),
+        input({ type: "hidden", name: "preset", value: "custom" }),
+        label({ class: "color-field" }, span(i18n.colorsBg || "Background"), input({ type: "color", name: "bg", value: c.bg })),
+        label({ class: "color-field" }, span(i18n.colorsFg || "Text"), input({ type: "color", name: "fg", value: c.fg })),
+        label({ class: "color-field" }, span(i18n.colorsAccent || "Accent"), input({ type: "color", name: "accent", value: c.accent })),
+        c.fixed ? p({ class: "form-hint" }, i18n.colorsFixed || "The text could not be read on that background, so it was set to black or white.") : null,
+        button({ type: "submit", class: "create-button" }, i18n.colorsApply || "Apply")
+      )
+    )
+  );
+};
+
+// ---------- los seis accesos ----------
+
+const QUICK = [
+  { id: "identity", icon: "profile", key: "quick_identity" },
+  { id: "workflows", icon: "modules", key: "quick_workflow" },
+  { id: "ux", icon: "activity", key: "quick_ux" },
+  { id: "colors", icon: "palette", key: "quick_colors" },
+  { id: "community", icon: "invites", key: "quick_community" },
+  { id: "greeting", icon: "publish", key: "quick_greeting" }
+];
+
+// la linea de debajo de cada acceso: lo que hay puesto ahora
+const quickValue = (id, cfg) => {
+  const i18n = t();
+  if (id === "identity") return global.__OASIS_SELF_NAME__ || "";
+  if (id === "workflows") {
+    const wf = (() => { try { return require("../models/workflows_model").currentWorkflow(cfg); } catch (_) { return null; } })();
+    return wf ? (i18n[`workflow_${wf}`] || wf) : "";
+  }
+  if (id === "ux") {
+    const ux = (cfg.ux || {}).current || "blocks";
+    return { blocks: i18n.uxModeMenus, ainav: i18n.uxModeAINav, chats: i18n.uxModeChats, feed: i18n.uxModeFeed, phone: i18n.phoneTitle, rooms: i18n.roomsTitle }[ux] || "";
+  }
+  if (id === "colors") { const c = colorState(cfg); return c.preset === "custom" ? (i18n.colorsCustom || "") : (i18n[`palette_${c.preset}`] || ""); }
+  return "";
+};
+
+const quickGrid = (cfg, present) => {
+  const i18n = t();
+  return section({ id: "quick", class: "quick-settings" },
+    div({ class: "tags-header" }, h2(i18n.quickTitle || "The basics"), p(i18n.quickHint || "What you chose when you started, one tap away.")),
+    div({ class: "quick-grid" },
+      ...QUICK.filter(q => present.includes(q.id)).map(q => a({ href: `#${q.id}`, class: "quick-tile" },
+        iconNode("quick-ico", q.icon),
+        span({ class: "quick-name" }, i18n[q.key] || q.id),
+        span({ class: "quick-now" }, quickValue(q.id, cfg))
+      ))
+    )
+  );
+};
+
+// ---------- bloques nuevos de Ajustes ----------
+
+const RETURN = (id) => `/settings#${id}`;
+
+const identitySection = () => {
+  const i18n = t();
+  const avatar = global.__OASIS_SELF_AVATAR__;
+  return section({ id: "identity" },
+    div({ class: "tags-header" }, h2(i18n.quick_identity || i18n.welcomeStepIdentity), p(i18n.welcomeHintIdentity)),
+    form({ method: "POST", action: "/welcome/profile", enctype: "multipart/form-data", class: "welcome-profile-form" },
+      input({ type: "hidden", name: "returnTo", value: RETURN("identity") }),
+      label({ for: "set-name" }, i18n.profileName),
+      input({ type: "text", id: "set-name", name: "name", maxlength: "80", value: global.__OASIS_SELF_NAME__ || "" }),
+      label({ for: "set-image" }, i18n.profileImage),
+      avatar ? img({ class: "welcome-profile-avatar", src: avatar, alt: "" }) : null,
+      input({ type: "file", id: "set-image", name: "image", accept: "image/*" }),
+      button({ type: "submit" }, i18n.welcomeStepProfileAction)
+    ),
+    a({ href: "/profile/edit", class: "filter-btn" }, i18n.quickProfileMore || "Description and more")
+  );
+};
+
+const colorsSection = () => {
+  const i18n = t();
+  return section({ id: "colors" },
+    div({ class: "tags-header" }, h2(i18n.quick_colors || "Colours")),
+    colorsPick(RETURN("colors"), false)
+  );
+};
+
+const communitySection = () => {
+  const i18n = t();
+  return section({ id: "community" },
+    div({ class: "tags-header" }, h2(i18n.quick_community || i18n.welcomeStepCommunity), p(i18n.welcomeHintCommunity)),
+    div({ class: "quick-links" },
+      a({ href: "/invites", class: "create-button" }, i18n.quickJoinPub || i18n.invites),
+      a({ href: "/peers", class: "filter-btn" }, i18n.quickSeePeers || i18n.peers)
+    )
+  );
+};
+
+const greetingSection = () => {
+  const i18n = t();
+  return section({ id: "greeting" },
+    div({ class: "tags-header" }, h2(i18n.quick_greeting || i18n.welcomeStepIntro), p(i18n.welcomeHintIntro)),
+    form({ method: "POST", action: "/welcome/greeting", class: "welcome-greeting-form" },
+      input({ type: "hidden", name: "returnTo", value: RETURN("greeting") }),
+      textarea({ name: "text", required: true, minlength: "1", maxlength: "280", rows: 3, placeholder: i18n.quickGreetingPlaceholder || "" }),
+      button({ type: "submit" }, i18n.welcomeStepGreetingAction)
+    )
+  );
+};
+
+// recibe las secciones de settings_view (pestaña Oasis) y devuelve la lista del movil:
+// la rejilla arriba, los bloques nuevos metidos en su sitio y el orden de los accesos
+const ORDER = ["quick", "update", "language", "identity", "workflows", "ux", "colors", "theme", "community", "greeting", "home-page"];
+const withQuick = (parts) => {
+  const cfg = cfgNow();
+  const mods = cfg.modules || {};
+  const extra = [
+    identitySection(),
+    colorsSection(),
+    mods.invitesMod !== "off" ? communitySection() : null,
+    mods.feedMod !== "off" ? greetingSection() : null
+  ].filter(Boolean);
+  const list = parts.filter(Boolean).concat(extra);
+  const ids = list.map(el => el && el.id);
+  list.push(quickGrid(cfg, ids));
+  const rank = (el) => { const i = ORDER.indexOf(el && el.id); return i === -1 ? ORDER.length : i; };
+  return list.map((el, i) => ({ el, i })).sort((x, y) => rank(x.el) - rank(y.el) || x.i - y.i).map(x => x.el);
+};
+
+// ---------- bienvenida ----------
+
+// Colores entra como paso, despues del tipo de portada. No es un paso del dev, asi
+// que el "hecho" sale de si ya hay colores guardados
+const welcomeWithColors = (usable) => {
+  if (usable.includes("colors")) return usable;
+  const out = usable.slice();
+  const at = out.indexOf("ux");
+  out.splice(at === -1 ? out.length : at + 1, 0, "colors");
+  return out;
+};
+const welcomeDone = (steps) => Object.assign({}, steps, { colors: colorState().chosen });
+
+module.exports = {
+  PALETTES, colorState, colorsFromBody, colorsCss, colorsLink, colorsPick,
+  withQuick, welcomeWithColors, welcomeDone, contrast
+};
--- a/src/views/mobile_ui.js
+++ b/src/views/mobile_ui.js
@ -107,14 +107,9 @@ const tribeTabs = (tribe, section, sections) => {

 // ---------- ajustes ----------

-// primero lo que se toca (idioma, aspecto, tipo de uso, portada) y despues lo tecnico;
-// se reordena por id de seccion, sin tocar las secciones
-const SETTINGS_FIRST = ['update', 'language', 'ux', 'theme', 'workflows', 'home-page'];
-const settingsOrder = (parts) => {
-  const list = parts.filter(Boolean);
-  const rank = (el) => { const i = SETTINGS_FIRST.indexOf(el && el.id); return i === -1 ? SETTINGS_FIRST.length : i; };
-  return list.map((el, i) => ({ el, i })).sort((x, y) => rank(x.el) - rank(y.el) || x.i - y.i).map(x => x.el);
-};
+// primero los seis accesos y lo que se toca (idioma, identidad, uso, portada,
+// colores, aspecto) y despues lo tecnico; ver mobile_settings.js
+const settingsOrder = (parts) => require('./mobile_settings').withQuick(parts);

 // cada idioma un boton que se aplica al tocarlo (antes desplegable y otro boton)
 const LANGS = [['Español', 'es'], ['Català', 'ca'], ['Euskara', 'eu'], ['Galego', 'gl'], ['English', 'en'], ['Français', 'fr'],
@ -179,12 +174,14 @@ const workflowPick = (action, current, keys, withHint) => {

 // pasos de la bienvenida en el movil: el backend del dev quita el de uso en el movil;
 // aqui vuelve, el segundo, justo despues de la identidad (/welcome/workflow es suyo)
+// y Colores despues del tipo de portada (mobile_settings.js)
 const welcomeSteps = (usable) => {
-  if (usable.includes('workflow')) return usable;
  const out = usable.slice();
-  const at = out.indexOf('profile');
-  out.splice(at === -1 ? 0 : at + 1, 0, 'workflow');
-  return out;
+  if (!out.includes('workflow')) {
+    const at = out.indexOf('profile');
+    out.splice(at === -1 ? 0 : at + 1, 0, 'workflow');
+  }
+  return require('./mobile_settings').welcomeWithColors(out);
 };

 // ---------- acciones de tarjeta ----------
@ -228,7 +225,14 @@ const welcomeBannerHere = (here) => ['', '/', '/activity'].includes(here);
 const welcomeBannerText = () => t().welcomeBannerTextMobile || t().welcomeBannerText;
 const welcomeBannerAction = () => t().welcomeBannerActionMobile || t().welcomeBannerAction;

+// colores y Ajustes: viven en mobile_settings.js; aqui se reexportan para que los
+// enganches de las vistas del dev pasen todos por mobile_ui
+const colorsLink = () => require('./mobile_settings').colorsLink();
+const colorsPick = (returnTo, withKeep) => require('./mobile_settings').colorsPick(returnTo, withKeep);
+const welcomeDone = (steps) => require('./mobile_settings').welcomeDone(steps);
+
 module.exports = {
+  colorsLink, colorsPick, welcomeDone,
  isMobile, VOTE_KINDS, voteKindPicker, voteBars, voteOwnNote, tribeRow, tribeTabs,
  settingsOrder, languagePick, uxPick, workflowPick, welcomeSteps, deleteConfirm, footerLine,
  welcomeBannerHere, welcomeBannerText, welcomeBannerAction
--- a/src/views/welcome_view.js
+++ b/src/views/welcome_view.js
@ -18,6 +18,7 @@ const SECTIONS = {
  greeting: ["welcomeStepIntro", "welcomeHintIntro"]
 }
 if (mobileUi.isMobile()) SECTIONS.workflow = ["welcomeStepUseMobile", "welcomeHintUseMobile"]
+if (mobileUi.isMobile()) SECTIONS.colors = ["quick_colors", "welcomeHintColors"]

 const submitRow = (text) => div({ class: "welcome-action" }, button({ type: "submit" }, text))

@ -63,6 +64,7 @@ const stepAction = (key, profile, status) => {
      submitRow(i18n.welcomeStepWorkflowAction)
    )
  }
+  if (key === "colors") return mobileUi.colorsPick("/welcome#step-colors", true)
  if (key === "theme") return form({ method: "POST", action: "/welcome/theme", class: "welcome-ux-form" },
    div({ class: "welcome-ux-grid" },
      WIZARD_THEMES.map(([value, name]) => pickCard("theme", value, status.theme, name, `/assets/images/theme-${value.toLowerCase()}.png`))
@ -105,7 +107,7 @@ const stepAction = (key, profile, status) => {
 }

 exports.welcomeView = async (status, profile = {}) => {
-  const steps = status.steps || {}
+  const steps = mobileUi.isMobile() ? mobileUi.welcomeDone(status.steps || {}) : (status.steps || {})
  const usable = mobileUi.isMobile() ? mobileUi.welcomeSteps(status.usable || []) : (status.usable || [])
  const opened = usable.find(key => !steps[key])
  const html = template(