Saltar al contenido
Think Tecno

Cómo crear tu tema de Google Chrome

¿Alguna vez has querido personalizar la apariencia de tu navegador? Los temas de Google Chrome se pueden usar para hacer exactamente eso. Chrome Theme Store puede tener una amplia gama de opciones, desde temas espaciales hasta automóviles y hermosos paisajes, pero ¿qué pasa si ninguna de estas opciones es exactamente lo que desea, o si desea personalizar Chrome para tener una de sus fotos como fondo? ? Bueno, por suerte puedes hacerlo.

Hay dos métodos para crear su tema. Chrome tiene una característica incorporada simple que le permite importar una imagen de fondo para la nueva pestaña y personalizar el esquema de color de la interfaz de usuario a partir de una serie de configuraciones predefinidas. Si la función incorporada de Chrome no tiene la cantidad de opciones de personalización que desea, un sitio web llamado ThemeBeta lo tienes cubierto, con un creador de temas de Chrome rico en funciones pero fácil de usar (aunque el proceso de instalación es un poco más complejo). En este artículo, lo guiaremos a través del proceso de creación de su tema de Chrome con ambas herramientas.

La sencilla herramienta Chrome integrada

Para usar el editor de temas de Chrome incorporado, abra una pestaña nueva. En la esquina inferior derecha de la nueva pestaña hay un ícono de lápiz, haga clic en él para personalizar la apariencia de Chrome.


Haga clic en el ícono de lápiz para abrir el editor de temas.

En la ventana emergente que aparece después de hacer clic en el icono del lápiz, la primera opción es configurar la imagen de fondo. Aquí puede elegir entre un número muy limitado de opciones preestablecidas o puede cargar su propia imagen. Esta imagen de fondo solo se aplicará a la nueva pestaña, no se convertirá en un fondo en ningún sitio web real.


Seleccione una imagen de fondo para la nueva tarjeta.

Después de seleccionar una imagen de fondo, cambie a la pestaña “Color y tema”. Aquí puede elegir entre una selección de combinaciones de colores. Estas opciones de color afectan los colores de la pestaña y las barras de búsqueda y marcadores que conforman la interfaz de usuario de Chrome. En otras palabras, en la mayoría de los sitios que visita, ¡estos colores serán más notorios que su imagen de fondo solo porque la barra superior del navegador siempre será de este color!


Seleccione un esquema de color preestablecido.

Si ninguna de las combinaciones de colores predefinidas es exactamente lo que desea, la opción de color en la esquina superior izquierda le permite elegir su combinación de colores, con una gama completa de opciones de colores para elegir. Para seleccionar un color, primero haga clic en el símbolo en la parte superior izquierda, luego use la ventana emergente que aparece para elegir el color. Ajuste la cruz en el espectro de color para obtener su sombra y la flecha negra a la derecha de la ventana para elegir el brillo del tono. Si no está seguro de cómo funciona: cuanto más alto o más bajo mueva la flecha negra, más claro o más oscuro será su color. Para tonos más intensos, coloque la cruz cerca de la parte superior y la flecha en el centro. Para colores más claros, mueva el visor ligeramente hacia abajo y la flecha hacia arriba.

Después de seleccionar el color deseado, haga clic en “Agregar a colores personalizados” en la parte inferior derecha. Luego, seleccione el color personalizado de la lista “Colores personalizados” en la parte inferior izquierda, luego haga clic en “Aceptar” para aplicar. Si eliges un esquema de color personalizado, solo puedes elegir un color, Chrome elegirá un segundo color similar para complementar el tema con lo que cree que le queda mejor.

Consejo: Chrome casi siempre supone que el color elegido es el más oscuro de los dos colores del tema y elegirá un segundo tono más claro. ¡Elija en consecuencia!


Seleccione un esquema de color personalizado.

Cuando esté satisfecho con la imagen de fondo y el conjunto de colores, haga clic en “Finalizar” para guardar el tema personalizado y estará listo.

Temas de terceros simplificados

