El núcleo proporciona todos los estilos de las pantallas de administración. Como desarrollador de módulos, solo necesitas escribir marcado que siga las convenciones para obtener el mismo aspecto que la administración del núcleo, y cuando el núcleo cambie su diseño, las pantallas de tu módulo lo seguirán.

Principios básicos

• Los colores, espaciados y tipografía de la administración los definen los tokens de diseño del núcleo (variables CSS --zm-*). No escribas valores de color fijos en tu módulo: haz referencia a los tokens.
• Las clases x_*, heredadas desde XE, se siguen usando tal cual. El núcleo conservó las clases y solo les aplicó estilos nuevos, así que los módulos existentes reciben el diseño nuevo sin cambios.
• Si tu módulo necesita una UI propia, crea y usa un prefijo exclusivo del módulo. Sobrescribir las clases del núcleo se romperá en la siguiente actualización del núcleo.

Tokens de diseño

Estas son las variables CSS disponibles en toda la administración. Tienen definidos valores claros y oscuros, así que con solo usar los tokens el modo oscuro funciona solo.

/* 모듈 관리자 화면 예 */
.mymod-note {
	padding: 12px 16px;
	border: 1px solid var(--zm-line);
	border-radius: var(--zm-radius-sm);
	background: var(--zm-surface-2);
	color: var(--zm-ink-soft);
}

Componentes x_*

Son las piezas básicas del marcado de administración. Combinando estas clases obtienes la misma pantalla que el núcleo sin CSS adicional.

• Formularios: .x_form-horizontal > .x_control-group > .x_control-label + .x_controls
• Botones: .x_btn; destacado .x_btn.x_btn-primary, acciones peligrosas .x_btn-danger, tamaños -large -small -mini
• Tablas: .x_table; si necesitas filas alternadas .x_table-striped, resaltado al pasar el cursor .x_table-hover
• Alertas: .x_alert con las variantes -info -success -error
• Insignias: .x_badge con variantes de estado; ayuda: .x_help-block .x_help-inline
• Pestañas: .x_nav.x_nav-tabs > li > a; el elemento activo es li.x_active

<form class="x_form-horizontal" method="post" action="./">
	<div class="x_control-group">
		<label class="x_control-label">{$lang->title}</label>
		<div class="x_controls">
			<input type="text" name="title" value="{$config->title}" />
			<p class="x_help-block">{$lang->about_title}</p>
		</div>
	</div>
	<div class="x_clearfix" style="text-align:right">
		<button type="submit" class="x_btn x_btn-primary">{$lang->cmd_save}</button>
	</div>
</form>

Las clases heredadas de Bootstrap sin prefijo, como .btn o .table, también se tratan igual que x_* dentro de la administración, pero en código nuevo usa x_*.

Pantallas propias del módulo y prefijos

Las pantallas difíciles de expresar con piezas x_*, como tarjetas de lista o tableros, se construyen a mano definiendo un prefijo de módulo. Es la misma forma en que lo hacen los módulos del núcleo.

• Usa un solo prefijo por módulo. Ej.: la administración de la tienda usa zmst- y el módulo de pagos zpay-
• Dentro del prefijo, los colores y espaciados también hacen referencia a los tokens --zm-*. Así obtienes gratis el modo oscuro y los rediseños futuros.
• Evita sobrescribir reglas del núcleo con selectores de elementos padre (.x .something). Si cambia la prioridad del CSS del núcleo, se romperán también.

Ubicación y registro de las plantillas de administración

Los módulos con estructura moderna guardan sus plantillas de administración en views/admin/*.blade.php (plantillas v2).

modules/mymodule/
├── views/admin/
│   ├── _tabs.blade.php   ← 탭 공통 조각
│   ├── config.blade.php
│   └── list.blade.php
└── controllers/Admin.php

• Si hay varias pantallas, crea un fragmento de pestañas (_tabs.blade.php) e inclúyelo con @include en cada pantalla.
• El menú de administración se registra con el atributo menu_name de la declaración de acciones en module.xml. Para más detalles, consulta el documento Crear módulos.
• En la administración no hay mid, así que los enlaces a otras pantallas se crean con la forma getUrl('', 'module', 'admin', 'act', ...). Si no dejas vacío el primer argumento, se arrastran todas las variables de la petición actual.

Lo que no debes hacer

• Colores fijos en el código. En particular, usar directamente un fondo blanco (#fff) se rompe en modo oscuro. Usa tokens como var(--zm-card).
• Cargar frameworks CSS externos como Bootstrap en la administración. Chocan con los estilos del núcleo.
• Sobrescribir con CSS las pantallas de administración de otros módulos. Si es una mejora necesaria, propónla al núcleo.
• Abusar de scripts en línea. El núcleo está ampliando la aplicación de CSP en la administración, así que lo más seguro es separar los scripts en archivos js aparte.