Share
Lo que vas a crearAtom, el nuevo editor de código lanzado por GitHub, es una de las nuevas aplicaciones que permiten que las tecnologías web como LESS, JavaScript y HTML se ejecuten de forma nativa en un entorno de escritorio. Atom se instala y se ejecuta como una aplicación de escritorio "normal", pero una vez que se abre, se comporta de una manera que cualquier desarrollador web encontrará familiar.
Atom es una "variante especializada de Chromium" y, cuando se ejecuta en modo desarrollador, brinda acceso a las mismas "Herramientas de desarrollo" a las que podría estar acostumbrado desde Chrome. Por lo tanto, al igual que con cualquier aplicación web en línea, puede inspeccionar el código detrás de cualquier elemento de la interfaz de la aplicación y ver qué hace que funcione:
Lo que esto significa en términos prácticos es que cualquier persona con experiencia en diseño y desarrollo web encontrará inmediatamente familiaridad con la forma en que Atom funciona, y probablemente se sentirá mucho más cómodo creando modificaciones y ajustes que con programas similares. El estilo visual de Atom está impulsado por CSS, generado desde LESS, por lo que puede modificar su apariencia de la misma manera que lo haría con cualquier sitio web con LESS.
Atom tiene dos tipos de "temas" responsables de su estilo de presentación:
Temas de sintaxis controle todo en el espacio interior del editor, es decir, el canal, los números de línea y el área de código.
Temas de la interfaz de usuario controlar todo lo demás, es decir, pestañas, barra lateral, botones, superposiciones, mensajes, etc..
En este tutorial, aprenderá cómo crear ambos tipos de temas, y los producirá en conjunto para que la interfaz completa se rediseñe de manera uniforme. Vamos a empezar!
Por el momento, Atom es solo para Mac, y durante su fase beta, el acceso se realiza mediante invitación. Si aún no tiene una invitación, mi sugerencia es presentar una solicitud en Twitter o en el foro Atom y alguien está obligado a enviar una a su manera. Descárgalo e instálalo como lo harías con cualquier otra aplicación..
El desarrollo de temas implicará cierto uso de la línea de comandos de Atom, por lo que lo primero que deberá hacer es instalar los paquetes que habilitan estos comandos. Después de ejecutar Atom por primera vez, vaya a y seleccione Atom> Instalar comandos de shell, que instala el átomo y apm (administrador del paquete atom) comandos.
También sugiero usar una aplicación que te permita abrir un terminal desde cualquier carpeta que estés viendo en Finder, ya que facilitará la ejecución de comandos en la ubicación correcta. Personalmente, uso el XtraFinder gratuito para agregar la opción "Nuevo terminal aquí" a mi menú contextual del Finder.
El proceso básico para crear un nuevo tema de interfaz de usuario Atom es bifurcar uno de los dos temas predeterminados disponibles de GitHub, darle su propio nombre y editar los archivos incluidos.
Para hacer esto, comience asegurándose de tener una cuenta en GitHub y GitHub para Mac (a menos que prefiera usar la línea de comandos) instalada. Luego dirígete al repositorio para el tema Atom Dark UI o el tema Atom Light UI. En este tutorial usaremos una paleta de colores oscuros, así que vamos a bifurcar el tema predeterminado oscuro.
En la esquina superior derecha del repositorio de UI original, haga clic en el botón "Bifurcación":
Esto creará un duplicado del repositorio bajo su propia cuenta, es decir,. tu cuenta / atom-dark-ui. Lo siguiente que debe hacer es darle al repositorio su propio nombre. En la barra lateral derecha de su repositorio bifurcado, haga clic en el elemento del menú "Configuración".
En la parte superior de la página "Configuración" verá un campo para el nombre del repositorio. Escriba un nuevo nombre de su elección, (en mi caso "nuance-dark-ui), en este campo asegurándose de conservar la" -ui "al final, luego haga clic en" Cambiar nombre ":
Ahora está listo para descargar su tema en su entorno fuera de línea para que pueda comenzar a editarlo. Para hacer esto, vuelva a la página principal de su repositorio, luego ubique y haga clic en el botón "Clonar en el escritorio" en la barra lateral:
"GitHub para Mac"luego descargará el repositorio para usted, en su ubicación predeterminada de GitHub. Desde su lista de repositorios en "GitHub para Mac", haga clic con el botón derecho en el tema de la IU recién clonada y seleccione "Mostrar en Finder":
Se abrirá una ventana del Finder que muestra su carpeta de temas de UI dentro de su carpeta de GitHub. Haga doble clic en él para ir a la carpeta real y ver el contenido dentro de.
Abra un nuevo terminal en esta ubicación y luego ejecute el comando átomo --dev
Este comando abrirá Atom en modo desarrollador, mostrando la estructura de carpetas y archivos de su tema en la barra lateral. En esta barra lateral, haga clic en el archivo "package.json" para abrirlo y editarlo, luego cambie el nombre, el número de versión y la descripción. Nuevamente, asegúrate de conservar la "-ui" al final del nombre del tema, luego guarda:
Finalmente, debe informar a Atom sobre cómo acceder a su carpeta de temas desde su carpeta local de GitHub. Vuelva a su terminal, que aún debería estar en la carpeta de su tema, y ejecute el comando enlace apm
Ahora vuelve a Atom y presiona cmd-alt-ctrl-L o seleccione Ver> Recargar desde el menú superior para volver a cargar la interfaz, que actualizará la lista de temas de UI disponibles, lo que permite seleccionar el suyo.
Desde el menú superior, seleccione Atom> Configuracionespara abrir la página de configuración y haga clic en "Temas" en la barra lateral izquierda del panel. Debería ver su tema en la lista etiquetada "Temas de UI", así que siga adelante y selecciónelo:
Su nuevo tema de UI ahora está activo y listo para su edición, sin embargo, antes de continuar, vamos a generar un tema de sintaxis para que pueda editar ambos al mismo tiempo, vigilando cómo funcionan juntos..
Crear un nuevo tema de sintaxis es un proceso más fácil que para un tema de UI.
En Atom, presiona cmd-shift-P para abrir la paleta de comandos, luego comience a escribir "Generar tema de sintaxis". Cuando veas Generador de paquetes: Generar tema de sintaxis Aparece haz click en él para ejecutar el comando:
Aparecerá una ventana en la que puede ingresar la ruta y el nombre de su tema de sintaxis. Lo que sea que decidas nombrar tu tema debería terminar en "-syntax". Dado que mi tema de la interfaz de usuario se llamaba "nuance-dark-ui", nombré mi tema de sintaxis "nuance-dark-syntax".
Luego de ingresar su ruta y nombre del tema presione Entrar para proceder.
Atom generará un nuevo tema de sintaxis para ti y lo abrirá en la barra lateral. Ahora deberías poder ir a Atom> Configuraciones de nuevo y elija su nuevo tema de sintaxis junto a la Tema de sintaxis etiqueta:
Como trabajaremos juntos en la UI y en los temas de sintaxis, queremos poder acceder a ambos archivos desde la barra lateral. También queremos estar en "Modo Dev" mientras estamos editando estos archivos, ya que esto significará que Atom actualizará automáticamente su apariencia cada vez que guardemos nuestros cambios..
Siga estos pasos para abrir ambos temas en el modo de desarrollo y use este mismo proceso en cualquier momento en el futuro que necesite regresar y editar sus temas..
Ir Atom> Preferencias para abrir la página de configuración.
Hacer clic Abierto ˜ / .atom en la parte inferior de la barra lateral izquierda de configuración para abrir su carpeta Atom local en la barra lateral de Atom:
En la barra lateral de Atom, haga clic con el botón derecho en el tema de sintaxis o en la carpeta de temas de la interfaz de usuario y elija Mostrar en el Finder:
Salga de Atom para cerrar la instancia existente (no está en modo dev, por lo que no la necesitamos), luego, en la ventana del Finder que muestra sus carpetas de temas, abra un nuevo terminal:
Ejecuta el comando átomo --dev para abrir la carpeta en Atom en modo dev. Ahora debería ver las dos carpetas de temas en la barra lateral:
Como estamos en modo dev, ahora podemos abrir cualquier archivo de tema desde la barra lateral y los cambios se harán visibles automáticamente en la interfaz Atom.
Ahora estamos listos para comenzar el proceso de diseño.!
Es posible que necesite un poco de ajuste para obtener los colores de su tema tal como lo desea, por lo que diseñar directamente en código probablemente no sea el enfoque más eficiente..
En los archivos de origen adjuntos a este tutorial encontrará una PSD llamada "colormockup.psd", que contiene suficientes elementos de interfaz y simulaciones de código para facilitar la selección de la paleta de colores. Usa este PSD para visualizar los colores que te gustaría usar en tu interfaz de usuario y en los temas de sintaxis.
Personalmente me gustan los colores terrosos, la poca luz y el bajo contraste que no queman mis ojos, así que terminé con esto:
Esta es mi preferencia personal, pero por supuesto puede ir con cualquier estilo que funcione para usted..
Cuando haya terminado su maqueta, estará listo para comenzar a transferir sus valores de color al código MENOS de sus temas. Comenzaremos con el tema de la sintaxis porque es más simple y usa menos variables que el tema de la interfaz de usuario..
En la barra lateral de Atom, expanda la carpeta de su tema de sintaxis y abra hojas de estilo> colors.less. Deberías ver esto:
Si cambia el valor de cualquiera de estas variables y luego guarda el archivo, debería ver instantáneamente la actualización del área de sintaxis. Por ejemplo, si cambia el valor de @gris oscuro a # F00 Debería ver cambiar el color del fondo de la canaleta:
Mmm bienLos colores listados en este archivo se asignan a su vez a varios aspectos de la sintaxis a través de los archivos "syntax-variables.less" y "base.less". Abre estos archivos y tómate un momento para echar un vistazo rápido a través de ellos. En el archivo "syntax-variables.less" verás las variables tomadas del archivo "colors.less". Sin embargo, en el archivo "base.less" verá variables tanto del archivo "colors.less" como del "syntax-variables.less".
A medida que agregamos nuestra nueva combinación de colores a este tema, cambiaremos el valor de las variables en "colors.less" de una manera que significa que sus nombres ya no reflejen el color que contienen. Por ejemplo, donde la variable @púrpura fue utilizado, en su lugar vamos a utilizar un tono de verde.
Para ser concienzudo, lo ideal sería crear nuevos nombres de variables que reflejen el nuevo esquema de color. Sin embargo, para los fines de este tutorial no quiero que tenga que reemplazar todas las instancias de los antiguos nombres de variables en la "sintaxis - archivo variables.less "y" base.less ".
Entonces, aunque pueda parecer un poco extraño, solo asignaremos los colores de nuestro nuevo esquema directamente a los nombres de variables existentes en "colors.less". De esta manera, solo tiene que editar un único archivo para crear su tema de sintaxis.
Para ayudarlo a comprender qué variables influyen en qué aspectos de la combinación de colores, reemplace el código completo del archivo "colors.less" con esto:
// Estos colores son específicos para el tema. ¡No usar en un paquete! // Texto simple y números de línea @ muy-claro-gris: # c5c8c6; // Comentarios @ gris claro: # 969896; // Línea actual resaltada @gray: # 373b41; // Fondo del canal @ gris oscuro: # 282a2e; // Fondo del área del código @ muy oscuro-gris: # 1d1f21; @cyan: # 8abeb7; @blue: # 81a2be; @purple: # b294bb; @green: # b5bd68; @red: # cc6666; @orange: # de935f; @ naranja claro: # f0c674;
Los comentarios agregados a la primera sección le indican dónde se utilizan cada una de las variables de color "gris" en el área de sintaxis.
La segunda sección con las siete variables de color es un poco más complicada ya que cada una efectúa un tipo diferente de código. Para tener una idea aproximada de cómo aparecerán estas variables, cree un nuevo archivo PHP y péguelo en esto:
Accentsconagua
darken (@red, 10%) / * Comentarios> @ lightgrey * / // function = .storage> @purple // function_name = .entity.name.function> @blue function function_name () // return =. keyword.control> @purple // array = .support.function> @cyan // string = .string> @green return array ('string' => 'string'); // $ = .punctuation.definition.variable> @ very-light-gray // var_name = .variable> @red // new = .keyword> @purple // SUPPORT_CLASS = .support.class> @ light-orange / / true = .constant> @orange $ var_name = new SUPPORT_CLASS (true); ?> Nota: Este archivo también se incluye en los archivos de origen.
Cuando vea el código anterior en Atom, verá ejemplos de cómo se ven cada una de las siete variables de color cuando se aplican a la sintaxis. El mismo código se usa en el "colormockup.psd" proporcionado para que pueda ver cómo se correlacionan los colores.
Echa un vistazo a los comentarios incluidos para ver una descripción de qué variables de color están asociadas con cada elemento del código. Puede usar este código junto con la PSD para ayudarlo a determinar a qué variables deben asignarse los colores que eligió en su archivo "colors.less".
Comenzaremos con los colores "grises" de su maqueta de PSD..
La primera variable listada en "colors.less" es @ muy gris claro que sabemos, (de los comentarios que acaba de agregar), se usa en "Números de línea y texto sin formato". Vaya a su PSD y copie el código hexadecimal del color que eligió para sus números de línea. Pega ese valor, que en este caso es # 9b836a, en "colors.less" para reemplazar el valor predeterminado de @ muy gris claro.
A continuación, obtenga el código hexadecimal de color que eligió para el texto de comentario y agréguelo a la variable @gris claro. Continúe de esta manera hasta que se actualicen las cinco variables "grises". Para el tema "nuance-dark-syntax" utilicé:
// Texto simple y números de línea @ muy-gris claro: # 9b836a; // Comentarios @ gris claro: # 624e3b; // Línea actual resaltada @gray: # 352b22; // Fondo del canal @ gris oscuro: # 28211a; // Fondo del área del código @ muy gris oscuro: # 1f1913;
Guarde el archivo "colors.less" y verá inmediatamente su área de sintaxis con un aspecto bastante diferente:
Ahora para trasladar las siete variables de color en la segunda sección..
La primera de estas variables es @cyan, y el contenido del archivo PHP que creamos anteriormente contiene el comentario array = .support.function> @cyan, diciéndonos que este color se usa en la palabra "matriz". Vaya a su PSD y copie el código hexadecimal que aplicó a la palabra "matriz" allí. En el tema "matiz" este fue # 446675.
Repita el mismo proceso para encontrar el nombre de cada variable en los comentarios de su archivo PHP para ver a qué tipo de código se aplica, luego copie el color que eligió de su PSD.
Para el tema "matiz" utilicé:
@cyan: # 446675; @blue: # 40796b; @purple: # 6a7c02; @green: # 93a14a; @red: # a55027; @orange: # a56b32; @ naranja claro: # b5a163;
Después de guardar, eche otro vistazo a su archivo PHP y debería ver todos sus nuevos colores reflejados en él, coincidiendo con su PSD:
Tu tema de sintaxis ya está completo! Ahora es el momento de pasar al tema de la interfaz de usuario.
Agregar su combinación de colores al tema de la interfaz de usuario es un poco más complicado que el tema de la sintaxis, ya que utiliza muchas más variables. Además, no todos los colores en el tema predeterminado se definen como variables, por lo que en algún caso tendrá que editar los estilos reales.
La mayoría de los colores utilizados en el tema de la interfaz de usuario se definen en el archivo "ui-variables.less". Continúe y expanda su carpeta de temas de sintaxis y abra el archivo para editarlo desde la carpeta "hojas de estilo".
Atom se entrega con un "Styleguide" muy útil que te brinda una vista previa de todos los elementos de la interfaz de usuario influenciados por tu tema. Ábrelo yendo a Paquetes> Styleguide> Mostrar.
En su mayor parte, encontrará que los nombres de las variables en el archivo "ui-variables.less" son descriptivos y se correlacionan, en orden, con los elementos de la interfaz de usuario que figuran en la Guía de estilo. Por ejemplo, las primeras variables son prefijadas @color de texto y correlacionar con la primera sección de Styleguide, etiquetada "Clases de texto".
Si no está seguro de qué variable afectará a qué, no tenga miedo de cambiar las variables al azar para ver qué aspectos de Styleguide están alterados.
No todos los colores en el tema de la IU predeterminado tienen variables LESS asociadas en el archivo "ui-variables.less". Algunos colores se codifican directamente en otros archivos MENOS en el tema.
Si no está seguro de dónde proviene el color de la interfaz de usuario y no parece tener una variable asociada, use el inspector de elementos en el área en cuestión para encontrar el nombre de la clase responsable del color. A continuación, ejecute una búsqueda en el Finder para el nombre de esa clase para intentar determinar cuál de los archivos MENOS del tema contiene la clase.
Por ejemplo, la barra lateral tiene un código hexadecimal de color de # 303030 en el tema predeterminado que no se define en ninguna parte en "ui-variables.less". Inspeccionar el elemento muestra que el código hexadecimal proviene de la clase .panel enfocable.
La ejecución de una búsqueda en el Finder dentro de la carpeta de la interfaz de usuario para "focusable-panel" revela que esta clase está contenida en el archivo "tree-view.less".
El archivo se puede editar, colocando una variable del archivo "ui-variables.less" en lugar de un valor hexadecimal codificado..
A veces, su búsqueda no producirá ningún resultado, por el motivo que sea, y es posible que tenga que hacer las cosas de la manera más difícil y revisar manualmente cada archivo de tema de UI hasta que encuentre la clase que desea cambiar.
El tema de la interfaz de usuario no puede acceder a las variables de color definidas por el tema de sintaxis, sin embargo, queremos usar los mismos colores en ambos temas para que coincidan. Como tal, necesitaremos duplicar las variables de color de nuestro tema de sintaxis en nuestro tema de UI.
En la parte superior del tema "ui-variables.less" pegue todas las variables de su tema de sintaxis:
@ muy gris claro: # 9b836a; @ gris claro: # 624e3b; @gray: # 352b22; @ gris oscuro: # 28211a; @ muy gris oscuro: # 1f1913; @cyan: # 446675; @blue: # 40796b; @purple: # 6a7c02; @green: # 93a14a; @red: # a55027; @orange: # a56b32; @ naranja claro: # b5a163;
Además de estas variables, hay otras cinco variables personalizadas que definí para transferir todos los colores de mi maqueta, también pegados en la parte superior del archivo "ui-variables.less":
// BG del archivo seleccionado en la barra lateral @n_selected: # 2b231b; // BG de la barra lateral @n_defaultbg: # 241d17; // BG de la barra de herramientas inferior y del panel "buscar" @n_darkerbg: # 191613; // Color del texto seleccionado en la barra lateral @n_highlight: # a37748; // Color del borde de las pestañas @n_tabborder: # 372d26;
Estas variables se utilizarán en varias ubicaciones, pero los comentarios incluidos le brindan un ejemplo del uso de cada una, lo que le ayudará a determinar qué códigos de color debe copiar de su PSD. Además, siempre que sea posible, las capas en el PSD se han nombrado con referencia a la variable que afectan.
Como mencioné anteriormente, algunos de los valores de color del tema por defecto están codificados en vez de ser accesibles como variables. En algunos casos, las variables están definidas, pero en archivos que no sean el archivo principal "ui-variables.less". Para facilitar la aplicación central de nuestro esquema de color a través del archivo "ui-variables.less", definiremos algunas variables adicionales y realizaremos algunos ajustes en algunos archivos de temas..
Pegue el siguiente código en su "ui-variables.less" debajo de las variables de color que agregó en el paso anterior:
// COLORES / VARS PERSONALIZADOS AÑADIDOS A MENOS ARCHIVOS //tree-view.less @ tree-view-selected-bg: @n_selected; // nuevo> línea 8 @sidebar: @n_defaultbg; // nuevo> línea 15 @ sidebar-focus: aligerar (@n_defaultbg, 0.5%); // nuevo> línea 19 //tabs.less @ tab-default-bg: @n_defaultbg; // nueva> línea 45 //tooltips.less @ tip-background-color: aclarar (@ muy gris claro, 10%); // variables sacadas de tooltips.less y ubicadas aquí para access @ tip-text-color: @ very-dark-gray; // variables sacadas de tooltips.less y colocadas aquí para acceso
Tome nota de los comentarios incluidos, haga un seguimiento de los archivos que se van a modificar y en qué línea para utilizar estas variables..
Con sus nuevas variables en su lugar, ahora puede realizar las siguientes ediciones en sus archivos de tema:
tree-view.less> linea 8: cambiar a fondo: @ tree-view-selected-bg;
tree-view.less> linea 15: cambiar a fondo: @sidebar;
tree-view.less> linea 19: cambiar a fondo: @ barra lateral de enfoque;
tabs.less> línea 45: cambiar a:
imagen de fondo: -webkit-linear-gradient (arriba, aclarar (@ tab-default-bg, 7%), @ tab-default-bg);
tooltips.less> borrar líneas 4 y 5:
@ tip-background-color: #fff; @ tip-text-color: # 333;
Estas dos líneas se eliminan de "tooltips.less" ya que las variables ahora están definidas en el archivo principal "ui-variables.less" en su lugar.
Ahora hemos hecho todos los ajustes necesarios para acompañar nuestras nuevas variables definidas, pero hay algunos ajustes más para reemplazar los colores codificados y hacer que todos los archivos de temas funcionen bien con nuestras variables..
utilities.less> línea 6: cambiar a fondo: oscurecer (@ botón-fondo-color, 5%);
tree-view.less> linea 29: cambiar a color: aclarar (@ gris muy claro, 15%)! importante;
panels.less> línea 50: cambiar a
imagen de fondo: -webkit-linear-gradient (@ panel-heading-background-color, darken (@ panel-heading-header-color, 5%));
… Hace que el gradiente sea más sutil para adaptarse a nuestros nuevos colores.
tooltips.less> línea 11: cambiar a color: saturar (oscurecer (@red, 10%), 5%);
Ahora tenemos todos los colores de nuestra maqueta de PSD definidos como variables, y todos los archivos de tema listos para responder a las definiciones en "ui-variables.less".
Lo único que queda ahora es asignar nuestras variables de color personalizadas contra las variables predeterminadas que ya estaban en su lugar cuando abrimos por primera vez el archivo "ui-variables.less". No es necesario cambiar el valor de cada variable predeterminada única, porque algunos de ellos combinan sus valores de otros en el mismo archivo. Por ejemplo tenemos @ text-color-highlight: #fff; y este valor es piggy respaldado en la siguiente línea en @ text-color-selected: @ text-color-highlight;.
Reemplaza todo el código entre el comentario. // Colores y el comentario // Tamaños con este código:
@ texto-color: @ muy claro-gris; // cambiado @ texto-color-sutil: @ gris claro; // cambiado @ text-color-highlight: @n_highlight; // cambiado @ text-color-selected: @ text-color-highlight; @ text-color-info: @cyan; // cambiado @ text-color-success: @blue; // cambiado @ texto-color-advertencia: aclarar (@orange, 15%); // cambiado @ texto-color-error: saturar (aclarar (@red, 10%), 10%); // cambiado @ texto-color-ignorado: @ texto-color-sutil; @ text-color-added: @ text-color-success; @ texto-color-renombrado: @ texto-color-información; @ texto-color modificado: @ texto-color-advertencia; @ texto-color-eliminado: @ texto-color-error; @ background-color-info: @cyan; // cambiado @ background-color-success: @blue; // cambiado @ background-color-warning: aclarar (@orange, 15%); // cambiado @ error de color de fondo: saturar (aclarar (@red, 10%), 10%); // cambiado @ background-color-highlight: rgba (255, 255, 255, 0.07); @ background-color-selected: @n_selected; // cambiado @ app-background-color: # 333; @ base-background-color: aclarar (@ tool-panel-background-color, 5%); @ base-border-color: @n_darkerbg; @ pane-item-background-color: @ base-background-color; @ pane-item-border-color: @n_darkerbg; // cambiado @ input-background-color: @ dark-gray; // cambiado @ input-border-color: @ base-border-color; @ tool-panel-background-color: @n_darkerbg; // cambiado @ tool-panel-border-color: @ base-border-color; @ inset-panel-background-color: @n_defaultbg; // cambiado @ inset-panel-border-color: @ base-border-color; @ panel-heading-background-color: @gray; // cambiado @ panel-heading-border-color: fadein (@ base-border-color, 10%); @ overlay-background-color: @ dark-gray; // cambiado @ overlay-border-color: @ background-color-highlight; @ button-background-color: @gray; // cambiado @ button-background-color-hover: aclarar (@ button-background-color, 5%); @ botón-fondo-color-seleccionado: @ gris oscuro; // cambiado @ button-border-color: @ base-border-color; @ tab-bar-background-color: @ muy gris oscuro; // cambiado @ tab-bar-border-color: oscurecer (@ tab-background-color-active, 10%); @ tab-background-color: @n_defaultbg; // cambiado @ tab-background-color-active: @ very-dark-gray; // cambiado @ tab-border-color: @n_tabborder; // cambiado @ tree-view-background-color: @ tool-panel-background-color; @ tree-view-border-color: @ tool-panel-border-color; @ scrollbar-background-color: @ muy gris oscuro; // cambiado @ scrollbar-color: @gray; // cambiado @ ui-site-color-1: @ background-color-success; // green @ ui-site-color-2: @ background-color-info; // blue @ ui-site-color-3: @ background-color-warning; // orange @ ui-site-color-4: @purple; // cambiado @ ui-site-color-5: @red; // cambiado
Sería un poco excesivo explicar cada línea de este código, pero busque el comentario // cambiado al final de una línea para ver dónde se han asignado nuestras variables de color personalizadas contra las variables predeterminadas del tema.
Recuerde, si no está seguro de dónde se aplican estas variables, puede verificar su correlación con el Styleguide, como se describe anteriormente.
Después de guardar su archivo "ui-variables.less", (y los demás que editó), su interfaz ahora debería tener este aspecto:
Si presionas ctrl-shift-P para que aparezca la paleta de comandos debe verse como:
Y si presionas Ctrl-F el panel de "búsqueda" en la parte inferior del editor debería verse así:
Puede descargar la IU "Nuance" completa y los temas de sintaxis en GitHub:
Y puedes instalarlos directamente en Atom yendo a Átomo> Preferencias> Temas y escribiendo "Nuance" en el campo de filtro.
Una vez que haya completado su propia sintaxis personalizada y / o tema de UI, tiene la opción de compartirla con otros usuarios de Atom como un paquete. Para hacer esto, necesitarás tener un repositorio de GitHub actualizado para cada uno. Para obtener instrucciones sobre cómo publicar un paquete Atom, consulte Atom Docs: Publicación de un paquete
En este tutorial, hemos mantenido el código de archivo LESS existente sin cambios tanto como sea posible, centrándonos en trabajar con variables. Dicho esto, si desea profundizar en el código del tema, puede controlar la presentación de prácticamente cualquier aspecto de la sintaxis y la interfaz de usuario, desde la forma de sus pestañas hasta el color de sus llaves y operadores..
Si desea que algún fragmento de código o elemento de UI fuera diferente, simplemente abra Atom en modo de desarrollo y use el inspector de elementos para ver si hay una clase en su lugar a la que pueda dirigirse. Como regla general, puedes personalizar casi todo.
Ya, incluso en el modo beta, Atom parece extremadamente prometedor en su capacidad de hacer que la personalización sea accesible para cualquier persona con experiencia en tecnologías web. Intenta trabajar con Atom, te sorprenderá lo que puedes hacer.!