Si desea un tema simple, la herramienta integrada de Chrome debería ser suficiente, pero si desea más individualidad, ThemeBeta Ofrece más control. El sitio web le permite cambiar manualmente los colores de las pestañas de primer plano y de fondo, el texto en las barras de pestañas y más.

En primer lugar, debe visitar el sitio web de ThemeBeta. Puede explorar los temas enviados por el usuario en ellos página de inicio, o puedes ir directamente a ellos página del creador del tema para empezar con el tuyo El primer paso después de crear el tema es elegir una imagen de fondo. Haga clic en “1. Cargar una imagen”, luego cargue una imagen desde su disco duro. Esta imagen será la base de su tema y será la imagen de fondo en la nueva pestaña.

Consejo: Cualquier imagen cargada debe estar en formato PNG o JPG, ya que estos son los únicos formatos compatibles. Use un convertidor en línea si su imagen es diferente.

Si la imagen que cargó no se ve bien, puede estar demasiado ampliada o tener barras a los lados o en la parte superior, por lo que debería intentar cambiar las opciones de “Imagen de fondo”. Respectivamente, configuran la alineación horizontal, la alineación vertical, si la imagen se repite si es demasiado pequeña para la pantalla, la forma en que se redimensiona la imagen para ajustarse a la pantalla y un ajuste manual del cambio de tamaño. ¡Prueba las opciones hasta que encuentres algo con lo que estés feliz!


Configure la ubicación de la imagen de fondo.

Una vez que se carga la imagen, la vista previa en el lado derecho de la página se actualizará para representar la apariencia del tema. El segundo paso es hacer clic en “2. Generar colores “, este botón utilizará los colores presentes en la imagen que ha subido, para crear una paleta de colores similares que se utilizarán en el resto de la interfaz de usuario.

Si el esquema de color generado automáticamente se ajusta a su aspecto deseado, puede pasar a Instrucciones de instalación. Pero si desea configurar manualmente los colores de elementos como las pestañas de primer plano, las pestañas de fondo y la barra de herramientas, los detalles se tratan en la sección de configuración avanzada a continuación.

Configuración avanzada

Hay dos pestañas de opciones de configuración avanzadas disponibles en la esquina superior izquierda, la primera es “Imágenes”. Aquí puede configurar una imagen de fondo para ciertos elementos. Cuando pasa el cursor sobre cada una de las opciones, resaltará el elemento que esa configuración cambiaría en la vista previa roja.


Pase el mouse sobre las opciones para ver qué parte de la IU cambia.

Consejo: NTP significa “Nueva pestaña”, las opciones que comienzan con este acrónimo solo están presentes en la nueva pestaña, otras están visibles en otras páginas.

  • El “fondo de pantalla NTP” configura el fondo de pantalla principal; si importó previamente una imagen, ya estará “Subida”.
  • “Frame” configura la interfaz de usuario excluyendo la lista de pestañas, la barra de búsqueda y la barra de marcadores.
  • “Barra de herramientas” configura la pestaña activa, la barra de marcadores y el área que rodea la barra de búsqueda.
  • “Fondo de pestaña” configura el color de fondo para las pestañas inactivas.
  • “Frame overlay” le permite configurar una segunda imagen que se superpone a la imagen en “Frame”.
  • “Atribución NTP” agrega una imagen en la esquina inferior izquierda de la nueva pestaña, generalmente con fines de marca de agua.

Sugerencia: Si ha subido una imagen y no le gusta cómo se ve, puede eliminarla haciendo clic en el botón “X” junto a su etiqueta “Subido”. Si cargar una imagen cambió el color de fondo para ese elemento, puede restablecerlo manualmente o hacer clic en “Generar colores” en la pestaña “Básico” nuevamente para restaurar el esquema de color.

La segunda pestaña avanzada se titula “Colores”. Aquí, como con las opciones de la página anterior que tenía un cuadro al lado, puede usar el cuadro para abrir un selector de color y elegir un color sólido para los elementos respectivos. Nuevamente, si coloca el mouse sobre la opción de configuración, resaltará el elemento en la vista previa en rojo.


Haga clic en el cuadro para abrir el selector de color para los elementos respectivos.
  • “Barra de herramientas” configura el color de fondo de la etiqueta de atribución ThemeBeta en la parte inferior izquierda de la nueva pestaña.
  • “Texto de pestaña” configura el color del texto en la pestaña actualmente activa en la lista de pestañas. Establezca también el color del texto de atribución del tema en la esquina inferior izquierda de la nueva pestaña.
  • El “Texto de pestaña de fondo” configura el color del texto en pestañas inactivas en la lista de pestañas.
  • “Texto de marcador” configura el color del texto de los elementos en la barra de marcadores.
  • El “texto NTP” configura el color del texto o los enlaces de página recomendados / regulares en el centro de la página.
  • “Link NTP” no tiene ningún efecto.
  • Los “botones de control” configuran el color de los botones Reducir, Maximizar y Cerrar en la esquina superior derecha.
  • “Botones” configura el color de los botones de avance, retroceso, recarga y inicio.

Después de configurar todas las opciones avanzadas de la manera que desee, está listo para continuar con el proceso de instalación.

Instalar un tema de terceros

Por razones de seguridad, Google ahora solo permite la instalación de extensiones y temas a través de Chrome Webstore. Para instalar su propio tema, deberá habilitar una función de desarrollo. Desafortunadamente, este cambio significa que el simple botón “Empaquetar e instalar” en la pestaña “Básico” y “Empacar” ya no funciona. Si prueba el método “Empacar e instalar”, recibirá un mensaje de error.


Los archivos CRX de terceros no se pueden instalar en Chrome.

Para evitar esto, vaya a la pestaña “Paquete” y haga clic en “Paquete y descargar archivo Zip”


Haga clic en el botón “Empacar y descargar archivo Zip” en la pestaña “Empaquetar”.

Una vez que se descarga el archivo zip, extraiga los archivos y guárdelos en su disco duro. Haga doble clic en el archivo que descargó y seleccione Extraer en la parte superior del visor de archivos. Deberá seleccionar dónde extraer sus archivos. Recuerde dónde los guarda para poder cargarlos más fácilmente.

Consejo: Si cambia el nombre de la carpeta para indicar cuál es el tema, puede ser más fácil encontrarlo nuevamente en el futuro si desea reutilizarlo.


Extraiga los archivos del archivo ZIP y guárdelos en el disco duro.

El siguiente paso es la página de extensiones de Chrome. Puede acceder haciendo clic en los tres puntos en la esquina superior derecha, en “Otras herramientas”, luego en “Extensiones”, o puede hacer clic en aquí.


Haga clic en los tres puntos, luego haga clic en Más herramientas> Extensiones.

Una vez en el menú de extensiones, en la esquina superior derecha de la página, hay un cursor marcado “Modo desarrollador”. Permitirle. Una vez que se habilita el modo desarrollador, deben aparecer tres botones en la esquina superior izquierda. Lo que necesita es “Carga desempaquetada”. Haga clic en “Cargar descomprimido” e importe la carpeta que extrajo del archivo zip anteriormente.


Habilite el modo de desarrollador y haga clic en “Cargar descomprimido”.

Consejo: desea importar la carpeta raíz, no la carpeta “imágenes” que contiene. Si no lo ha renombrado anteriormente, se llamará “theme1234567890”

Una vez que se importa el tema, aparecerá una advertencia en la pestaña actual, confirmando que el tema se ha instalado y que ofrece un botón Cancelar. Antes de cerrar esta advertencia, abra una nueva pestaña y asegúrese de que todo se vea como lo desea.


¡No oculte el aviso de confirmación hasta que esté seguro de que está satisfecho con el resultado!

Si el tema no salió exactamente como esperaba, haga clic en “Cancelar” e intente editar la plantilla nuevamente. Una vez que esté satisfecho con los resultados, no dude en cerrar la página “Extensiones” y continuar navegando con su nuevo y brillante tema personalizado de Chrome.